波纹动画

在此运用到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. PTA(Advanced Level)1042.Shuffling Machine

    Shuffling is a procedure used to randomize a deck of playing cards. Because standard shuffling techn ...

  2. Construct String from Binary Tree

    You need to construct a string consists of parenthesis and integers from a binary tree with the preo ...

  3. hdfs基本文件操作

    编程实现下列要求: 1.创建一个自己姓名首字母的文件夹 2.在文件夹下创建一个hdfstext1.txt文件,项文件内输入“班级学号姓名HDFS课堂测试”的文字内容: 3.在文件夹下在创建一个好的fs ...

  4. 关于前端JS判断字符串是否包含另外一个字符串的方法总结

    RegExp 对象方法 test() var str = "abcd"; var reg = RegExp(/d/); console.log(reg.test(str)); // ...

  5. 坦克大战--Java类型 ---- （2）按键设置和用户名的输入

    一.实现思路(emmmm,这个地方我很大程度参照了别人的写法)   由于键盘按键众多,因此使用选择框JComboBox 进行按键选择,点击一个JButton 按钮后,读取所有选择框中的内容,然后存到一 ...

  6. liunx 安装rsync

    新建一个rsync.s文件,把下面的代码写入文件里: #!/usr/bin/env bash mkdir -p /data/app/rsync/etc/ mkdir -p /data/logs/rsy ...

  7. createTextNode() 方法和createTextNode（）方法

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程 ...

  8. CentOS 7系统安装Jenkins

    一.jenkins 介绍 Jenkins是一个开源的.可扩展的持续集成.交付.部署(软件/代码> 的编译.打包.部署)基于web界面的平台. 简单说,就是各种项目的"自动化" ...

  9. [Next] 四.在next中引入redux

    添加 redux 写过 react 稍微复杂一些应用的话,应该都对 redux(mobx)有一定的了解.这次将 redux 引入到项目中 因为之前写项目的习惯,更喜欢使用 redux-thunk 改写 ...

  10. Appium Android 获取包名appPackage和appActivity的几种方法

    情况1: 安装包未安装到手机 准备前提条件: 1 Android SDK管理工具目录 2 PC端有apk包 使用方法: 1 打开终端,当前路径移动到sdk管理工具目录tools或build-tools ...