波纹动画

在此运用到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. AKKA文档2.1（java版）——什么是AKKA？

    可扩展的实时事务处理 我们相信编写并发.容错.可扩展的应用相当的困难.盖因大多数时候我们一直在使用错误的工具和错误的抽象等级.AKKA就是为了改变这一切的.我们利用角色模型提升了抽象等级,并且提供了一 ...

  2. pikachu-SQL注入

    参考网址: http://www.mamicode.com/info-detail-2795438.html

  3. VisualBasic文件与目录管理FileSystem 类

    注解 下表列出了涉及 My.Computer.FileSystem 对象的任务示例. 功能 查看 从文本文件读取 如何:读取文本文件 从带分隔符的文本文件中读取 如何:读取逗号分隔的文本文件 从固定宽 ...

  4. Array of Doubled Pairs

    Given an array of integers A with even length, return true if and only if it is possible to reorder ...

  5. mysql拆分逗号一列变多行

    需求: SELECT ), ) FROM TABLE a INNER JOIN mysql.help_topic b )

  6. sql实现同时向主表和子表插入数据方法

    使用sql语句实现同时向主表和子表插入数据方法: Oracle: -- oracle创建sequence create sequence SEQ_test minvalue 1 maxvalue 99 ...

  7. CF 1133B Preparation for International Women's Day

    题目链接:http://codeforces.com/problemset/problem/1133/B 题目分析 读完题目,凡是先暴力.....(不用想,第四组数据就TLE了,QAQ) 当两个数的和 ...

  8. python线程中的同步问题

    多线程开发可能遇到的问题 假设两个线程t1和t2都要对num=0进行增1运算,t1和t2都各对num修改1000000次,num的最终的结果应该为2000000.但是由于是多线程访问,有可能出现下面情 ...

  9. Jconsole与Jmx 分析JVM状况（上） 转

    出处:Jconsole与Jmx 分析JVM状况(上) JVM 平台提供 Mbeans 说明 在 Java 2 平台 5.0 以上版本,有一组 API 可以让 Java 应用程序和允许的工具监视和管理  ...

  10. React应该如何优雅的绑定事件？

    前言 由于JS的灵活性,我们在React中其实有很多种绑定事件的方式,然而,其实有许多我们常见的事件绑定,其实并不是高效的.所以本文想给大家介绍一下React绑定事件的正确姿势. 常见两种种错误绑定事 ...