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


Posted in HTML / CSS onJanuary 19, 2014

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

复制代码
代码如下:

<div class="logo">
<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
}

HTML / CSS 相关文章推荐
css3 响应式媒体查询的示例代码
Sep 25 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
10分钟理解CSS3 FlexBox弹性布局
Dec 20 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 #HTML / CSS
css3圆角样式分享自定义按钮样式
Dec 27 #HTML / CSS
两种CSS3伪类选择器详细介绍
Dec 24 #HTML / CSS
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 #HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 #HTML / CSS
css3高级选择器使用方法
Dec 02 #HTML / CSS
You might like
用PHP产生动态的影像图
2006/10/09 PHP
ThinkPHP之M方法实例详解
2014/06/20 PHP
ThinkPHP应用模式扩展详解
2014/07/16 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
PHP实现的多进程控制demo示例
2019/07/22 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
基于js disabled=&quot;false&quot;不起作用的解决办法
2013/06/26 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JavaScript中具名函数的多种调用方式总结
2014/11/08 Javascript
JavaScript数据结构和算法之图和图算法
2015/02/11 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
python批量导出导入MySQL用户的方法
2013/11/15 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
js实现移动端H5页面手指滑动刻度尺功能
2017/11/16 HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国存储和组织商店:The Container Store
2017/08/16 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
机修工工作职责
2014/02/21 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
感恩节活动策划方案
2014/05/16 职场文书
植树造林的宣传标语
2014/06/23 职场文书
个人投资合作协议书
2014/10/12 职场文书
只用50行Python代码爬取网络美女高清图片
2021/06/02 Python
OpenCV-Python实现轮廓拟合
2021/06/08 Python
SpringBoot系列之MongoDB Aggregations用法详解
2022/02/12 MongoDB
MySQL sql模式设置引起的问题
2022/05/15 MySQL