手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css图标制作教程制作云图标
css图标制作教程制作云图标
摘要:body{background:#ddd}.logo{width:400px;border:30pxsolid#3FB7F3;height:...

css图标制作教程制作云图标1

<div>

<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

</div>

body{

background:#ddd

}</p> <p>.logo{

width:400px;

border:30px solid #3FB7F3;

height:210px;

background:#3FB7F3;

position:relative;

overflow:hidden;

margin:100px auto;</p> <p>}

.logo div{

border:20px solid #fff;

width:100px;

height:80px;

border-radius:50%;

position:absolute;

top:230px;

left:0;

}

.logo div:nth-of-type(1){

top:56px;

left:88px;

border-right-color: transparent;

border-bottom-color: transparent;

}</p> <p>.logo div:nth-of-type(2){

width:65px;

height:65px;

top:106px;

left:28px;

border-right-color: transparent;

}</p> <p>.logo div:nth-of-type(3){

width:114px;

height:114px;

top:6px;

left:156px;

border-bottom-color: transparent;

}</p> <p>.logo div:nth-of-type(4){

width:95px;

height:95px;

top:78px;

left:239px;

border-left-color: transparent;

}</p> <p>.logo div:nth-of-type(5){

width:100px;

height:100px;

top:97px;

left:253px;

background:#3FB7F3;

border:0

}</p> <p>.logo div:nth-of-type(6){

width:120px;

height:120px;

top:26px;

left:172px;

background:#3FB7F3;

border:0

}</p> <p>

.logo div:nth-of-type(7){

width:100px;

height:100px;

top:74px;

left:106px;

background:#3FB7F3;

border:0

}</p> <p>.logo div:nth-of-type(8){

width:70px;

height:70px;

top:124px;

left:48px;

background:#3FB7F3;

border:0

}</p> <p>.logo div:nth-of-type(9){

width:247px;

height:55px;

top:138px;

left:76px;

border-radius:0;

background:#3FB7F3;

border:0;

border-bottom:20px solid #fff

}

【css图标制作教程制作云图标】相关文章:

通过css加载远程字体示例代码

CSS制作网页总结的一些经验

css 控制鼠标显示样式示例

css中em px 区别你真的了解吗

样式表CSS简明教程

css实现强制不换行/自动换行/强制换行

谈CSS的标准和最佳示例-Div+CSS教程

CSS教程:可扩展圆角标签

css教程:px和pt区别

css图片透明效果

精品推荐
分类导航