css3 水纹效果（仿写阿里云）
效果图
什么也不说了，上代码。
<!DOCTYPE html>
<html>
<head>
<title>css3 水纹效果</title>
<style type="text/css">
.point_area {
text-align: center;
position: relative;
width: 150px;
height: 150px;
transition: opacity .5s ease-out;
}
.point_area .point {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 10px;
height: 10px;
margin: auto;
-webkit-border-radius: 50%;
-webkit-background-clip: padding-box;
-moz-border-radius: 50%;
-moz-background-clip: padding;
border-radius: 50%;
background-clip: padding-box;
background: transparent;
}
.point_area .point_dot {
z-index: 1;
background-color: #ff903d;
border: 1px solid rgba(255,144,61,.37);
}
.point_area .point_10 {
width: 100%;
height: 100%;
}
.point_area .point_10:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 225ms infinite;
animation: ripple 4.5s ease-out 225ms infinite;
}
.point_area .point_40 {
width: 100%;
height: 100%;
}
.point_area .point_40:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out .9s infinite;
animation: ripple 4.5s ease-out .9s infinite;
}
.point_area .point_80 {
width: 100%;
height: 100%;
}
.point_area .point_80:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 50%;
border: 2px solid #ff903d;
opacity: 0;
-webkit-animation: ripple 4.5s ease-out 1.8s infinite;
animation: ripple 4.5s ease-out 1.8s infinite;
}
@-webkit-keyframes ripple{
0%{
opacity:0;-webkit-transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1)
}
}
@keyframes ripple{
0%{
opacity:0;
-webkit-transform:scale(.1);
transform:scale(.1)
}
5%{
opacity:1
}
to{
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
</style>
</head>
<body style="position: relative;">
<div class="point_area" style="top: 158px; left: 661px; position: absolute; width: 110px; height: 110px; visibility: visible; opacity: 1;">
<p class="point_name" style="position: absolute; top: 45px; left: 65px;">北京</p>
<a href="#" target="_blank" class="point point_dot"></a>
<div class="point point_10"></div>
<div class="point point_40"></div>
<div class="point point_shadow point_80"></div>
</div>
</body>
</html>css3 水纹效果（仿写阿里云）的更多相关文章
- 阿里云服务器云数据库免费体验（Java Web详细实例）
一.效果展示 博主部署了两个war包到阿里云服务器上,一个是没有连接数据库的,另外一个是连接了数据库的. (由于阿里云服务器免费使用15天,下面链接约2016年3月9日后无效) (1)无数据库版访问地 ...
- Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统
Python3.6+nginx+uwsgi部署Django程序到阿里云Ubuntu16.04系统 这个是写好的Django程序在本地机运行的情况,一个查询接口. 准备工作 1.首先购买一台阿里云的EC ...
- 阿里云POLARDB如何帮助百胜软件应对数据库的“巅峰时刻”
POLARDB是阿里云自研的下一代关系型云数据库,100%兼容MySQL,存储容量最高可达100TB,性能最高提升至MySQL的6倍,适用于企业多样化的数据库应用场景.POLARDB采用存储和计算分离 ...
- Linux下配置yum源为阿里云或网易的详解
一.yum源概述 yum需要一个yum库,也就是yum源.默认情况下,CentOS就有一个yum源.在/etc/yum.repos.d/目录下有一些默认的配置文件(可以将这些文件移到/opt下,或者直 ...
- 阿里云的重大战略调整，“被集成”成核心，发布SaaS加速器助力企业成长
摘要: 阿里云战略调整,“被集成”成为生态战略,讲讲即将“退居幕后”的阿里云. 阿里云近期调整动作巨大,阿里云新任总裁张剑锋(花名,行颠)上任后充分体现其创新和自我探索不断求“变”的阿里特性.期间,达 ...
- 阿里云SLB的健康检查配置
若阿里云SLB健康检查异常,则默认SLB无法访问到后端ECS,也就意味着通过SLB访问后端ECS上部署的服务会报502 gateway. 另一种办法是关闭健康检查(不推荐) 简要说明: SLB通过配置 ...
- jQuery仿阿里云购买选择购买时间长度
效果:http://hovertree.com/texiao/jquery/61/ jQuery仿阿里云购买服务器选择时间长度,操作简单,只需点击所要选的时间段 代码: <!doctype ht ...
- 仿写Windows7桌面和任务栏 HTML5+CSS3+Jquery实现
过去一段时间零零散散的自学了一点点jquery的相关用法,基本上属于用到哪个了,就去查然后就学一点,没有系统的学过,深入的用法也不是特别了解,毕竟javascript基础就比较薄弱.经过一段时间的零敲 ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
随机推荐
- pycharm设置用滑轮改变字体大小
在电脑第一次安装pycharm之后,发现每次调整代码界面的字体,总是需要到setting里面调整,这样非常不方便,特别是对于代码量很多的时候,我们有时候需要把目光聚焦到某一句代码,这个时候就需要放大, ...
- ES6入门之Proxy
1. 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种『元编程』即对编程语言进行编程. 1.1 理解 Proxy 是在目标对象之前架设一层『拦截』,外部对对象的访问 ...
- 黑马java课程视频java学习视频
资料获取方式,关注公总号RaoRao1994,查看往期精彩-所有文章,即可获取资源下载链接 更多资源获取,请关注公总号RaoRao1994
- SSD源码解读——损失函数的构建
之前,对SSD的论文进行了解读,可以回顾之前的博客:https://www.cnblogs.com/dengshunge/p/11665929.html. 为了加深对SSD的理解,因此对SSD的源码进 ...
- Linux硬件访问技术
在Linux系统中,无论是内核程序还是应用程序,都只能使用虚拟地址,而芯片手册中给出的硬件寄存器地址或者RAM地址则是物理地址,无法直接使用,因此,我们读写寄存器的第1步就是将将它的物理地址映射为虚拟 ...
- linux系统使用grep命令提取文件的基名或者路径名
效果等于~]#dirname /etc/sysconfig/network-scripts/ifcfg-ens33 echo "/etc/sysconfig/network-scripts/ ...
- Kruskal重构树+LCA || BZOJ 3732: Network
题面:https://www.lydsy.com/JudgeOnline/problem.php?id=3732 题解:Kruskal重构树板子 代码: #include<cstdio> ...
- 多线程-生产者消费者（BlockingQueue实现）
三.采用BlockingQueue实现 BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具. BlockingQueue有四个具体的实现类,根据不同需 ...
- A*算法实现（图形化表示）——C++描述
概要 A*算法是一种启发式寻路算法,BFS是一种盲目的无目标的搜索算法,相比于BFS,A*算法根据适应度构建优先队列,根据适应度值可以很好的向目标点移动,具体详情,请看搜索相关文档,我在只是实现了在无 ...
- 结束&新的开始。
我退役啦. 真的很抱歉,但我的学习周期还是太长了,没能在noi之前让自己变得足够强啊. FareWellOi.虽然很舍不得,但总要告别对吧. 相比竞赛的跳跃性钻研性学习,我的优势在于系统性学习.所以我 ...