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

新建html文档。

书写hmtl代码。

初始化css代码。

书写css代码。.gamecenter { border : 1px #cfcfcf solid; }.gamecenter .bubble { position : absolute; border-radius : 99px; }.gamecenter .bubble.blue { width : 62px; height : 62px; top : 12px; left : 10px; z-index : 3; box-shadow : 0 0 1px 0 rgba(129, 135, 241, 0.6) inset, 0 -2px 4px 0 rgba(28, 210, 255, 0.4) inset, 0 2px 3px 0 rgba(160, 155, 243, 0.6) inset; background : -webkit-linear-gradient(top, rgba(92, 154, 243, 0.8) 0%, rgba(107, 209, 229, 0.8) 100%); background : -moz-linear-gradient(top, rgba(92, 154, 243, 0.8) 0%, rgba(107, 209, 229, 0.8) 100%); background : -ms-linear-gradient(top, rgba(92, 154, 243, 0.8) 0%, rgba(107, 209, 229, 0.8) 100%); background : -o-linear-gradient(top, rgba(92, 154, 243, 0.8) 0%, rgba(107, 209, 229, 0.8) 100%); background : linear-gradient(top, rgba(92, 154, 243, 0.8) 0%, rgba(107, 209, 229, 0.8) 100%); }.gamecenter .bubble.blue:before { position : absolute; content : ''; width : 38px; height : 38px; top : -7px; left : 50%; margin : 0 0 0 -19px; border-radius : 20px; box-shadow : 0 0 1px 0 rgba(91, 138, 243, 0.1); background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); background : linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 80%); -webkit-transform : scaleY(0.65); -moz-transform : scaleY(0.65); -ms-transform : scaleY(0.65); -o-transform : scaleY(0.65); transform : scaleY(0.65); }.gamecenter .bubble.yellow { width : 48px; height : 48px; top : 8px; left : 36px; z-index : 1; box-shadow : 0 0 1px 0 rgba(232, 190, 0, 0.6) inset, 0 -2px 4px 0 rgba(253, 234, 70, 0.4) inset, 0 2px 3px 0 rgba(160, 155, 243, 0.6) inset; background : -webkit-linear-gradient(top, rgba(244, 204, 1, 0.8) 0%, rgba(251, 233, 77, 0.8) 100%); background : -moz-linear-gradient(top, rgba(244, 204, 1, 0.8) 0%, rgba(251, 233, 77, 0.8) 100%); background : -ms-linear-gradient(top, rgba(244, 204, 1, 0.8) 0%, rgba(251, 233, 77, 0.8) 100%); background : -o-linear-gradient(top, rgba(244, 204, 1, 0.8) 0%, rgba(251, 233, 77, 0.8) 100%); background : linear-gradient(top, rgba(244, 204, 1, 0.8) 0%, rgba(251, 233, 77, 0.8) 100%); }.gamecenter .bubble.yellow:before { position : absolute; content : ''; width : 38px; height : 38px; top : -7px; left : 50%; margin : 0 0 0 -19px; border-radius : 20px; box-shadow : 0 0 1px 0 rgba(91, 138, 243, 0.1); background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); -webkit-transform : scaleY(0.65); -moz-transform : scaleY(0.65); -ms-transform : scaleY(0.65); -o-transform : scaleY(0.65); transform : scaleY(0.65); }.gamecenter .bubble.purple { width : 30px; height : 30px; top : 60px; left : 22px; z-index : 2; box-shadow : 0 0 1px 0 rgba(118, 55, 252, 0.6) inset, 0 -2px 3px 0 rgba(143, 126, 253, 0.6) inset, 0 2px 3px 0 rgba(160, 155, 243, 0.6) inset; background : -webkit-linear-gradient(top, rgba(155, 38, 223, 0.8) 0%, rgba(143, 48, 255, 0.8) 100%); background : -moz-linear-gradient(top, rgba(155, 38, 223, 0.8) 0%, rgba(143, 48, 255, 0.8) 100%); background : -ms-linear-gradient(top, rgba(155, 38, 223, 0.8) 0%, rgba(143, 48, 255, 0.8) 100%); background : -o-linear-gradient(top, rgba(155, 38, 223, 0.8) 0%, rgba(143, 48, 255, 0.8) 100%); background : linear-gradient(top, rgba(155, 38, 223, 0.8) 0%, rgba(143, 48, 255, 0.8) 100%); }.gamecenter .bubble.purple:before { position : absolute; content : ''; width : 38px; height : 38px; top : -7px; left : 50%; margin : 0 0 0 -19px; border-radius : 20px; box-shadow : 0 0 1px 0 rgba(91, 138, 243, 0.1); background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); background : linear-gradient(top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%); -webkit-transform : scaleY(0.65); -moz-transform : scaleY(0.65); -ms-transform : scaleY(0.65); -o-transform : scaleY(0.65); transform : scaleY(0.65); }.gamecenter .bubble.pink { width : 42px; height : 42px; top : 44px; left : 44px; z-index : 4; box-shadow : 0 0 1px 0 rgba(254, 11, 132, 0.6) inset, 0 -2px 3px 0 rgba(143, 126, 253, 0.6) inset, 0 2px 3px 0 rgba(160, 155, 243, 0.6) inset; background : -webkit-linear-gradient(top, rgba(255, 29, 75, 0.8) 0%, rgba(255, 29, 170, 0.8) 60%, rgba(254, 153, 42, 0.8) 100%); background : -moz-linear-gradient(top, rgba(255, 29, 75, 0.8) 0%, rgba(255, 29, 170, 0.8) 60%, rgba(254, 153, 42, 0.8) 100%); background : -ms-linear-gradient(top, rgba(255, 29, 75, 0.8) 0%, rgba(255, 29, 170, 0.8) 60%, rgba(254, 153, 42, 0.8) 100%); background : -o-linear-gradient(top, rgba(255, 29, 75, 0.8) 0%, rgba(255, 29, 170, 0.8) 60%, rgba(254, 153, 42, 0.8) 100%); background : linear-gradient(top, rgba(255, 29, 75, 0.8) 0%, rgba(255, 29, 170, 0.8) 60%, rgba(254, 153, 42, 0.8) 100%); }.gamecenter .bubble.pink:before { position : absolute; content : ''; width : 38px; height : 38px; top : -7px; left : 50%; margin : 0 0 0 -19px; border-radius : 20px; box-shadow : 0 0 1px 0 rgba(255, 46, 94, 0.1); background : -webkit-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%); background : -moz-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%); background : -ms-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%); background : -o-linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%); background : linear-gradient(top, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 80%); -webkit-transform : scaleY(0.65); -moz-transform : scaleY(0.65); -ms-transform : scaleY(0.65); -o-transform : scaleY(0.65); transform : scaleY(0.65); }

代码整体结构

查看效果