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 ...
随机推荐
- Appium+java移动端项目测试问题整理
一.每次打开APP都要重新安装.充值账号密码 解决:打开appium,设备,Use Browser ,勾选“No Reset” 二.一个页面包含相同文字,打开页面路径错误 问题描述:APP处于[ ...
- 使用Netty3或Netty4发布Http协议服务
现在是2018年1月11日18:12分,已经是下班时间了,小Alan今天给大家简单的介绍一下Netty,让大家以后在使用到Netty的时候能够有一定的了解和基础,这样深入学习Netty以及以后灵活应用 ...
- centos下运行python3.6+Django+mysql项目
文件准备: Django项目 myslq安装 关闭防火墙 用xshell拖拽到centos上 安装文件: 安装python3.6(3.7有问题) sh install_py36.sh 关闭防火墙 sh ...
- javascript animation lib greensock gsap介绍
一般前台做动画有以下几种方式: 1. 简单的css transition动画; 2. css animation动画 3. javascript库动画 一般来说css html5动画只适用于简单的形变 ...
- leetcode Ch3-DFS & Backtracking I
一.树的遍历 [非递归版] 1. 后序 class Solution { public: vector<int> postorderTraversal(TreeNode *root) { ...
- Django 代码初体验
其实Django中的代码逻辑就是和我们以前所学的一些项目差不多 就是 解耦.解耦.解耦 创建过后的Django文件 其中的day68是你的 项目的名字的相同的一个自动生成的文件里面都是放置配置文件类似 ...
- 【转】15个必须知道的chrome开发者技巧
一.快速切换文件 如果你使用过sublime text,那么你可能不习惯没有Go to anything这个功能的覆盖.你会很高兴听到chrome开发者功能也有这个功能,当DevTools被打开的时候 ...
- WINDOW各种命令
- 云端办公是 Office系统的未来方向么 ？
云端办公是 Office系统的未来方向么 ? 话说随着互联网,HTML技术,云计算等技术的发展,越来越多的应用已经迁移到云端, 以我们熟悉的电脑游戏为例,从单机游戏,到网络游戏,再到网页游戏,基本就是 ...
- [COGS 2066]七十和十七
2066. 七十和十七 ★★★ 输入文件:xvii.in 输出文件:xvii.out 简单对比时间限制:1 s 内存限制:256 MB [题目描述] 七十君最近爱上了排序算法,于是Ta ...