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 相关文章推荐
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
CSS3中几个新增加的盒模型属性使用教程
Mar 01 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 HTML / CSS
HTML速写之Emmet语法规则的实现
Apr 07 HTML / CSS
CSS3 制作的彩虹按钮样式
Apr 11 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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的Html模板标签使用方法
2012/11/13 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
PHP多个图片压缩成ZIP的方法
2020/08/18 PHP
PHP 面向对象程序设计之类属性与类常量实现方法分析
2020/04/13 PHP
js实现ASP分页函数 HTML分页函数
2006/09/22 Javascript
JS修改css样式style浅谈
2013/05/06 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
jQuery操作元素css样式的三种方法
2014/06/04 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
2016/08/09 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Bootstrap4如何定制自己的颜色和风格
2018/02/26 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
node.js通过url读取文件
2020/10/16 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
使用Python从有道词典网页获取单词翻译
2016/07/03 Python
Python坐标线性插值应用实现
2019/11/13 Python
python游戏开发的五个案例分享
2020/03/09 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
HTML5 transform三维立方体实现360无死角三维旋转效果
2014/08/22 HTML / CSS
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
初中军训感想300字
2014/03/05 职场文书
鉴定评语大全
2014/05/05 职场文书
购房个人委托书范本
2014/10/11 职场文书
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
MongoDB数据库之添删改查
2022/04/26 MongoDB