对于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实战案例剖析——（水纹波动）的更多相关文章

  1. 有趣的css3实战案例剖析—（背景动态渐变）

    对于css3的学习,更多的是在于对新特性和基础理论的熟悉,这篇文章通过一个案例带领大家了解css3里一些理论知识,也将一些技巧加以总结,从而提高大家的开发效率: 本次案例为(背景颜色渐变),运用css ...

  2. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  3. JavaScript实战实例剖析——（激励倒计时日历）

    如今JavaScript在前端开发中的地位越来越高,掌握JavaScript的深度往往能决定你职业道路深远,这次通过制作 带着倒计时功能的激励日历的小实例,进一步细致的掌握JavaScript的语法与 ...

  4. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  6. 使用zabbix server监控tomcat实战案例

    使用zabbix server监控tomcat实战案例 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 大家都知道,zabbix server效率高是使用C语言编写的,有很多应用程序 ...

  7. 3.awk数组详解及企业实战案例

    awk数组详解及企业实战案例 3.打印数组: [root@nfs-server test]# awk 'BEGIN{array[1]="zhurui";array[2]=" ...

  8. 发现两个有趣的CSS3效果

    一.CSS3画机器猫 http://keleyi.com/keleyi/phtml/html5/3.htm 哆啦A梦效果图: 可用于浏览器对CSS3支持情况的测试 但最近有人对这个测试表示怀疑,指该测 ...

  9. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

随机推荐

  1. opencv::AKAZE检测与匹配

    AKAZE局部匹配 AKAZE局部匹配介绍 AOS 构造尺度空间 Hessian矩阵特征点检测 方向指定基于一阶微分图像 描述子生成 与SIFT.SUFR比较 更加稳定 非线性尺度空间 AKAZE速度 ...

  2. gperftools::TCMalloc

    VS2013编译gperftools-2.4 1)https://github.com/gperftools/gperftools  下载   gperftools-2.4.zip  版本.2)解压  ...

  3. 《Java并发编程实战》读书笔记-第1章 简介

    并发简史 在早期的计算机中不包含操作系统,从头至尾都只执行一个程序,并且这个程序能访问计算机所有资源.操作系统的出现使得计算机每次能运行多个程序,并且不同的程序都在单独的进程中运行:操作系统为各个独立 ...

  4. LeetCode初级算法--排序和搜索01：第一个错误的版本

    LeetCode初级算法--排序和搜索01:第一个错误的版本 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.cs ...

  5. pycharm中常见错误提示

    1.类中定义函方法 PyCharm 提示Method xxx may be 'static': 原因:该方法不涉及对该类属性的操作,编译器建议声明为@staticmethod

  6. liunux中的标准输出。以及常用的 2>dev/null 命令的含义

    了解Linux怎样处理输入和输出是非常重要的.一旦我们了解其原理以后,我们就可以正确熟练地使用脚本把内容输出到正确的位置.同样我们也可以更好地理解输入重定向和输出重定向. 首先我们来了解一下linux ...

  7. ESP8266开发之旅 进阶篇② 闲聊Arduino IDE For ESP8266烧录配置

    授人以鱼不如授人以渔,目的不是为了教会你具体项目开发,而是学会学习的能力.希望大家分享给你周边需要的朋友或者同学,说不定大神成长之路有博哥的奠基石... QQ技术互动交流群:ESP8266&3 ...

  8. 百万年薪python之路 -- 小数据池和代码块练习

    1.请用代码验证 "alex" 是否在字典的值中? info = {'name':'王刚蛋','hobby':'铁锤','age':'18',...100个键值对} info = ...

  9. 别说家庭组开不了，一定成功的方法|win7家庭组无法开启|win7如何共享打印机

    两台WIN7要开启家庭组并且共享打印机 这两台电脑必须打开以下服务:dnscache(任务管理器 简写).fdrespub(任务管理器 简写).(接下来下了都是服务里面的)SSDP Discovery ...

  10. 微软并发Key-Value存储库FASTER介绍

    微软支持并发的Key-Value 存储库有C++与C#两个版本.号称迄今为止最快的并发键值存储.下面是C#版本翻译: FASTER C#可在.NET Framework和.NET Core中运行,并且 ...