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 ...
随机推荐
- leetcode Ch4-Binary Tree & BFS & Divide/Conquer
一. 1. Lowest Common Ancestor class Solution { public: TreeNode *lowestCommonAncestor(TreeNode *root, ...
- SQLServer2008或SQLServer2008 R2没有智能提示解决方法
如果没有智能提示,需要安装SqlcompletefreeSQL Server智能提示
- ls 操作命令 -l/-R和rm -r dir 功能实现
ls -R #include <sys/stat.h> #include <dirent.h> #include <fcntl.h> #include <st ...
- [翻译] MagicPie
MagicPie Powerful pie layer for creating your own pie view. PieLayer provide great animation with si ...
- Factory模式 http://blog.csdn.net/tf576776047/article/details/6895545
Factory模式 http://blog.csdn.net/tf576776047/article/details/6895545 分类: 网站开发 2011-10-22 00:23 1056人 ...
- apt 安装 tomcat
apt 安装 tomcat 直接使用 agt-get 安装 apt-get install tomcat7 # or apt-get install tomcat8 需要一段时间后就安装完成了. 安装 ...
- 16.1 eclipse设置
内容:删除注释自动生成:添加自己使用的模板syso:设置字体:设置黑色主题 // 删除注释自动生成,强迫症表示很受不了那个什么自动生成方法注释,所以我把它关了 我之前的截图,删除那个todo的注释行 ...
- cgic程序的编写遇到的问题
cgic程序的编写 今天使用cgic库编写了一些cgi的代码,结果在编译的时候出了很多错误,在这里分享出来算是给自己做个笔记,虽然都是小问题但是急需解决的时候还是很麻烦的. 代码结构: login_c ...
- 排序算法Java版，以及各自的复杂度，以及由堆排序产生的top K问题
常用的排序算法包括: 冒泡排序:每次在无序队列里将相邻两个数依次进行比较,将小数调换到前面, 逐次比较,直至将最大的数移到最后.最将剩下的N-1个数继续比较,将次大数移至倒数第二.依此规律,直至比较结 ...
- FP又称为Monadic Programming
什么是Monad? trait Monad[+T] { def flatMap[U]( f : (T) => Monad[U] ) : Monad[U] def unit(value : B) ...