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 相关文章推荐
纯CSS实现菜单、导航栏的3D翻转动画效果
Apr 23 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
使用纯 CSS 创作一个脉动 loader效果的源码
Sep 28 HTML / CSS
html5 拖拽上传图片实例演示
Apr 01 HTML / CSS
使用html5 canvas创建太空游戏的示例
May 08 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5标签嵌套规则详解【必看】
Apr 26 HTML / CSS
HTML5在线预览PDF的示例代码
Sep 14 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 HTML / CSS
css实现两栏布局,左侧固定宽,右侧自适应的多种方法
Aug 07 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
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP中文乱码解决方案
2015/03/05 PHP
分享php分页的功能模块
2015/06/16 PHP
php实现可逆加密的方法
2015/08/11 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
JavaScrpt判断一个数是否是质数的实例代码
2017/06/11 Javascript
JS获取填报扩展单元格控件的值的解决办法
2017/07/14 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
Vue.js devtool插件安装后无法使用的解决办法
2017/11/27 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
利用python Selenium实现自动登陆京东签到领金币功能
2019/10/31 Python
Python Opencv轮廓常用操作代码实例解析
2020/09/01 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
日本高岛屋百货购物网站:TAKASHIMAYA
2019/03/24 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
亲子阅读的活动方案
2014/08/15 职场文书
广告业务员岗位职责
2015/02/13 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书