css3动画效果
程序员文章站
2022-03-19 09:55:40
...
为了方便开发，笔者写了几个css3的动画效果，并用gulp压缩一下。直接在animation引用class即可，目前适配了IE8~10，火狐以及谷歌。链接：https://pan.baidu.com/s/1RCVmRmwAEiMv-DUbRsSokw 密码：j2si。
演示gif图
使用代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta charset="UTF-8">
<link rel="stylesheet" href="css/model.min.css" />
<title></title>
</head>
<style>
*{
color: #FFFFFF;
}
.t-box{
height: 78px;
width: 78px;
padding: 5px;
background: linear-gradient(to right bottom,#a1c3f9,#4a86e8);
border: 2px solid #3d7ce5;
border-radius: 10px;
float: left;
margin: 5px 10px;
box-sizing: border-box;
}
</style>
<body>
<div align="center">
<div class="model-main">
<div style="overflow: hidden;">
<div class="t-box" style="animation: 2s left ease;">左入</div>
<div class="t-box" style="animation: 2s left-transparent ease;">左入、透明</div>
<div class="t-box" style="animation: 2s left-transparent-bounce ease;">左入、透明、反弹</div>
<div class="t-box" style="animation: 2s right ease;">右入</div>
<div class="t-box" style="animation: 2s right-transparent ease;">右入、透明</div>
<div class="t-box" style="animation: 2s right-transparent-bounce ease;">右入、透明、反弹</div>
<div class="t-box" style="animation: 2s top ease;">上入</div>
<div class="t-box" style="animation: 2s top-transparent ease;">上入、透明</div>
<div class="t-box" style="animation: 2s top-transparent-bounce ease;">上入、透明、反弹</div>
<div class="t-box" style="animation: 2s bottom ease;">下入</div>
<div class="t-box" style="animation: 2s bottom-transparent ease;">下入、透明</div>
<div class="t-box" style="animation: 2s bottom-transparent-bounce ease;">下入、透明、反弹</div>
<div class="t-box" style="animation: 2s rotate-transparent-bounce ease;">旋转、透明、反弹</div>
<div class="t-box" style="animation: 2s rotate-transparent ease;">旋转、透明</div>
<div class="t-box" style="animation: 1.5s roll-always infinite linear">一直摆动</div>
<div class="t-box" style="animation: 2s roll-scale-always infinite linear">一直摆动、缩放</div>
<div class="t-box" style="animation: 2s roll-scale-half-always infinite linear">一直摆动、半缩放</div>
<div class="t-box" style="animation: 2s roll-scale-little-always infinite linear">一直摆动、小缩放</div>
<div class="t-box" style="animation: 2s roll-scale-two-always infinite linear">一直摆动、双缩放</div>
<div class="t-box" style="animation: 2s roll-scale-half-two-always infinite linear">一直摆动、双半缩放</div>
<div class="t-box" style="animation: 2s roll-scale-little-two-always infinite linear">一直摆动、双小缩放</div>
<div class="t-box" style="animation: 1s rotate infinite linear">一直旋转</div>
<div class="t-box" style="animation: 1s rotate-top-left infinite linear">一直左上角旋转</div>
<div class="t-box" style="animation: 2s rotate-scale ease">旋转</div>
<div class="t-box" style="animation: 2s scale ease">缩放</div>
<div class="t-box" style="animation: 2s scale-half ease">半缩放</div>
<div class="t-box" style="animation: 2s scale-little ease">小缩放</div>
<div class="t-box" style="animation: 2s scale-transparent ease">缩放、透明</div>
<div class="t-box" style="animation: 2s scale-transparent-half ease">半缩放、透明</div>
<div class="t-box" style="animation: 2s scale-transparent-little ease">小缩放、透明</div>
<div class="t-box" style="animation: 1s scale-always infinite linear">一直缩放</div>
<div class="t-box" style="animation: 1s scale-half-always infinite linear">一直半缩放</div>
<div class="t-box" style="animation: 1s scale-little-always infinite linear">一直小缩放</div>
<div class="t-box" style="animation: 2s rotate-transparent ease">旋转、透明</div>
<div class="t-box" style="animation: 2s rotate-transparent-bounce ease">旋转、透明、反弹</div>
<div class="t-box" style="animation: 2s rotate-scale ease">旋转、缩放</div>
<div class="t-box" style="animation: 2s rotate-scale-bounce ease">旋转、缩放、反弹</div>
<div class="t-box" style="animation: 2s rotate-transparent-scale ease">旋转、透明、缩放</div>
<div class="t-box" style="animation: 2s rotate-transparent-scale-bounce ease">旋转、透明、缩放、反弹</div>
<div class="t-box" style="animation: 2s transparent-all ease">全透明</div>
<div class="t-box" style="animation: 2s transparent-half ease">半透明</div>
<div class="t-box" style="animation: 2s transparent-little ease">小透明</div>
</div>
</div>
</div>
</body>
</html>
上一篇： css3动画效果
下一篇： 关于Linux中的文件夹存放位置的介绍