css水波动画效果
代码来源:http://www.jq22.com/code1526
HTML:
<div class="waves">
</div>
css:
html,
body {
width: 100%;
height: 100%;
} body {
background: #0A212E;
margin: 0px;
overflow: hidden;
} .waves {
position: relative;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
} .wave, .waves:before, .waves:after {
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
} .waves:before {
animation: wave-animate 3s infinite ease-out;
} .waves:after {
opacity:;
animation: wave-animate 3s 1.5s infinite ease-out;
} @keyframes wave-animate {
0% {
transform: scale(0);
opacity:;
transform-origin: center;
}
100% {
transform: scale(3);
opacity:;
transform-origin: center;
}
}
效果:
css水波动画效果的更多相关文章
- vue中使用第三方插件animate.css实现动画效果
vue中使用第三方插件animate.css实现动画效果1.首先先引入第三方类animated.css2.将你所需要动画的标签用包裹起来3.在transition元素中添加enter-active-c ...
- CSS--使用Animate.css制作动画效果
一 使用Animate.css动画 // 通过@import引入外部CSS资源; // 引入线上图片及JS文件; // 通过更改CSS类名生成不同类型的CSS3动画; <!DOCTYPE h ...
- 是谁,在敲打我窗-CSS雨滴动画效果
1.扯闲篇 是谁在敲打我窗 是谁在撩动琴弦 那一段被遗忘的时光 渐渐地回升出我心坎 是谁在敲打我窗 是谁在撩动琴弦 记忆中那欢乐的情景 慢慢地浮现在我的脑海 那缓缓飘落的小雨 不停地打在我 ...
- [CSS] Transitions动画效果(1)
Transitions动画效果(1) 源码 https://github.com/YouXianMing/CSS-Animations/tree/master/Transitions 效果 细节
- 今天学习css一些动画效果
<!doctype html><html lang="en"> <head> <meta charset="UTF-8" ...
- CSS 循环动画效果。
@-moz-keyframes revolving{ 0{ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } 25%{ ...
- 一个CSS+jQuery的放大缩小动画效果
日期: 2013年9月23日 作者:铁锚 // 今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. // 都是定死了的.因为需求就只有4个元素.如果是要用CSS的cla ...
- react中使用css动画效果
index.js import React, { Component, Fragment } from 'react'; class App extends Component { construct ...
- 制作动画效果:《CSS3 Animation》
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起 ...
随机推荐
- Windows Event 事件
事件对象就像一个开关:它只有两种状态(开和关). 开状态:我们称其为“有信号” 关状态:我们称其为“无信号” 可以在一个线程的执行函数中创建一个事件对象,然后观察它的状态,如果是“无信号”就让该线程睡 ...
- 3D Render
记录最近遇到的问题: 1:崩溃问题 由于高频率获取DC异常导致. void D3D11Texture2D::Copy2Window(void* srcdc, uint32_t left, uint32 ...
- Docker集群管理(二)—— docker+swarm+etcd+shipyard
引言 前一篇介绍如何简单的搭建一个可视化管理的docker集群,本篇将在此基础之上引入etcd发现服务. 目的 使用etcd发现服务解决swarm内置发现服务的不稳定问题.etcd采用raft算法,这 ...
- blktrace未公开选项网络保存截取数据
本文链接地址: blktrace未公开选项网络保存截取数据 我们透过blktrace来观察io行为的时候,第一件事情需要选择目标设备,以便分析该设备的io行为.具体使用可以参考我之前写的几篇:这里 这 ...
- css position小结
relative:可使top,right,bottom,left等相对于自身位置来进行偏移:若无则这些偏移都不会起作用 absolute:寻找离自己最近position为relative或absolu ...
- treap Python实现
# coding=utf-8 # treap(树堆)Python实现 import random def preorder_tree_walk(node): if node: print node.k ...
- xss总结漏洞篇
Xss漏洞 Xss漏洞出现在1996年.Xss漏洞又名跨站脚本漏洞 Xss可能造成的危害 网站弹框(刷流量) 网站挂马 会话劫持 Cookie被盗取 用户提权 账号被盗 尽量DDOS 蠕虫攻击 Xss ...
- yii 执行sql
sql $sql = "SELECT ".join(',', $this->search_fields_channel)." FROM {{chan ...
- DevExpress ImageComboBoxEdit增加
Combo_订单类型.Properties.Items.Clear() Select Case Combo_客户名称.EditValue Case "ABC" Combo_订单类型 ...
- [ilink32 Error] Fatal: Unable to open file 'RM_COMMON.OBJ'
[ilink32 Error] Fatal: Unable to open file 'RM_COMMON.OBJ' [ilink32 Error] Fatal: Unable to open fil ...