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

2026-03-28 04:54:46

1、新建html文档。

2、书写hmtl代码。

</div>

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

3、初始化css代码

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

4、书写css代码。

.stocks { overflow : hidden; background-repeat : repeat-x; background-size : 20px 100%; background-position : -10px 0; background-image : -webkit-linear-gradient(left, #282828 5%, black 6%); background-image : -moz-linear-gradient(left, #282828 5%, black 6%); background-image : -ms-linear-gradient(left, #282828 5%, black 6%); background-image : -o-linear-gradient(left, #282828 5%, black 6%); background-image : linear-gradient(left, #282828 5%, black 6%); }

.stocks:before { position : absolute; content : ''; width : 120px; height : 53%; top : 47%; left : 0; background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%); background : linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 80%); -webkit-transform : rotateZ(-8deg); -moz-transform : rotateZ(-8deg); -ms-transform : rotateZ(-8deg); -o-transform : rotateZ(-8deg); transform : rotateZ(-8deg); }

.stocks .dot { position : absolute; width : 7px; height : 7px; top : 28px; right : 26px; z-index : 100; border-radius : 9px; border : 1px #00f0ff solid; background : #04c9f8; }

.stocks .dot:before { position : absolute; content : ''; width : 1px; height : 100px; top : -28px; right : 3px; background : #04c9f8; }

.stocks .line { position : absolute; height : 1px; background : #fff; z-index : 10; }

.stocks .line.l1 { width : 14px; top : 56px; left : 0; -webkit-transform : rotateZ(18deg); -moz-transform : rotateZ(18deg); -ms-transform : rotateZ(18deg); -o-transform : rotateZ(18deg); transform : rotateZ(18deg); }

.stocks .line.l2 { width : 14px; top : 54px; left : 12px; -webkit-transform : rotateZ(-40deg); -moz-transform : rotateZ(-40deg); -ms-transform : rotateZ(-40deg); -o-transform : rotateZ(-40deg); transform : rotateZ(-40deg); }

.stocks .line.l3 { width : 7px; top : 53px; left : 24px; -webkit-transform : rotateZ(35deg); -moz-transform : rotateZ(35deg); -ms-transform : rotateZ(35deg); -o-transform : rotateZ(35deg); transform : rotateZ(35deg); }

.stocks .line.l4 { width : 14px; top : 50px; left : 27px; -webkit-transform : rotateZ(-61deg); -moz-transform : rotateZ(-61deg); -ms-transform : rotateZ(-61deg); -o-transform : rotateZ(-61deg); transform : rotateZ(-61deg); }

.stocks .line.l5 { width : 16px; top : 52px; left : 33px; -webkit-transform : rotateZ(67deg); -moz-transform : rotateZ(67deg); -ms-transform : rotateZ(67deg); -o-transform : rotateZ(67deg); transform : rotateZ(67deg); }

.stocks .line.l6 { width : 7px; top : 61px; left : 44px; -webkit-transform : rotateZ(26deg); -moz-transform : rotateZ(26deg); -ms-transform : rotateZ(26deg); -o-transform : rotateZ(26deg); transform : rotateZ(26deg); }

.stocks .line.l7 { width : 14px; top : 56px; left : 48px; -webkit-transform : rotateZ(-54deg); -moz-transform : rotateZ(-54deg); -ms-transform : rotateZ(-54deg); -o-transform : rotateZ(-54deg); transform : rotateZ(-54deg); }

.stocks .line.l8 { width : 5px; top : 51px; left : 59px; -webkit-transform : rotateZ(-5deg); -moz-transform : rotateZ(-5deg); -ms-transform : rotateZ(-5deg); -o-transform : rotateZ(-5deg); transform : rotateZ(-5deg); }

.stocks .line.l9 { width : 19px; top : 42px; left : 57px; -webkit-transform : rotateZ(-70deg); -moz-transform : rotateZ(-70deg); -ms-transform : rotateZ(-70deg); -o-transform : rotateZ(-70deg); transform : rotateZ(-70deg); }

.stocks .line.l10 { width : 18px; top : 42px; left : 64px; -webkit-transform : rotateZ(70deg); -moz-transform : rotateZ(70deg); -ms-transform : rotateZ(70deg); -o-transform : rotateZ(70deg); transform : rotateZ(70deg); }

.stocks .line.l11 { width : 7px; top : 48px; left : 76px; -webkit-transform : rotateZ(-40deg); -moz-transform : rotateZ(-40deg); -ms-transform : rotateZ(-40deg); -o-transform : rotateZ(-40deg); transform : rotateZ(-40deg); }

.stocks .line.l12 { width : 14px; top : 52px; left : 79px; -webkit-transform : rotateZ(59deg); -moz-transform : rotateZ(59deg); -ms-transform : rotateZ(59deg); -o-transform : rotateZ(59deg); transform : rotateZ(59deg); }

.stocks .line.l13 { width : 22px; top : 50px; left : 85px; -webkit-transform : rotateZ(-57deg); -moz-transform : rotateZ(-57deg); -ms-transform : rotateZ(-57deg); -o-transform : rotateZ(-57deg); transform : rotateZ(-57deg); }

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

5、代码整体结构

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

6、查看效果

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