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的Regions扩展
Aug 07 HTML / CSS
详解如何在css中引入自定义字体(font-face)
May 17 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
html5实现移动端适配完美写法
Nov 16 HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 HTML / CSS
Html5移动端适配IphoneX等机型的方法
Jun 25 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
CSS完成视差滚动效果
Apr 27 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 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
PHP的分页功能
2007/03/21 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
php socket实现的聊天室代码分享
2014/08/16 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
jQuery 可以拖动的div实现代码 脚本之家修正版
2009/06/26 Javascript
JavaScript的parseInt 取整使用
2011/05/09 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
JQuery实现网页右侧随动广告特效
2016/01/17 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
vue编写简单的购物车功能
2021/01/08 Vue.js
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
在Django的模型中执行原始SQL查询的方法
2015/07/21 Python
python使用opencv读取图片的实例
2017/08/17 Python
让你Python到很爽的加速递归函数的装饰器
2019/05/26 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
北京青年观后感
2015/06/15 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python