有趣的css3实战案例剖析——（水纹波动）
对于css3的学习，更多的是在于对新特性和基础理论的熟悉，
这篇文章通过一个案例带领大家了解css3里一些理论知识，也将一些技巧加以总结，从而提高大家的开发效率；
本次案例为（水纹波动），不用js写动画，只要善于运用css3就能实现水纹层层扩散的效果。
<<!DOCTYPE html>
<html>
<head>
<style>
.wave {
margin-left: auto; margin-right: auto;
width: 100px; height: 100px;
border-radius: 100px;
border: 2px solid #fff;
line-height: 100px;
background: #06c no-repeat center center;
background-size: %;
animation: wave 4s linear infinite;
}
@keyframes wave {
% { box-shadow: rgba(, , , ), rgba(, , , );
}
% { box-shadow: 20px rgba(, , , .), 10px rgba(, , , );
}
% { box-shadow: 40px rgba(, , , ), 20px rgba(, , , ); }
}
</style>
<title>水纹波动特效</title>
</head>
<body>
<div class="wave"></div>
</body>
</html>
- 主要重难点：
1. border-radius ( 给div元素添加圆角的边框 )
属性：可以设置四个角的“圆润”程度，四个值的顺序是：左上角，右上角，右下角，左下角。；
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
也可以简写 以左上，右上，右下，左下 为顺序，省略的 和它的对角相同；
2. animation （动画属性）
有六个属性，案例中按顺序简写。
案例中用到的属性：
animation-name：keyframename ；（规定需要绑定到选择器的 keyframe 的名称）
animation-duration: time; （规定动画播放时间）
animation-timing-function：linear；（动画从头到尾的速度是相同的）
animation-iteration-count: infinite;（规定动画应该无限次播放）
@keyframes （以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。 0% 是动画的开始时间，100% 动画的结束时间）
3. box-shadow （向框添加一个或多个阴影）
box-shadow: h-shadow v-shadow blur spread color inset;
（中间利用 “，” 制造两个阴影，再运用0% 50% 100%的动画使阴影扩散变大 颜色变浅，从而模仿水波扩散的效果）
有趣的css3实战案例剖析——（水纹波动）的更多相关文章
- 有趣的css3实战案例剖析—（背景动态渐变）
对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(背景颜色渐变),运用css ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- JavaScript实战实例剖析——（激励倒计时日历）
如今JavaScript在前端开发中的地位越来越高,掌握JavaScript的深度往往能决定你职业道路深远,这次通过制作 带着倒计时功能的激励日历的小实例,进一步细致的掌握JavaScript的语法与 ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- 使用zabbix server监控tomcat实战案例
使用zabbix server监控tomcat实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道,zabbix server效率高是使用C语言编写的,有很多应用程序 ...
- 3.awk数组详解及企业实战案例
awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...
- 发现两个有趣的CSS3效果
一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
随机推荐
- maven子项目导出成jar包及运行
第一步:选这idea右侧栏的maven projects 第二步:选中需要打包成jar包的项目下的lifecycle 第三步:选中package 第四步:点击开始导出 第五步:使用winRAR打开ja ...
- std::tuple
tuple,元组类型.头文件<tuple>,tuple是一个固定大小的不同类型(异质,heterogeneous)值的集合(这一点是tuple与其他常规STL容器的最大不同,即它可以同时存 ...
- python编程系列---白痴女朋友(我没有女朋友!)看了都能懂的TCP/IP协议介绍
前言 早期的计算机网络,都是由各厂商自己规定一套协议,IBM.Apple和Microsoft都有各自的网络协议,互不兼容:为了把全世界的所有不同类型的计算机都连接起来,就必须规定一套全球通用的协议,为 ...
- C加加学习之路 1——开始
C++是一门古老而复杂的语言,绝不是一门可以速成的语言,学习它需要有意识的刻意练习和长时间的持续不断的磨练.而大多数人不太能耐得住寂寞,喜欢速成,所以像<21天学通C++>这种书就比较受欢 ...
- Python 的多线程是鸡肋？
"唉,还没毕业就受到甲方的支配,等以后进了公司可咋整啊."小白嘴里这么吐槽,但心理上还是不敢怠慢,只能恋恋不舍地关掉眼前的游戏,打开了 Python 代码思考了起来. " ...
- os模块/sys模块/json/pickle模块/logging模块(day16整理)
目录 今日内容 os模块 对文件操作 对文件夹此操作 辅助性的 了解 sys模块 json和pickle模块 json模块 pickle模块 logging模块 日志级别 添加设置 自定义配置 今日内 ...
- Java基础（三十六）日期和时间
1.Date类 (1)无参数构造方法创建的对象可以获取本机当前时间 (2)有参数构造方法创建的对象表示举例计算机系统自身时间的距离为给定的参数 Date date = new Date(); // 当 ...
- Vue 实现前进刷新，后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
- Spring Boot 2.X(十五)：集成 Swagger2 开发 API 文档（在线+离线）
前言 相信很多后端开发在项目中都会碰到要写 api 文档,不管是给前端.移动端等提供更好的对接,还是以后为了以后交接方便,都会要求写 api 文档. 而手写 api 文档的话有诸多痛点: 文档更新的时 ...
- js 面试题解析（一）
1.call和apply的区别. 当需要传的参数是一个数组时,使用apply更加方便;而使用call时需要将数组展开,将数组中的每一项单独传入. 当需要传入的参数大于3个时,call的性能要略优于ap ...