2024年04月20日 学习 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：
本文链接：http://so.lmcjl.com/news/2725/