css动画Demo---水波动画和边框动画
先上效果图：
水波动画：
边框动画：
1.水波动画
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水波动画</title>
<style>
.water{
width: 50px;
height: 50px;
position: relative;
}
.point{
position: absolute;
border-radius: 50%;
animation:border 2s linear infinite;
}
.point2{
-webkit-animation-delay:.5s;
}
.point3{
-webkit-animation-delay:1s;
}
.point4{
-webkit-animation-delay:1.5s;
} @keyframes border{
from {
width:0;
height:0;
top:50%;
left:50%;
background-color: rgba(235, 51, 36, 1);
}
to {
width:100%;
height:100%;
top:0;
left:0;
background-color: rgba(235, 51, 36, 0);
}
}
</style>
</head>
<body>
<div class="water">
<div class="point point1"></div>
<div class="point point2"></div>
<div class="point point3"></div>
<div class="point point4"></div>
</div>
</body>
</html>
2.边框动画:
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框动画</title>
<style>
.block{
width: 100px;
height: 50px;
position: relative;
background-color: #fcfcfc;
overflow: hidden;
}
.block:before{
content: '';
width: 0;
height: 0;
top: 0;
left: -1px;
display: block;
border-top: 1px solid red;
border-right: 1px solid red;
position: absolute;
z-index: 1;
}
.block:hover:before{
content: '';
width: 100%;
height: 100%;
border-radius: 5px;
animation: border .5s linear 1;
}
.block:after{
content: '';
width: 0;
height: 0;
bottom: 0;
right: -1px;
display: block;
position: absolute;
z-index: 1;
border-bottom: 1px solid red;
border-left: 1px solid red;
}
.block:hover:after{
content: '';
width: 100%;
height: 100%;
border-radius: 5px;
animation: border2 1s linear 1;
}
@keyframes border{
0%{
width: 0;
height: 0;
}
50%{
width: 100%;
height: 0;
}
100%{
width: 100%;
height: 100%;
} }
@keyframes border2{
0%{
width: 0;
height: 0;
}
50%{
width: 0;
height: 0;
}
75%{
width: 100%;
height: 0;
}
100%{
width: 100%;
height: 100%;
}
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>
css动画Demo---水波动画和边框动画的更多相关文章
- 巧用 CSS 实现炫彩三角边框动画
最近有个小伙伴问我,在某个网站看到一个使用 SVG 实现的炫彩三角边框动画,问能否使用 CSS 实现: 很有意思的一个动画效果,立马让我想起了我在 CSS 奇思妙想边框动画 一文中介绍的边框动画,非常 ...
- CSS 奇思妙想边框动画
今天逛博客网站 -- shoptalkshow,看到这样一个界面,非常有意思: 觉得它的风格很独特,尤其是其中一些边框. 嘿嘿,所以来一篇边框特辑,看看运用 CSS,可以在边框上整些什么花样. bor ...
- css实现边框动画效果
最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...
- 适应手机端的jQuery图片滑块动画DEMO演示
在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...
- 6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
- （转）利用 SVG 和 CSS3 实现有趣的边框动画
目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...
- 纯css实现Material Design中的水滴动画按钮
前言 大家平时应该经常见到这种特效,很炫酷不是吗 这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和css,其实在已有的项 ...
- css3 一个六边形 和 放大旋转动画DEMO演示
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...
- vue拼图动画Demo
这是一个基于vue的Demo,可以实现拼图动画,但是具体的没有写拼图成功的逻辑,鼠标悬停移动.周期刷新 我把它放到的我的博客园界面上了.刷新界面可以看到. 演示地址 :https://liruilon ...
随机推荐
- java 策略模式
<Head First 设计模式>学习中 设计原则 找出应用中可能需要变化之处,把它们独立出来,不要和那些不需要变化的代码混在一起 针对接口编程,而不是针对实现编程 多用组合少用继承 ...
- Anjular中的路由配置以及服务等模块的一些基本操作
1.路由的配置: 在Angular.js中,我们可以根据自己的需求来配置路由,以达到当url中的地址改变时,会跳转不同的页面 <script> //一开始的url:"http:/ ...
- androidcookie存储sqllite
/**声明一些数据库操作的常量*/ private static SQLiteDatabase mDatabase = null; private static final String DATA ...
- C#中Equals和= =(等于号)的比较(转)
一. 值类型的比较 对于值类型来说 两者比较的都是”内容”是否相同,即 值 是否一样,很显然此时两者是划等号的. 例: int i = 9; int j = 9; Console ...
- JDBC连接数据库反射实现O/R映射
测试preparedStatement public void testPreparedStatement(){ Connection connection=null; PreparedStateme ...
- asp.net的HTTP请求处理过程
1.asp.net的HTTP请求处理过程 说明: (1).客户端浏览器向服务器发出一个http请求,此请求会被inetinfo.exe进程截获,然后转交给aspnet_isapi.dll进程,接着它又 ...
- iOS真机命令（自动化测试）
获取设备的的UDID idevice_id --list # 显示当前所连接设备的 udid instruments -s devices # 列出所有设备,包括真机.模拟器.mac idevicei ...
- JS实现键盘监听(包括组合键)
依然使用案例驱动~案例是学习的最好实践! <html> <head> <meta http-equiv="Content-Type" co ...
- contOS 网络配置
设定VirtualBox虚拟网卡的IP地址(现在设定本地机器网卡IP 192.168.56.1 子网掩码255.255.255.0) 设置虚拟机中的网络设置 在虚拟机中选用host-only网络(注 ...
- Django视图（一）
Django视图(一) 一. 概述 作用:视图接受web请求,并相应请求 本质:视图是自定义的一个python中的函数 响应内容:正常视图,重定向视图,错误视图(404,500,400) 响应过程: ...