欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > 心得笔记 >

学习用css3画博客网站logo图标

发布时间:2013-11-02  编辑:杨雨个人博客网站   点击:   

花了几个小时的时间来研究怎么用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://itbyc.com/log/80.html
转载请注明出处。
分享是一种快乐,也是一种美德:
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1