操作方法
新建html文档。
书写hmtl代码。 <div class="wrapper"> <div class="icon photos"> <span class="fan f1"></span> <span class="fan f2"></span> <span class="fan f3"></span> <span class="fan f4"></span> <span class="fan f5"></span> <span class="fan f6"></span> <span class="fan f7"></span> <span class="fan f8"></span> </div> </div>
初始化css代码。 <style> html, body { width : 100%; height : 100%; margin : 0; padding : 0; } .wrapper { position : relative; width : 420px; margin : 0 auto; padding : 0; font-size : 0; } .icon { position : relative; display : inline-block; width : 100px; height : 100px; margin : 20px; border-radius : 18px; -webkit-box-sizing : border-box; -moz-box-sizing : border-box; box-sizing : border-box; } </style>
书写css代码 .photos { border : 1px #cfcfcf solid; overflow : hidden; } .photos .fan { position : absolute; width : 26px; height : 40px; top : 50%; left : 50%; border-radius : 22px; -webkit-transform-origin : center center; -moz-transform-origin : center center; -ms-transform-origin : center center; -o-transform-origin : center center; transform-origin : center center; } .photos .f1 { margin : -42px 0 0 -13px; z-index : 8; box-shadow : 0 1px 0 0 rgba(250, 144, 29, 0.8) inset; background : -webkit-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); background : -moz-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); background : -ms-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); background : -o-linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); background : linear-gradient(top, rgba(250, 144, 29, 0.9) 0%, rgba(250, 144, 29, 0.7) 100%); } .photos .f2 { margin : -38px 0 0 4px; z-index : 1; box-shadow : 0 1px 0 0 rgba(252, 228, 0, 0.8) inset; -webkit-transform : rotateZ(45deg); -moz-transform : rotateZ(45deg); -ms-transform : rotateZ(45deg); -o-transform : rotateZ(45deg); transform : rotateZ(45deg); background : -webkit-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); background : -moz-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); background : -ms-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); background : -o-linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); background : linear-gradient(top, rgba(252, 228, 0, 0.9) 0%, rgba(252, 228, 0, 0.7) 100%); } .photos .f3 { margin : -20px 0 0 10px; z-index : 2; box-shadow : 0 1px 0 0 rgba(187, 213, 41, 0.8) inset; -webkit-transform : rotateZ(90deg); -moz-transform : rotateZ(90deg); -ms-transform : rotateZ(90deg); -o-transform : rotateZ(90deg); transform : rotateZ(90deg); background : -webkit-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); background : -moz-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); background : -ms-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); background : -o-linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); background : linear-gradient(top, rgba(187, 213, 41, 0.9) 0%, rgba(187, 213, 41, 0.7) 100%); } .photos .f4 { margin : -4px 0 0 2px; z-index : 3; box-shadow : 0 1px 0 0 rgba(86, 189, 118, 0.8) inset; -webkit-transform : rotateZ(135deg); -moz-transform : rotateZ(135deg); -ms-transform : rotateZ(135deg); -o-transform : rotateZ(135deg); transform : rotateZ(135deg); background : -webkit-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); background : -moz-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); background : -ms-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); background : -o-linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); background : linear-gradient(top, rgba(86, 189, 118, 0.9) 0%, rgba(86, 189, 118, 0.7) 100%); } .photos .f5 { margin : 2px 0 0 -13px; z-index : 4; box-shadow : 0 1px 0 0 rgba(88, 165, 228, 0.8) inset; -webkit-transform : rotateZ(180deg); -moz-transform : rotateZ(180deg); -ms-transform : rotateZ(180deg); -o-transform : rotateZ(180deg); transform : rotateZ(180deg); background : -webkit-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); background : -moz-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); background : -ms-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); background : -o-linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); background : linear-gradient(top, rgba(88, 165, 228, 0.9) 0%, rgba(88, 165, 228, 0.7) 100%); } .photos .f6 { margin : -4px 0 0 -31px; z-index : 5; box-shadow : 0 1px 0 0 rgba(140, 127, 195, 0.8) inset; -webkit-transform : rotateZ(225deg); -moz-transform : rotateZ(225deg); -ms-transform : rotateZ(225deg); -o-transform : rotateZ(225deg); transform : rotateZ(225deg); background : -webkit-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); background : -moz-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); background : -ms-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); background : -o-linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); background : linear-gradient(top, rgba(140, 127, 195, 0.9) 0%, rgba(140, 127, 195, 0.7) 100%); } .photos .f7 { margin : -20px 0 0 -36px; z-index : 6; box-shadow : 0 1px 0 0 rgba(194, 126, 172, 0.8) inset; -webkit-transform : rotateZ(270deg); -moz-transform : rotateZ(270deg); -ms-transform : rotateZ(270deg); -o-transform : rotateZ(270deg); transform : rotateZ(270deg); background : -webkit-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); background : -moz-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); background : -ms-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); background : -o-linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); background : linear-gradient(top, rgba(194, 126, 172, 0.9) 0%, rgba(194, 126, 172, 0.7) 100%); } .photos .f8 { margin : -36px 0 0 -31px; z-index : 7; box-shadow : 0 1px 0 0 rgba(244, 73, 82, 0.8) inset; -webkit-transform : rotateZ(315deg); -moz-transform : rotateZ(315deg); -ms-transform : rotateZ(315deg); -o-transform : rotateZ(315deg); transform : rotateZ(315deg); background : -webkit-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); background : -moz-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); background : -ms-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); background : -o-linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); background : linear-gradient(top, rgba(244, 73, 82, 0.9) 0%, rgba(244, 73, 82, 0.7) 100%); }
代码整体结构
查看效果