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 ...
随机推荐
- 使用OmniGraffle创建流程图
Mac下使用OmniGraffle创建是一个不错的选择 可以保存为OG格式,可以导出为VXD格式供visio使用
- HTML后续
列表标签 <ul>.<ol>.<dl> 列表标签 无序列表 属性: type="属性值".属性值可以选: disc(实心原点,默认),squar ...
- 6、tornado
3反射(reflect) tornado是一款异步非阻塞高效的web框架 自定制session.form.auth,以及第三方ORM框架sqlachme
- Asp.net core 项目实战 新闻网站+后台 源码、设计原理 、视频教程
首先说明,视频教程.源码并非本人原创 本人将项目分割开,并写了一些说明. 该视频教程 地址 https://study.163.com/course/courseMain.htm?courseId= ...
- 超强PHP集成环境,支持800多个不同PHP版本同时运行,无限自定义添加mysql与php版本
转载自今日头条 小编最近发现PHPWAMP竟然又更新了,激动之余向大家介绍一下新版的强大功能. PHPWAMP是纯绿色集成环境,高版本php无需安装VC运行库,默认已经集成VC运行库!Nginx支持服 ...
- January 12 2017 Week 2 Thursday
Although it rains, throw not away your watering pot. 纵然天下雨,休把水壶丢. Don't throw away your watering pot ...
- Undirected Graphs
无向图 Introduction 图是由边连接的点的集合,有着广泛的应用空间. 一些图的术语,点,边,路径,环(圈),连通分量(子图). 简单路径不重复经过点,简单环不含有重复点和边,简单图不含自环和 ...
- Android SDK 墙内更新方法
1.访问地址:http://ping.chinaz.com/,在网站测速处输入g.cn执行查看分析,如下图所示 2.在分析列表中找到速度最快的IP复制进行设置SDK代理并设置端口为80,并勾选Forc ...
- Cookies的各方面知识(基础/高级)深度了解
Cookies想必所有人都了解本文将围绕Cookies基础知识(什么是Cookies/Cookies如何传递/Cookies如何存储/Cookies如何查看)Cookies高级知识/Cookie的限制 ...
- 4、Node.js REPL(交互式解释器)
Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux shell,我们可以在终端中输入命令,并 ...