学习用css3画博客网站logo图标
时间:2020-08-23来源:杨青青个人博客作者:杨青青
花了几个小时的时间来研究怎么用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 }
你觉得文章内容怎么样