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

2026-04-01 14:10:37

1、新建html文档。

2、书写hmtl代码。

</div>

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

3、初始化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>

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

4、书写css代码。

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

.calendar:before { position : absolute; content : 'Monday'; width : 100%; height : 12px; top : 14px; left : 0; font-family : "Helvetica Neue", Helvetica, Arial; font-weight : normal; font-size : 15px; text-align : center; line-height : 12px; letter-spacing : -1px; text-shadow : 0 0 1px #f2c1bf; color : #d41a26; }

.calendar:after { position : absolute; content : ''; width : 46px; height : 46px; top : 35px; left : 38px; border : 1px #0b0b0b solid; border-radius : 22px; box-shadow : 0 0 1px 0 rgba(11, 11, 11, 0.7); -webkit-transform : scaleX(0.7); -moz-transform : scaleX(0.7); -ms-transform : scaleX(0.7); -o-transform : scaleX(0.7); transform : scaleX(0.7); }

.calendar .one { position : absolute; width : 14px; height : 46px; top : 35px; left : 22px; overflow : hidden; border-right : 1px #0b0b0b solid; }

.calendar .one:before { position : absolute; content : ''; width : 108px; height : 108px; top : -91px; left : -81px; border : 1px #0b0b0b solid; border-radius : 100px; box-shadow : 0 0 1px 0 rgba(11, 11, 11, 0.7); }

.calculator { background : #ff9600; box-shadow : 0 0 0 1px rgba(251, 138, 0, 0.5) inset; overflow : hidden; }

.calculator .sign { position : absolute; width : 49px; height : 49px; border : 2px black solid; box-shadow : 0 0 1px 1px rgba(255, 160, 2, 0.5) inset; }

.calculator .sign.plus { top : -2px; left : -2px; }

.calculator .sign.plus:before, .calculator .sign.plus:after { position : absolute; content : ''; width : 20px; height : 1px; top : 50%; left : 50%; margin : 0 0 0 -10px; background : #fff; box-shadow : 0 0 1px 1px #fb8900; }

.calculator .sign.plus:after { -webkit-transform : rotateZ(90deg); -moz-transform : rotateZ(90deg); -ms-transform : rotateZ(90deg); -o-transform : rotateZ(90deg); transform : rotateZ(90deg); }

.calculator .sign.minus { top : -2px; right : -2px; }

.calculator .sign.minus:before { position : absolute; content : ''; width : 20px; height : 1px; top : 50%; left : 50%; margin : 0 0 0 -10px; background : #fff; box-shadow : 0 0 1px 1px #fb8900; }

.calculator .sign.mul { bottom : -2px; left : -2px; }

.calculator .sign.mul:before, .calculator .sign.mul:after { position : absolute; content : ''; width : 20px; height : 1px; top : 50%; left : 50%; margin : 0 0 0 -10px; background : #fff; box-shadow : 0 0 1px 1px #fb8900; }

.calculator .sign.mul:before { -webkit-transform : rotateZ(-45deg); -moz-transform : rotateZ(-45deg); -ms-transform : rotateZ(-45deg); -o-transform : rotateZ(-45deg); transform : rotateZ(-45deg); }

.calculator .sign.mul:after { -webkit-transform : rotateZ(45deg); -moz-transform : rotateZ(45deg); -ms-transform : rotateZ(45deg); -o-transform : rotateZ(45deg); transform : rotateZ(45deg); }

.calculator .sign.eq { bottom : -2px; right : -2px; background : #c6c7cb; box-shadow : 0 0 1px 1px rgba(255, 255, 255, 0.5) inset; }

.calculator .sign.eq:before, .calculator .sign.eq:after { position : absolute; content : ''; width : 20px; height : 1px; top : 50%; left : 50%; margin : 0 0 0 -10px; background : #000; box-shadow : 0 0 1px 1px rgba(255, 255, 255, 0.4); }

.calculator .sign.eq:before { margin : -3px 0 0 -10px; }

.calculator .sign.eq:after { margin : 3px 0 0 -10px; }

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

5、代码整体结构

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

6、查看效果

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