CSS 冲击波(水波纹)效果
<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 冲击波(水波纹)效果的更多相关文章
- css实现水波纹效果
1. HTML 代码: <div class="example"> <div class="dot"></div> < ...
- 44、css实现水波纹效果
<div class="container"> <div class="wave"><span>50%</span&g ...
- css 滚动视差 之 水波纹效果
核心属性: background-attachment 这个属性就牛逼了, 它可以定义背景图片是相对视口固定, 还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成 高大上. 我们来看个例子: htm ...
- css 实现水波纹,波浪动画效果
<div class="wave"> 水波纹效果 <div class="wave1"></div> <div cla ...
- jquery ripples水波纹效果( 涟漪效果)
这个效果是我从bootstrap-material-design上面分离下来的,bootstrap-material-design的一些组件样式我不太不喜欢,但是非常喜欢这个水波纹效果,所以就有了这篇 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- 兼容Android的水波纹效果
Android的水波纹效果只有高版本才有,我们希望自己的应用在低版本用低版本的阴影,高版本用水波纹,这怎么做呢?其实,只要分drawable和drawablev21两个文件夹就好了. 普通情况下的se ...
- android自定义控件(4)-自定义水波纹效果
一.实现单击出现水波纹单圈效果: 照例来说,还是一个自定义控件,观察这个效果,发现应该需要重写onTouchEvent和onDraw方法,通过在onTouchEvent中获取触摸的坐标,然后以这个坐标 ...
- 自定义view实现水波纹效果
水波纹效果: 1.标准正余弦水波纹: 2.非标准圆形液柱水波纹: 虽说都是水波纹,但两者在实现上差异是比较大的,一个通过正余弦函数模拟水波纹效果,另外一个会运用到图像的混合模式(PorterDuffX ...
随机推荐
- 关于C#不同位数相与或,或赋值时,隐藏位数扩展该留意的问题
__int64 a; char b; a = b; a |= b; 如上情况,当b的最高位为1时,即b=0x80(或更大)时,b在扩展成64过程中会将最高位向高位扩展变成0xfffffffffffff ...
- jquery 找不到live方法解决
http://stackoverflow.com/questions/15573645/typeerror-live-is-not-a-function
- jvm中加载类的全过程
ClassLoader的作用:概括来说就是将编译后的class装载.加载到机器内存中,为了以后的程序的执行提供前提条件. jvm的整个生命周期,如下图所示 加载=>验证=>准备=>解 ...
- hadoop中master免登录slave
hadoop集群免登录配置 在主机master上执行如下: 1. $cd ~/.ssh(如果没有此目录,可以手动创建) 2. $ssh-keygen -t rsa ----------------- ...
- 解决 label 多行间距
使用. 一个是间距,一个是行高,但是鉴于多行,都写的话,就相当于双倍行高了.我就用行高代替间距. self.textLabel.attributedText = [self getAttributed ...
- PHP开发模式之代理技术
在实际开发中,我们经常要调用第三方的类库如SOAP服务等.使用这些第三方 组件并不难,最麻烦的莫过于调用了,一般的调试手段最方便的莫过于记日志了. 示例: 假如有以下第三方类库. // filenam ...
- c++垃圾回收代码练习 引用计数
学习实践垃圾回收的一个小代码 采用引用计数 每次多一个指针指向这个分配内存的地址时候 则引用计数加1 当计数为0 则释放内存 他的难点在于指针之间的复制 所有权交换 计数的变化 #include &l ...
- C# 字符串替换Replace
C# 中的石strA.Replace(strB,strC)函数可以实现将strA中的strB替换为strC. 但是容易出错的地方是,这并不是就直接替换好了,此函数的返回值才是替换好的字符串,所以还要要 ...
- C# 根据身份证号码获取简易信息
public class PackIden { /// <summary> /// 根据身份证获取生日 /// </summary> /// <param name=&q ...
- 冒泡排序优化JAVA
本文对传统的冒泡排序进行了一些优化,减少了循环次数. 时间复杂度 若文件的初始状态是正序的,一趟扫描即可完成排序.所需的关键字比较次数 C 和记录移动次数 M 均达到最小值: C(min)=n-1 , ...