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中Transform动画属性用法详解
Jul 04 HTML / CSS
利用CSS3的定位页面元素
Aug 29 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
用CSS3的box-reflect来制作倒影效果
Nov 15 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
HTML中的表格元素介绍
Feb 28 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 strnatcmp()函数的用法总结
2013/11/27 PHP
单台服务器的PHP进程之间实现共享内存的方法
2014/06/13 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
二行代码解决全部网页木马
2008/03/28 Javascript
JS保存和删除cookie操作 判断cookie是否存在
2013/11/13 Javascript
js实现网页标题栏闪烁提示效果实例分析
2014/11/20 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
学习掌握JavaScript中this的使用技巧
2016/08/29 Javascript
jQuery实现磁力图片跟随效果完整示例
2016/09/16 Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
2016/11/23 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
2016/12/14 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
vue绑定class与行间样式style详解
2017/08/16 Javascript
BootStrap点击保存后实现模态框自动关闭的思路(模态框)
2017/09/26 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
浅谈React之状态(State)
2018/09/19 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
Vue从TodoList中学父子组件通信
2019/02/05 Javascript
详解vue组件中使用路由方法
2019/02/12 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
python fabric使用笔记
2015/05/09 Python
编写Python CGI脚本的教程
2015/06/29 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
浅谈Python中的异常和JSON读写数据的实现
2020/02/27 Python
Python命名空间及作用域原理实例解析
2020/08/12 Python
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
植树节新闻稿
2015/07/17 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python