波纹动画

在此运用到css的动画属性，以及背景等相关属性。

值得一说的是下面代码中一直写到的这样一行代码：filter: alpha(opacity=0~100) ，这是考虑到浏览器兼容的问题。

IE使用私有属性filter:alpha(opacity)，Moz Family使用私有属性-moz-opacity，而标准的属性是opacity（CSS 3, Moz Family部分支持CSS3）。后面的数值是透明度，使用百分比或者小数（alpha(opacity)）使用大于0小于100的数值，其实也是百分比）。

 左上角的圆圈是个动图，点击就能链接到我的博客地址。

 代码如下图所示：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>css波纹动画</title>

        <style>

            body{

                background: #000;

            }

            .box{

                width: 100%;

                height: 600px;

                background: skyblue;

            }

            .vr {

                display: block;

                width: 71px;

                height: 71px;

                border-radius: 50%;

                position: absolute;

                left: 18px;

                top: 22px;

                background:#98FB98 url(../imges/new_img/vr.png) no-repeat left top;

                background-size: 100% 100%;

                z-index: 99;

            }

            .vr_wrap {

                background: #fff;

                opacity: 0.7;

                filter: alpha(opacity=70);

                width: 71px;

                height: 71px;

                border-radius: 50%;

                position: absolute;

                left: 18px;

                top: 22px;

                box-shadow: 0px 0px 50px 10px #fbfbfb;

                animation: mymove 2s infinite;

                /*animation-direction:alternate;*/

                border-radius: 50%;

            }

            .vr_wrap2 {

                background: #fff;

                opacity: 0.9;

                filter: alpha(opacity=90);

                border-radius: 50%;

                width: 71px;

                height: 71px;

                border-radius: 50%;

                position: absolute;

                left: 18px;

                top: 22px;

                box-shadow: 0px 0px 50px 10px #fbfbfb;

                animation: mymove1 2s infinite;

                /*animation-direction:alternate;*/

            }

            @keyframes mymove {

                0% {

                    box-shadow: 0px 0px 0px 2px #fff;

                    height: 71px;

                    width: 71px;

                }

                100% {

                    box-shadow: 0px 0px 0px 20px #fff;

                    height: 72px;

                    width: 72px;

                }

                100% {

                    opacity: 0;

                    filter: alpha(opacity=0);

                }

            }

            @keyframes mymove1 {

                0% {

                    box-shadow: 0px 0px 0px 2px #fff;

                    height: 71px;

                    width: 71px;

                }

                50% {

                    box-shadow: 0px 0px 0px 20px #fff;

                    height: 72px;

                    width: 72px;

                    opacity: 0;

                }

                100% {

                    opacity: 0;

                    filter: alpha(opacity=0);

                }

            }

        </style>

</head>

<body>

        <div class="box">

            <a class="vr" href="https://www.cnblogs.com/shihaiying/"></a>

            <div class="vr_wrap"></div>

            <div class="vr_wrap2"></div>

        </div>

</body>

</html>

效果图：

以上就是css波纹动画的代码和效果图。想要看具体的效果可以复制代码浏览，当然啦，也可以设置属于自己的漂亮的背景颜色和链接。

希望有所帮助！！！

