波纹动画

在此运用到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. PDF技术（四）-Java实现Html转PDF文件

    html转换为pdf的关键技术是如何处理网页中复杂的css样式.以及中文乱码处理. 各实现对比表于Windows平台进行测试: 基于IText 基于FlyingSaucer 基于WKHtmlToPdf ...

  2. Linux 常用服务器命令

    1.查看端口号是否被占用 netstat -lnp|grep 端口 或 lsof -i :端口 2查看进程对应的端口号 netstat -nap | grep 进程号

  3. [转帖]etcd 在超大规模数据场景下的性能优化

    etcd 在超大规模数据场景下的性能优化   阿里系统软件技术 2019-05-27 09:13:17 本文共5419个字,预计阅读需要14分钟. http://www.itpub.net/2019/ ...

  4. python并发编程-多线程实现服务端并发-GIL全局解释器锁-验证python多线程是否有用-死锁-递归锁-信号量-Event事件-线程结合队列-03

    目录 结合多线程实现服务端并发(不用socketserver模块) 服务端代码 客户端代码 CIL全局解释器锁****** 可能被问到的两个判断 与普通互斥锁的区别 验证python的多线程是否有用需 ...

  5. 关于ionic4导入android studio的注意事项

    最近看IT营的视频的时候,发现视频讲解的打包真是轻松的不得了,但是当自己导入打包的时候,你就会发现,没有最坑,只有更坑,按照教程来打包,估计你这辈子很难还原成功的,下面就来说一下关于 gradle与g ...

  6. 第一个简单的Echarts实例

    该示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --registr ...

  7. Docker 环境下部署 redash

    环境: centos7 官网:https://redash.io/help/open-source/dev-guide/docker 一.安装步骤 1.虚拟机安装 安装vmware,并安装centos ...

  8. 数据绘图工具之Matplotlib

    一.安装:绘图和可视化 pip install matplotlib 我们已经下好了anaconda 包含了绘图工具包 直接导入即可 import matplotlib.pyplotlib as pl ...

  9. python tkinter 基本使用

    这里只放表格和一个控件基本属性 grid(**options) 属性-- 下方表格详细列举了各个选项的具体含义和用法: 选项 含义column 1. 指定组件插入的列(0 表示第 1 列)2. 默认值 ...

  10. linux图形界面安装

    1.问题现象 1.1 startx命令不可用 [root@linuxtest2 ~]# startx 1.3 init 5无法执行完成 [root@linuxtest2 ~]#init 5 2.问题原 ...