html+CSS3实现iOS7扁平化safari图标

1、新建html文档。

2、书写hmtl代码。

<div class="wrapper">

<div class="icon safari">

    <span class="compass">

        <span class="scale">

            <span class="line l1"></span>

                <span class="line l2"></span>

                <span class="line l3"></span>

                <span class="line l4"></span>

                <span class="line l5"></span>

                <span class="line l6"></span>

                <span class="line l7"></span>

                <span class="line l8"></span>

                <span class="line l9"></span>

                <span class="line l10 s"></span>

                <span class="line l11 s"></span>

                <span class="line l12 s"></span>

                <span class="line l13 s"></span>

                <span class="line l14 s"></span>

                <span class="line l15 s"></span>

                <span class="line l16 s"></span>

                <span class="line l17 s"></span>

                <span class="line l18 s"></span>

            </span>

        </span>

    </div>

</div>

3、初始化css样式

4、书写css样式

.safari { border : 1px #cfcfcf solid; }

.safari .compass { position : absolute; width : 86px; height : 86px; top : 50%; left : 50%; overflow : hidden; margin : -43px 0 0 -43px; border-radius : 43px; box-shadow : 0 0 0 1px rgba(0, 0, 0, 0.05) inset; -webkit-transform : rotateZ(45deg); -moz-transform : rotateZ(45deg); -ms-transform : rotateZ(45deg); -o-transform : rotateZ(45deg); transform : rotateZ(45deg); background : -webkit-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); background : -moz-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); background : -ms-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); background : -o-linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); background : linear-gradient(135deg, #00e3fe 0%, #1b53f0 100%); }

.safari .compass:before, .safari .compass:after { position : absolute; content : ''; border-style : solid; border-width : 43px; z-index : 3; -webkit-transform : scaleX(0.15); -moz-transform : scaleX(0.15); -ms-transform : scaleX(0.15); -o-transform : scaleX(0.15); transform : scaleX(0.15); }

.safari .compass:before { top : 43px; left : 0; border-color : white transparent transparent transparent; }

.safari .compass:after { top : -43px; left : 0; border-color : transparent transparent #fe3b2f transparent; }

.safari .scale { position : absolute; width : 80px; height : 80px; top : 50%; left : 50%; margin : -40px 0 0 -40px; -webkit-transform : rotateZ(-45deg); -moz-transform : rotateZ(-45deg); -ms-transform : rotateZ(-45deg); -o-transform : rotateZ(-45deg); transform : rotateZ(-45deg); }

.safari .scale .line { position : absolute; width : 80px; height : 80px; top : 0; left : 0; }

.safari .scale .line:after, .safari .scale .line:before { position : absolute; content : ''; }

.safari .scale .line:before { width : 1px; height : 80px; top : 0; left : 50%; background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : linear-gradient(top, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); }

.safari .scale .line:after { width : 80px; height : 1px; top : 50%; left : 0; background : -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -ms-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : -o-linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); background : linear-gradient(left, rgba(255, 255, 255, 0.7) 10%, rgba(255, 255, 255, 0) 11%, rgba(255, 255, 255, 0) 89%, rgba(255, 255, 255, 0.7) 90%, rgba(255, 255, 255, 0.7) 100%); }

.safari .scale .line.s:before { background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : linear-gradient(top, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); }

.safari .scale .line.s:after { background : -webkit-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -moz-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -ms-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : -o-linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); background : linear-gradient(left, rgba(255, 255, 255, 0.7) 7%, rgba(255, 255, 255, 0) 8%, rgba(255, 255, 255, 0) 92%, rgba(255, 255, 255, 0.7) 93%, rgba(255, 255, 255, 0.7) 100%); }

.safari .scale .line.l1 { -webkit-transform : rotateZ(0deg); -moz-transform : rotateZ(0deg); -ms-transform : rotateZ(0deg); -o-transform : rotateZ(0deg); transform : rotateZ(0deg); }