CSS波纹动画的更多相关文章

  1. HTML5 Canvas水波纹动画特效

    HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比如这次介绍的水波纹动画特效.以前我们也分享过一款基于HTML5 WebGL的水波荡漾动画,让 ...

  2. 第四十二课：基于CSS的动画引擎

    由于低版本浏览器不支持css3 animation,因此我们需要根据浏览器来选择不同的动画引擎.如果浏览器支持css3 animation,那么就使用此动画引擎,如果不支持,就使用javascript ...

  3. Effeckt.css项目：CSS交互动画应用集锦

    目前,网上有大量基于CSS转换的实验和示例,但它们都过于分散,而Effeckt.css的目标就是把所有基于CSS/jQuery动画的应用集中起来,例如:弹窗.按钮.导航.列表.页面切换等等. Effe ...

  4. 基于animation.css实现动画旋转特效

    分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. vue中使用第三方插件animate.css实现动画效果

    vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...

  6. css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层，正常是 里外层 鼠标上来 外层有hover，如果就想到里层hover触发外层hover，要用外层position 定义绝对定位，内层的hover跳出外层的div，这样视觉上就是两个单独的div，进行内外层联动。

    css hover 动画 transition:background-color 0.2s,color 0.2s; 外层套内层,正常是 里外层 鼠标上来 外层有hover,如果就想到里层hover触发 ...

  7. CSS变形动画

    CSS变形动画 前言 在开始介绍CSS变形动画之前,可以先了解一下学习了它之后能做什么,有什么用,这样你看这篇文章可能会有一些动力. 学习了CSS变形动画后,你可以为你的页面做出很多炫酷的效果,如一个 ...

  8. CSS帧动画

    CSS帧动画 基础知识 通过定义一段动画中的关键点.关键状态来创建动画.@Keyframes相比transition对动画过程和细节有更强的控制. 过渡动画是两个状态间的变化,帧动画可以处理动画过程中 ...

  9. css心跳动画

    1.图片无限放大缩小,类似心跳 css如下 @keyframes scaleDraw { /*定义关键帧.scaleDrew关键帧名称*/ 0%{ transform: scale(1); /*开始为 ...

随机推荐

  1. sqlalchemy链接数据库

    from sqlalchemy import create_engine HOSTNAME = '127.0.0.1' PORT = 3306 DATABASE = 'first_sqlalchemy ...

  2. Lombok的使用与原理

        在面向对象编程中必不可少需要在代码中定义对象模型,而在基于Java的业务平台开发实践中尤其如此.相信大家在平时开发中也深有感触,本来是没有多少代码开发量的,但是因为定义的业务模型对象比较多,而 ...

  3. CSP 字符串匹配(201409-3)

    问题描述 给出一个字符串和多行文字,在这些文字中找到字符串出现的那些行.你的程序还需支持大小写敏感选项:当选项打开时,表示同一个字母的大写和小写看作不同的字符:当选项关闭时,表示同一个字母的大写和小写 ...

  4. JVM 线上故障排查基本操作 (转)

    前言 对于后端程序员,特别是 Java 程序员来讲,排查线上问题是不可避免的.各种 CPU 飚高,内存溢出,频繁 GC 等等,这些都是令人头疼的问题.楼主同样也遇到过这些问题,那么,遇到这些问题该如何 ...

  5. node工具之nodemon

    nodemon nodemon是一种工具,可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序. 安装 npm install -g nodemon //或 npm ...

  6. 北大 ACM highways问题研究（最小生成树）

    #include<stdlib.h> #include<stdio.h> #include<queue> struct vertex//代表一个村庄 { int m ...

  7. 设置Windows静态IP+动态IP

    静态IP 设置以太网属性 进入IPv4属性 设置IPv4 动态IP 同上方法,只不过选成了自动

  8. python-webdriver中添加cookie，解决添加了图片验证码的问题

    遇到问题:之前一直能用的脚本突然跑不通了,仔细一看原来是研发新加了图片验证码...... 解决问题: 手动抓取了cookie并塞进去,解决问题.当然如果你的cookie有效期太短或者是随着会话关闭就失 ...

  9. 本地安装Mysql后，navicat链接异常：Clinet dose not support authentication protocol request by server ; consider upgrading MySQL client

    第一步:首先通过cmd进入mysql 在命令窗口 输入:mysql -u root -p: 第二步:更改加密方式 mysql> ALTER USER 'root'@'localhost' IDE ...

  10. Linux 权限和目录更改、移除、更换目录、列出目录内容、使用通配符、移动、重命名

    12 chgrp :改变档案.目录所属群组          chgrp -R dirname/filename   chown :改变档案/目录拥有者              chown -R 账 ...