学习用css3画博客网站logo图标
花了几个小时的时间来研究怎么用css3来画logo,就是G有点儿问题,也算是有进步了,代码贴出来:

CSS样式表:
.y{width:160px;height:200px;position:relative; /* relative(相对定位) 对象不可层叠、不脱离文档流,参考自身静态位置通过 top,bottom,left,right 定位,并且可以通过z-index进行层次分级 */ } /* after 伪元素在元素之前添加内容*/ .y:before{ content:" "; width:60px; height:120px; background:#333; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); /* skew 逆时针倾斜*/ position:absolute;/* absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位 */ left:20px; top:10px} /* after 伪元素在元素之后添加内容*/ .y:after{ content:" "; width:60px; height:120px; background:#333; position:absolute; left:-2px;top:130px; } .a:before{ content:" "; width:60px; height:240px; background:#333; -webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); position:absolute; left:150px; top:20px} .a:after{ content:" "; width:60px; height:240px; background:#333; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); position:absolute; left:270px; top:20px} .n:before{ content:" "; width:60px; height:240px; background:#333; position:absolute; left:400px; top:20px} .n:after{ content:" "; width:60px; height:240px; background:#333; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); position:absolute; left:470px; top:20px} .n1{ content:" "; width:60px; height:240px; background:#333; position:absolute; left:540px; top:20px} .g:before{ content:" "; width: 250px; height: 250px;-moz-border-radius: 125px; -webkit-border-radius: 125px; border-radius: 125px; /* radius 圆半径 */ background:#333; position:absolute; left:650px; top:20px} .g:after{ content:" "; width: 160px; height: 160px;-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 80px; background:#fff; position:absolute; left:700px; top:67px} .g1:after{ content:" "; width: 100px; height: 140px; background:#fff; position:absolute; left:810px; top:75px} .g2:before{ content:" "; width: 110px; height: 50px; background:#333; position:absolute; left:769px; top:115px} .g2:after{ content:" "; width: 57px; height: 80px; background:#333; position:absolute; left:822px; top:135px} /* after 伪元素在元素之前添加内容*/ .heart:before{ content:" "; border-radius:80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ width:160px; height:240px;/* 长方形 */ background:#e15782; -moz-transform: rotate(-45deg);/* 逆时针旋转45°*/ -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); position:absolute;/* absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位 */ left:940px; top:20px} .heart:after{ content:" "; border-radius:80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一半 */ width:160px; height:240px;/* 长方形 */ background:#e15782; -moz-transform: rotate(45deg);/* 顺时针旋转45°*/ -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); position:absolute;/* absolute(绝对定位) 脱离文档流,通过 top,bottom,left,right 定位 */ left:998px;top:20px}DIV:

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了你的权益请来信告知我们删除。邮箱:dacesmiling@qq.com
上一篇:利用css3样式画各种图形
下一篇:CSS3实用效果归纳