.safari .scale .line.l2 { -webkit-transform : rotateZ(10deg); -moz-transform : rotateZ(10deg); -ms-transform : rotateZ(10deg); -o-transform : rotateZ(10deg); transform : rotateZ(10deg); }

.safari .scale .line.l3 { -webkit-transform : rotateZ(20deg); -moz-transform : rotateZ(20deg); -ms-transform : rotateZ(20deg); -o-transform : rotateZ(20deg); transform : rotateZ(20deg); }

.safari .scale .line.l4 { -webkit-transform : rotateZ(30deg); -moz-transform : rotateZ(30deg); -ms-transform : rotateZ(30deg); -o-transform : rotateZ(30deg); transform : rotateZ(30deg); }

.safari .scale .line.l5 { -webkit-transform : rotateZ(40deg); -moz-transform : rotateZ(40deg); -ms-transform : rotateZ(40deg); -o-transform : rotateZ(40deg); transform : rotateZ(40deg); }

.safari .scale .line.l6 { -webkit-transform : rotateZ(50deg); -moz-transform : rotateZ(50deg); -ms-transform : rotateZ(50deg); -o-transform : rotateZ(50deg); transform : rotateZ(50deg); }

.safari .scale .line.l7 { -webkit-transform : rotateZ(60deg); -moz-transform : rotateZ(60deg); -ms-transform : rotateZ(60deg); -o-transform : rotateZ(60deg); transform : rotateZ(60deg); }

.safari .scale .line.l8 { -webkit-transform : rotateZ(70deg); -moz-transform : rotateZ(70deg); -ms-transform : rotateZ(70deg); -o-transform : rotateZ(70deg); transform : rotateZ(70deg); }

.safari .scale .line.l9 { -webkit-transform : rotateZ(80deg); -moz-transform : rotateZ(80deg); -ms-transform : rotateZ(80deg); -o-transform : rotateZ(80deg); transform : rotateZ(80deg); }

.safari .scale .line.l10 { -webkit-transform : rotateZ(5deg); -moz-transform : rotateZ(5deg); -ms-transform : rotateZ(5deg); -o-transform : rotateZ(5deg); transform : rotateZ(5deg); }

.safari .scale .line.l11 { -webkit-transform : rotateZ(15deg); -moz-transform : rotateZ(15deg); -ms-transform : rotateZ(15deg); -o-transform : rotateZ(15deg); transform : rotateZ(15deg); }

.safari .scale .line.l12 { -webkit-transform : rotateZ(25deg); -moz-transform : rotateZ(25deg); -ms-transform : rotateZ(25deg); -o-transform : rotateZ(25deg); transform : rotateZ(25deg); }

.safari .scale .line.l13 { -webkit-transform : rotateZ(35deg); -moz-transform : rotateZ(35deg); -ms-transform : rotateZ(35deg); -o-transform : rotateZ(35deg); transform : rotateZ(35deg); }

.safari .scale .line.l14 { -webkit-transform : rotateZ(45deg); -moz-transform : rotateZ(45deg); -ms-transform : rotateZ(45deg); -o-transform : rotateZ(45deg); transform : rotateZ(45deg); }

.safari .scale .line.l15 { -webkit-transform : rotateZ(55deg); -moz-transform : rotateZ(55deg); -ms-transform : rotateZ(55deg); -o-transform : rotateZ(55deg); transform : rotateZ(55deg); }

.safari .scale .line.l16 { -webkit-transform : rotateZ(65deg); -moz-transform : rotateZ(65deg); -ms-transform : rotateZ(65deg); -o-transform : rotateZ(65deg); transform : rotateZ(65deg); }

.safari .scale .line.l17 { -webkit-transform : rotateZ(75deg); -moz-transform : rotateZ(75deg); -ms-transform : rotateZ(75deg); -o-transform : rotateZ(75deg); transform : rotateZ(75deg); }

.safari .scale .line.l18 { -webkit-transform : rotateZ(85deg); -moz-transform : rotateZ(85deg); -ms-transform : rotateZ(85deg); -o-transform : rotateZ(85deg); transform : rotateZ(85deg); }

5、代码整体结构

6、查看效果