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将文字描边及填充文字颜色的方法
Mar 07 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
html5利用canvas绘画二级树形结构图的示例
Sep 27 HTML / CSS
前端canvas水印快速制作(附完整代码)
Sep 19 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
html2 canvas生成清晰的图片实现打印功能
Sep 23 HTML / CSS
css3中transform属性实现的4种功能
Aug 07 HTML / CSS
css布局巧妙技巧之css三角示例的运用
Mar 16 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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+javascript制作带提示的验证码源码分享
2014/05/28 PHP
百度实时推送api接口应用示例
2014/10/21 PHP
[原创]php常用字符串输出方法分析(echo,print,printf及sprintf)
2016/07/09 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
JavaScript prototype属性使用说明
2010/05/13 Javascript
js charAt的使用示例
2014/02/18 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
JavaScript 闭包机制详解及实例代码
2016/10/10 Javascript
原生js和css实现图片轮播效果
2017/02/07 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
2019/06/11 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
如何在vue中使用kindeditor富文本编辑器
2020/12/19 Vue.js
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
python基础教程项目三之万能的XML
2018/04/02 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Django 简单实现分页与搜索功能的示例代码
2019/11/07 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
.net C#面试题
2012/08/28 面试题
Exception类的常用方法
2012/06/16 面试题
餐厅经理岗位职责范本
2014/02/17 职场文书
行政管理专业求职信
2014/07/06 职场文书
考试作弊检讨书范文
2015/01/27 职场文书
总结Python连接CS2000的详细步骤
2021/06/23 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers