先上效果图：

　　水波动画：

　　

　　边框动画：

1.水波动画

　　实现代码

　　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>水波动画</title>

     <style>

         .water{

             width: 50px;

             height: 50px;

             position: relative;

         }

         .point{

             position: absolute;

             border-radius: 50%;

             animation:border 2s linear infinite;

         }

         .point2{

             -webkit-animation-delay:.5s;

         }

         .point3{

             -webkit-animation-delay:1s;

         }

         .point4{

             -webkit-animation-delay:1.5s;

         }

         @keyframes border{

             from {

                 width:0;

                 height:0;

                 top:50%;

                 left:50%;

                 background-color: rgba(235, 51, 36, 1);

             }

             to {

                 width:100%;

                 height:100%;

                 top:0;

                 left:0;

                 background-color: rgba(235, 51, 36, 0);

             }

         }

     </style>

 </head>

 <body>

     <div class="water">

         <div class="point point1"></div>

         <div class="point point2"></div>

         <div class="point point3"></div>

         <div class="point point4"></div>

     </div>

 </body>

 </html>

2.边框动画:

　　实现代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>边框动画</title>

     <style>

         .block{

             width: 100px;

             height: 50px;

             position: relative;

             background-color: #fcfcfc;

             overflow: hidden;

         }

         .block:before{

             content: '';

             width: 0;

             height: 0;

             top: 0;

             left: -1px;

             display: block;

             border-top: 1px solid red;

             border-right: 1px solid red;

             position: absolute;

             z-index: 1;

         }

         .block:hover:before{

             content: '';

             width: 100%;

             height: 100%;

             border-radius: 5px;

             animation: border .5s linear 1;

         }

         .block:after{

             content: '';

             width: 0;

             height: 0;

             bottom: 0;

             right: -1px;

             display: block;

             position: absolute;

             z-index: 1;

             border-bottom: 1px solid red;

             border-left: 1px solid red;

         }

         .block:hover:after{

             content: '';

             width: 100%;

             height: 100%;

             border-radius: 5px;

             animation: border2 1s linear 1;

         }

         @keyframes border{

             0%{

                 width: 0;

                 height: 0;

             }

             50%{

                 width: 100%;

                 height: 0;

             }

             100%{

                 width: 100%;

                 height: 100%;

             }

         }

         @keyframes border2{

             0%{

                 width: 0;

                 height: 0;

             }

             50%{

                 width: 0;

                 height: 0;

             }

             75%{

                 width: 100%;

                 height: 0;

             }

             100%{

                 width: 100%;

                 height: 100%;

             }

         }

     </style>

 </head>

 <body>

     <div class="block"></div>

 </body>

 </html>

css动画Demo---水波动画和边框动画的更多相关文章

  1. 巧用 CSS 实现炫彩三角边框动画

    最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常 ...

  2. CSS 奇思妙想边框动画

    今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...

  3. css实现边框动画效果

    最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...

  4. 适应手机端的jQuery图片滑块动画DEMO演示

    在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. （转）利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  7. 纯css实现Material Design中的水滴动画按钮

    前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...

  8. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  9. vue拼图动画Demo

    这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动.周期刷新 我把它放到的我的博客园界面上了.刷新界面可以看到. 演示地址 :https://liruilon ...

随机推荐

  1. 使用OmniGraffle创建流程图

    Mac下使用OmniGraffle创建是一个不错的选择 可以保存为OG格式,可以导出为VXD格式供visio使用

  2. HTML后续

    列表标签 <ul>.<ol>.<dl> 列表标签 无序列表 属性: type="属性值".属性值可以选: disc(实心原点,默认),squar ...

  3. 6、tornado

    3反射(reflect) tornado是一款异步非阻塞高效的web框架 自定制session.form.auth,以及第三方ORM框架sqlachme

  4. Asp.net core 项目实战 新闻网站+后台 源码、设计原理 、视频教程

    首先说明,视频教程.源码并非本人原创 本人将项目分割开,并写了一些说明. 该视频教程 地址  https://study.163.com/course/courseMain.htm?courseId= ...

  5. 超强PHP集成环境，支持800多个不同PHP版本同时运行，无限自定义添加mysql与php版本

    转载自今日头条 小编最近发现PHPWAMP竟然又更新了,激动之余向大家介绍一下新版的强大功能. PHPWAMP是纯绿色集成环境,高版本php无需安装VC运行库,默认已经集成VC运行库!Nginx支持服 ...

  6. January 12 2017 Week 2 Thursday

    Although it rains, throw not away your watering pot. 纵然天下雨,休把水壶丢. Don't throw away your watering pot ...

  7. Undirected Graphs

    无向图 Introduction 图是由边连接的点的集合,有着广泛的应用空间. 一些图的术语,点,边,路径,环(圈),连通分量(子图). 简单路径不重复经过点,简单环不含有重复点和边,简单图不含自环和 ...

  8. Android SDK 墙内更新方法

    1.访问地址:http://ping.chinaz.com/,在网站测速处输入g.cn执行查看分析,如下图所示 2.在分析列表中找到速度最快的IP复制进行设置SDK代理并设置端口为80,并勾选Forc ...

  9. Cookies的各方面知识(基础/高级)深度了解

    Cookies想必所有人都了解本文将围绕Cookies基础知识(什么是Cookies/Cookies如何传递/Cookies如何存储/Cookies如何查看)Cookies高级知识/Cookie的限制 ...

  10. 4、Node.js REPL(交互式解释器)

    Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并 ...