css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时，发现“css3 动画”栏目首页放了一个翻滚的div动画案例，觉得挺好看的，于是就自己模仿着写了一下，感觉还行O(∩_∩)O哈哈~
下面放代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.box {
position: relative;
margin-top: 50px;
height: 60px;
}
.test {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 50px;
font:14px/50px Microsoft YaHei;
text-align: center;
color: #fff;
border-radius: 5px;
background-color: #eb5C7e;
-webkit-animation-name: gogogo;
-webkit-animation-duration: 6s;
-webkit-animation-timing-function:ease;
-webkit-animation-iteration-count: infinite;
animation-name: gogogo;
animation-duration: 6s;
animation-timing-function:ease;
animation-iteration-count: infinite;
}
@-webkit-keyframes gogogo
{
0% {
background-color: #eb5C7e;
-webkit-transform: rotate(0);
}
10% {
background-color: #eb5C7e;
-webkit-transform: rotate(0);
}
30%{
background-color: #1b9e55;
left: 0;
-webkit-transform: rotate(30deg);
}
50%{
left: 400px;
background-color: #2a7df8;
-webkit-transform: rotate(0);
}
70%{
left: 400px;
background-color: #2a7df8;
-webkit-transform: rotate(0);
}
100%{
left:0;
background-color: #eb5C7e;
-webkit-transform: rotate(-360deg);
}
}
@keyframes gogogo
{
0% {
background-color: #eb5C7e;
transform: rotate(0);
}
10% {
background-color: #eb5C7e;
transform: rotate(0);
}
30%{
background-color: #1b9e55;
left: 0;
transform: rotate(30deg);
}
50%{
left: 400px;
background-color: #2a7df8;
transform: rotate(0);
}
70%{
left: 400px;
background-color: #2a7df8;
transform: rotate(0);
}
100%{
left:0;
background-color: #eb5C7e;
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="test">
翻滚吧
</div>
</div>
</body>
</html>
然后，你可能看不到效果？少年，该升级浏览器啦~~~
css3动画第一式--简单翻滚的更多相关文章
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- css3动画的简单学习
transform常用的属性(2D变化): translate(x,y) 定义 2D 转换. scale(x,y) 定义 2D 缩放转换 rotate(angle) 定义 2D 旋转,在参数中规定角度 ...
- 原生JS实现随着鼠标滚动到元素位置触发对应css3动画，简单易用滚动监测
预览链接:http://www.vanwee.cn/%E6%BB%9A%E5%8A%A8%E7%9B%91%E5%90%AC/ <style> body{overflow-x: hidde ...
- 代码： CSS3动画，简单示例（鼠标移上去后，背景图片旋转）
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.mi ...
- css3动画简单应用
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript.CSS3动画的属性主要分为三类:transform.transition以及anim ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...
- css3动画简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Salesforce Apex 开发环境设置和Hello World示例
本文介绍了Salesforce Apex开发环境的设置以及一个简单的Hello World示例的实现过程. Salesforce开发环境 Salesforce通过http://developer.fo ...
- js form 表达关于onpress 的一个问题
<form id="search-form" method="get" action="/search"> <fields ...
- redis 学习笔记(6)-cluster集群搭建
上次写redis的学习笔记还是2014年,一转眼已经快2年过去了,在段时间里,redis最大的变化之一就是cluster功能的正式发布,以前要搞redis集群,得借助一致性hash来自己搞shardi ...
- Oracle 表和表数据恢复
1. 表恢复 对误删的表,只要没有使用 purge 永久删除选项,那么基本上是能从 flashback table 区恢复回来的. 数据表和其中的数据都是可以恢复回来的,记得 flashback ta ...
- 【MySQL】mysql分页调用
存储过程: CREATE DEFINER=`root`@`%` PROCEDURE `Proc_PageCondition`(p_cloumns varchar(500), p_tables varc ...
- python学习之路 第三天
1.set集合:去掉重复字段 set.difference()找出不同并创建一个新的集合,不改变原来集合: set.difference_update() 改变原来集合,剔除掉括号内容: set.di ...
- Redis设计与实现读书笔记（二） 链表
链表作为最基础的数据结构,在许多高级语言上已经有了很好的实现.由于redis采用C语言编写,需要自己实现链表,于是redis在adlist.h定义了链表类型.作者对于这部分没什么好说,源码比较简单,如 ...
- appium常用方法整理
1.相对坐标解锁九宫格 应用场景 QQ解锁屏幕如上,可见九个按键在同一个View下面,要实现解锁,用press moveTo release perform方法 实现代码如下: WebElem ...
- AngularJs的$http发送POST请求,php无法接收Post的数据解决方案
最近在使用AngularJs+Php开发中遇到php后台无法接收到来自AngularJs的数据,在网上也有许多解决方法,却都点到即止.多番摸索后记录下解决方法:tips:当前使用的AngularJ ...
- Shiro-HelloWord
HelloWorld Shiro的HelloWorld不是我们写的,而是看Shiro给我们提供的一段代码.通过这段代码可以看到Shiro大致的使用方式. 1.找到Shiro的jar包 目前的最新稳定版 ...