纯CSS3实现的蓝天白云效果
来源:互联网 发布:设计发型软件 编辑:程序博客网 时间:2024/04/28 00:40
纯CSS3实现的蓝天白云效果
今天我使用了CSS3新增的属性border-radius、linear-gradient、scale(缩放)和一些布局技巧实现了蓝天白云的效果。其HTML结构如下:
<div class="container"> <div class="blueSky"> <div class="cloud1"></div> <div class="cloud2"></div> <div class="cloud3"></div> <div class="cloud4"></div> <div class="cloud5"></div> </div> <div class="grassLand"></div></div>
实现蓝天的CSS样式:
.blueSky{ width: 100%; height: 240px; background-image: -webkit-linear-gradient(top,rgb(196,228,253),rgb(255,255,255)); position: relative;}
实现草原的CSS样式:
.grassLand{ width: 100%; height: 160px; background-image: -webkit-linear-gradient(top,rgb(255,255,255),rgb(148, 190, 89));}
实现云朵的CSS样式:
.cloud1{ width: 103px; height: 30px; background-color: #fff; border: 1px solid #fff; border-radius: 50%; position: absolute; left: 40%; top:10%;}.cloud1:after{ content: ""; height: 29px; width: 46px; background-color: #fff; border: 1px solid #fff; border-radius: 50%; display: block; position: absolute; top: -8px; left: 48px;}.cloud1:before{ content: ""; height: 36px; width: 46px; background-color: #fff; border: 1px solid #fff; border-radius: 50%; display: block; position: absolute; top: -5px; left: 13px;}
程序的运行结果如下:
怎么样?CSS3是不是很有趣啊,大家赶紧尝试一下吧。
阅读全文
1 0
- 纯CSS3实现的蓝天白云效果
- 蓝天白云
- 蓝天白云
- 纯CSS3实现的标签效果
- 讨论风采和蓝天白云的校园
- 蓝天和白云的故事
- 蓝天白云图
- 蓝天和白云
- 纯CSS3实现的表单输入高亮效果
- 纯CSS3实现的8种Loading动画效果
- 纯CSS3属性animation实现的打字效果
- 纯CSS3实现的一些酷炫效果
- 纯CSS3实现不错的表单验证效果
- 纯CSS3实现不错的表单验证效果
- 纯CSS3实现的书本翻页效果DEMO演示
- 纯CSS3实现彩色缎带效果
- 纯CSS3实现滑动开关效果
- 纯CSS3实现常见多种相册效果
- 1st 【基础题】子序列
- bash脚本基础(一)
- 深入理解PHP opcode优化
- Linux-ubuntu常用最基本命令
- nodejs基础知识
- 纯CSS3实现的蓝天白云效果
- UE4之AI攻击玩家(3)
- 外键为主键可以重复原因
- get post提交中文乱码
- mac/linux 安装tensorflow和安装Anaconda
- 重读网峰A8文档---之---底层驱动部分
- 二维数组中的查找
- 一、PCI配置空间简介
- svn 过滤指定提交者