html5 css3蓝天白云,Css3画蓝天白云
云的画法:一个圆形和两个长方形
蓝天白云.png
蓝天白云
/*清除元素默认边距*/
* {
margin: 0;
padding: 0;
}
/*蓝天草地全屏显示,二者高度比为6:4*/
.world {
position: relative;
width: 100vw;
height: 100vh;
background: -webkit-gradient(linear, 0 0, 0 100%, from(rgb(196, 228, 253)), color-stop(0.6, rgb(255, 255, 255)), to(rgb(148, 190, 89)));
background: -webkit-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
background: -moz-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
background: -o-linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
background: linear-gradient(rgb(196, 228, 253), rgb(255, 255, 255) 60%, rgb(148, 190, 89));
}
/*利用边框绘制云彩,一个圆形,两个长方形*/
.cloud,
.cloud::before,
.cloud::after {
position: absolute;
width: 0;
height: 0;
border-radius: 100px;
box-shadow: 0px 0px 2px 2px #fff;
}
.cloud {
border: 50px solid #fff;
}
.cloud::before {
content: "";
border: 30px solid #fff;
padding-left: 20px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: -12px;
left: -90px;
}
.cloud::after {
content: "";
border: 24px solid #fff;
padding-left: 110px;
top: -4px;
left: -96px;
}
/*设置云彩大小,在天空中的位置,观察原图有三朵云大小基本一样,取奇数减少代码量*/
.cloud:nth-child(odd) {
-webkit-transform: scale(.7);
-moz-transform: scale(.7);
-ms-transform: scale(.7);
-o-transform: scale(.7);
transform: scale(.7);
}
.cloud:nth-child(1) {
top: 1vh;
left: 40vw;
}
.cloud:nth-child(3) {
top: 20vh;
left: 45vw;
}
.cloud:nth-child(2) {
top: 10vh;
left: 55vw;
}
.cloud:nth-child(4) {
top: 15vh;
left: 65vw;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5);
}
.cloud:nth-child(5) {
top: 3vh;
left: 75vw;
}
html5 css3蓝天白云,Css3画蓝天白云相关推荐
- html烟花特效案例,HTML5前端特效库 css3 按钮粒子烟花特效源码
HTML5前端特效库 css3 按钮粒子烟花特效源码 效果图 各位长友大家上午好! 今天给大家带来的是 css3 按钮粒子烟花特效源码! 大家可以按照自己的意愿进行修改! 有想要文件版源码的可以 在我 ...
- html5 实现波浪效果图,css3实现波纹特效、H5实现动态波浪效果
css3实现动态波纹特效,由于css3里面有过渡和动画效果,现在利用css3实现动态波浪效果就很简单了,直接使用transform来实现就ok, 使得translateX 产生偏移就可以不断实现循环动 ...
- html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
- 【前端】【html5/css3】前端学习之路(二)(CSS3新选择器/CSS3盒模型/CSS3过渡效果)
一.CSS3新增选择器 1.结构(位置)伪类选择器 :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nt ...
- HTML5新增标签及CSS3新增属性
一.h5新增标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为vid ...
- 【CSS3教程】CSS3基础常用技巧实例集合
为什么80%的码农都做不了架构师?>>> CSS3常用技巧 CSS3下条纹&方格斜纹背景的实现 一.效果抢先:CSS3下的条纹背景demo 这些美丽的纹饰全部都是由CS ...
- html渐变色CSS3 渐变,如何实现css3渐变色,css3渐变色怎么写
原标题:如何实现css3渐变色,css3渐变色怎么写 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果.但是,通过使用 CSS ...
- css3-1 css3游戏介绍、css3样式和优先级
css3-1 css3游戏介绍.css3样式和优先级 一.总结 一句话总结:我们写外部css表的时候可以用class,那样使用的人用id修改的话优先级就比我们高,达到目的. 1.html嵌套css样式 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
最新文章
- Atitit r2017 r6 doc list on home ntpc.docx
- 微软这次发布会巨硬:安卓折叠手机、双屏电脑,还有无线耳机和超薄平板
- C语言经典例96-计算字符串中子串出现的次数
- “下沉市场”+“内容生态”,OTA的两道救命题?
- 使用dwz框架配合MVC使用
- Windows环境下Code::Blocks中成功配置MySQL Connector/C连接MySQL数据库
- Sharepoint 2010新体验之一-----基于Claims的全新验证机制
- Django Model设计详解
- cam350 不能打开光绘文件_CAM350使用教程-复制Gerber层
- PAT甲级1001 字符串处理
- WinForm中ComBoBox绑定显示值和实际值
- 计算机故障语言 英语怎么说,故障英语怎么说
- win10联想Y7000重启蓝牙消失报显卡错误代码43
- 15亿美元买个“便宜货”
- 自动控制原理:如何用折线式伯德图计算截止频率?
- 详细SpringBoot教程之入门(一)
- 怎样去除掉心灵的杂草
- c语言 运算符的作用,C语言运算符
- mongodb4.0学习总结二(read concern)
- 谷粒学院(十五)JWT | 阿里云短信服务 | 登录与注册前后端实现
热门文章
- 梦幻诛仙linux系统游戏,梦幻诛仙我最懂,助你畅玩“诛仙奇缘”!
- indesign 显示黑屏_关于Indesign软件无法正常打开的问题.
- 全新第九代智能英特尔(R)酷睿(TM) i9-9900K处理器发布
- 2022中国物流产业大会暨企业家高峰论坛在杭州举办!
- 神武跑环遇到服务器维护,神武跑环不再痛苦:任务链重点难点详解攻略
- 【Python】听说有个水仙花 python判断水仙花数
- Wolfram System Modeler:机枪后坐力可以把松鼠射多远——不可能飞行的真实物理学
- C++带参数宏解惑教程
- 特网科技:CN2 GIA,CN2 GT,CTG,163直连
- 神经网络模型训练简记(一)