CSS3动画制作
2024-03-29 11:56:49
CSS3动画制作
- rotate 绕中心旋转
- fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
- fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
效果如下：
详细代码如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS3动画制作</title>
<style>
.container {
width: 200px;
margin: 0 auto;
} .redbox {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
} .bluebox {
width: 100px;
height: 100px;
background-color: red;
margin: 50px auto;
} .orangebox {
width: 100px;
height: 100px;
background-color: orange;
margin: 50px auto;
}
/*!
2015.03.21 Nelson Kuang
*/ .animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
} .animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
} /*
@creator: Nelson Kuang
@name: rotate 绕中心旋转
@usage: <div class="rotate infinite animated">Example</div>
*/
@-webkit-keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
} to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} @keyframes rotate {
from {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
} to {
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
} .animated.rotate {
-webkit-animation-name: rotate;
animation-name: rotate;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-duration: 4s;
animation-duration: 4s;
} /*
@creator: Nelson Kuang
@name: fadeInPendingFadeOutUp 先渐现，停留2s，再向上滑动并逐渐消失
@usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInPendingFadeOutUp">Example</div>
*/
@-webkit-keyframes fadeInPendingFadeOutUp {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 25% {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 75% {
/*pending*/
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} @keyframes fadeInPendingFadeOutUp {
0% {
opacity: 0;
} 25% {
opacity: 1;
} 75% {
/*pending*/
} 100% {
opacity: 0;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
}
} .animated.fadeInPendingFadeOutUp {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: fadeInPendingFadeOutUp;
animation-name: fadeInPendingFadeOutUp;
}
/*
@creator: Nelson Kuang
@name: fadeInUp2D 向上滑动并渐现， 因Animate.css的fadeInUp不支持iphone6 plus，自己用2d重写
@usage:可单独使用keyframes或者与Animate.css结合使用 如：<div class="animated infinite fadeInUp2D">Example</div>
*/
@-webkit-keyframes fadeInUp2D {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
} @keyframes fadeInUp2D {
from {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
} to {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
} .animated.fadeInUp2D {
-webkit-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-name: fadeInUp2D;
animation-name: fadeInUp2D;
}
</style>
</head>
<body>
<div class="container">
<div class="redbox infinite rotate"></div>
<div class="bluebox fadeInPendingFadeOutUp"></div>
<div class="orangebox fadeInUp2D"></div>
</div>
<script>
var objs = document.querySelectorAll(".container>div");
for (var k = 0, length = objs.length; k < length; k++) {
objs[k].onclick = function () {
var This = this; removeClass(This, 'animated'); setTimeout(function () { addClass(This, 'animated'); }, 100);
}
}
function hasClass(obj, cls) {
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj, cls) {
if (!hasClass(obj, cls)) {
obj.className = obj.className.replace(/(^\s*)|(\s*$)/g, "");
obj.className += " " + cls;
}
}
function removeClass(obj, cls) {
if (hasClass(obj, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg, ' ');
}
} </script>
</body>
</html>
最新文章
- POJ2175 Evacuation Plan
- 【Java EE 学习 54】【OA项目第一天】【SSH事务管理不能回滚问题解决】【struts2流程回顾】
- RPC 的概念模型与实现解析
- 树莓派2安装使用小米WIfi（360 小度 腾讯wifi）
- Java File类总结和FileUtils类
- jmeter做接口测试
- Computer Science Theory for the Information Age-6: 学习理论——VC定理的证明
- velocity基本用法
- js获取json数据
- iocfont 网页图标字体以及使用方法
- 【Android 系统开发】CyanogenMod 13.0 源码下载 编译 ROM 制作 ( 手机平台 : 小米4 | 编译平台 : Ubuntu 14.04 LTS 虚拟机)
- Java开源连接池c3p0的基本用法
- 已知有两个水杯，一个11L一个7L，水可以任意使用，求怎么得到2L 的详细解法
- ThreadLocal使用和原理简析
- 66.ajax--ajax请求多个url解决办法
- 网站图片的轮播JS代码
- 使用cmd导入导出oracle数据库dmp文件
- Git基础考试题
- 是否只查看安全传送的网页内容？ 去掉 IE弹出窗口
- [Openwrt 项目开发笔记]：MySQL配置（六）