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 ...
随机推荐
- apple 下安装mysql 以及 碰到的问题
直接说过程: 1.从mysql 官网下载 mysql 5.7最新版:有 两种 一种是 dmg 的傻瓜包,一种是tar.gz的压缩包.我下载的是tar.gz的压缩包. 2.下载成功后,先试用命令sudo ...
- winform基础控件总结
转自:http://www.cnblogs.com/top5/archive/2010/04/29/1724039.html 基础 - 常用控件 C# WinForm开发系列 - CheckBox/B ...
- GOOGLE高级搜索技巧
前记: 我是完整的看完了.内容有点乱啊,自己没有时间整理,先放在自己的印象笔记里了.... 二,GOOGLE特色 GOOGLE支持多达132种语言,包括简体中文和繁体中文: GOOGLE网站只提 ...
- LED相关
P10 模组 分辨率32*16 尺寸320*160 间距 10mm P8 模组 分辨率32*16 尺寸256*128 间距 8mm P7.62 模组 分辨率 ...
- 【Leetcode】【hard】Binary Tree Postorder Traversal
Given a binary tree, return the postorder traversal of its nodes' values. For example:Given binary t ...
- centos 安装php扩展的两种方法
版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[+] 查看PHP版本: php -v 1 1 查看指定PHP版本: /usr/local/php/bin/php -v 1 1 ...
- Linux下打包压缩war、解压war包和jar命令
情景:把project_a文件夹下的文件打包成project.war 1. 打包 jar -cvf project.war /project_a 说明: -c 创建war包 -v 显示过程信息 -f ...
- iOS开发之iOS界面UI
1.UILabel NSString *str = @"字符串大小"; UIFont *font = [UIFont fontWithName:@"Arial" ...
- Wannafly挑战赛18 E 极差（线段树、单调栈）
Wannafly挑战赛18 E 极差 题意 给出三个长度为n的正整数序列,一个区间[L,R]的价值定义为:三个序列中,这个区间的极差(最大值与最小值之差)的乘积. 求所有区间的价值之和.答案对\(2^ ...
- metasploit渗透测试笔记(内网渗透篇)
x01 reverse the shell File 通常做法是使用msfpayload生成一个backdoor.exe然后上传到目标机器执行.本地监听即可获得meterpreter shell. r ...