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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
时尚的CSS3进度条效果
Feb 22 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
Jan 18 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
CSS3中的弹性布局em运用入门详解 1em等于多少像素
Feb 08 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
基于Modernizr 让网站进行优雅降级的分析
Apr 21 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
html5 拖拽及用 js 实现拖拽功能的示例代码
Oct 23 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编码规范之注释和文件结构说明
2010/07/09 PHP
Yii调试SQL的常用方法
2014/07/09 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
JavaScript 浮点数运算 精度问题
2009/10/06 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
javascript操纵OGNL标签示例代码
2014/06/16 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JavaScript编程中的Promise使用大全
2015/07/28 Javascript
JSONP跨域请求
2017/03/02 Javascript
EasyUI在Panel上动态添加LinkButton按钮
2017/08/11 Javascript
Vue中父子组件通讯之todolist组件功能开发
2018/05/21 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
浅谈pandas筛选出表中满足另一个表所有条件的数据方法
2019/02/08 Python
python TF-IDF算法实现文本关键词提取
2019/05/29 Python
Python中的延迟绑定原理详解
2019/10/11 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
Django全局启用登陆验证login_required的方法
2020/06/02 Python
美国伊甸园兄弟种子公司:Eden Brothers
2018/07/01 全球购物
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
高级文秘工作总结的自我评价
2013/09/28 职场文书
房地产销售大学生自我评价分享
2013/11/11 职场文书
中介业务员岗位职责
2014/04/09 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android