<span style="font-size:18px;"><!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>实现冲击波--数学知识很重要</title>

		<style>

			*{

				margin:0;

				padding:0;

				box-sizing:border-box;

			}

			html,body{

				font-family:"微软雅黑";

			}

			.wave{

				position:relative;

				float:left;

				width:50%;

				height:420px;

			}

			.wave a{

				position:absolute;

				top:50%;

				left:50%;

				display:inline-block;

				width:120px;

				height:50px;

				margin-left:-60px;

				margin-top:-25px;

				line-height:50px;

				text-align:center;

				border-radius:5px;

				color:red;

				font-size:16px;

				cursor:pointer;

				/*overflow:hidden;*/

			}

			#wave1{

				background-color:blue;

			}

			#wave1 a{

				background-color:pink;

			}

			#wave1 a:after{

			    content: "";

			    display: block;

			    position: absolute;

			    left: -40px;

			    top: -75px;

			    width: 200px;

			    height: 200px;

			    background: rgba(255,255,255,0.8);

			    border-radius: 50%;

			    opacity:0;

			    transition: all 1s;

			}

			#wave1 a:active:after{

				width: 0;

				height: 0;

				left:60px;

				top: 25px;

				opacity: 1;

				transition-duration: 0s;

			}

		</style>

	</head>

	<body>

		<div class="wave" id="wave1">

			<a>点我</a>

		</div>

	</body>

</html>

　　

CSS 冲击波(水波纹)效果的更多相关文章

  1. css实现水波纹效果

    1. HTML 代码: <div class="example"> <div class="dot"></div> < ...

  2. 44、css实现水波纹效果

    <div class="container"> <div class="wave"><span>50%</span&g ...

  3. css 滚动视差 之 水波纹效果

    核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...

  4. css 实现水波纹，波浪动画效果

    <div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...

  5. jquery ripples水波纹效果( 涟漪效果)

    这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...

  6. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  7. 兼容Android的水波纹效果

    Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...

  8. android自定义控件(4)-自定义水波纹效果

    一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...

  9. 自定义view实现水波纹效果

    水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...

随机推荐

  1. 循序渐进Python3（六） -- 初识内置变量、反射、递归

    #python用下划线作为变量前缀和后缀指定特殊变量.稍后我们会发现,   #对于程序来说,其中的有些变量是非常有用的,而其他的则是未知或者无用的.   #我们总结一下Python中下划线的特殊用法  ...

  2. 解决C# 转到定义时打开的是元数据文件而非源代码文件的问题

    原因:添加引用时 使用的是“浏览"选项卡,选择了项目生成的dll作为引用的内容. 解决:添加引用时 使用的是"项目"选项卡,选择了项目本身作为引用的内容.

  3. 附12 grafana配置文件

    一.配置文件位置 /usr/local/opt/grafana/share/grafana/default.ini /usr/local/etc/grafana/grafana.ini 二.init格 ...

  4. 根据IP获取省市 .

    public class IPAddress { /// <summary> /// 得到真实IP以及所在地详细信息(Porschev) /// </summary> /// ...

  5. Nginx-->进阶-->原理-->Nginx+php+fastcgi的原理与关系

    一.用户对动态PHP网页访问过程 用户浏览器发起对网页的访问:http://192.168.1.103/index.php 用户和nginx服务器进行三次握手进行TCP连接(忽略包括nginx访问控制 ...

  6. MFC下无法为空间添加变量解决

    许久不用MFC,今天在vs2008下用MFC写个小东西,结果在为控件添加变量的时候,居然无法成功——那个界面显示怪怪的,点击完成提示失败.    还好同事遇到过这个问题,给出链接http://hi.b ...

  7. 使用 BeanCopier 复制对象

    Cglib是一款比较底层的操作java字节码的框架. BeanCopier是一个工具类,可以用于Bean对象内容的复制. 复制Bean对象内容的方法有很多,比如自己手动get set ,或者使用Pro ...

  8. Java 读取Properties配置文件

    1.img_url.properties imgurl=http://10.1.19.65:8090 2.Test.java InputStream inputStream = this.getCla ...

  9. SQL分页查询结果不一致

    今天遇到了SQL分页查询结果不一致的情况,一看代码,原来是没加排序查询!!分页查询最好加排序,且以唯一性高的字段进行排序,如ID,时间等,以保持每页查询结果的准确! PS:又帮别人擦屁股!!

  10. 20145225《Java程序设计》 第4周学习总结

    20145225<Java程序设计> 第4周学习总结 教材学习内容总结 第六章 继承与多态 6.1继承 继承共同行为:存在着重复,可把相同的程序代码提升(pull up)为父类.exten ...