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 ...
随机推荐
- Spring启动后扫描解析注解的过程
对应的类: ComponentScanBeanDefinitionParser.parse() ClassPathBeanDefinitionScanner.doScan() 参考 http://bl ...
- [LeetCode] Logger Rate Limiter 记录速率限制器
Design a logger system that receive stream of messages along with its timestamps, each message shoul ...
- 格式化 float 类型,保留小数点后1位
""" 练习 : 小明的成绩从去年的72分提升到了今年的85分,请计算小明成绩提升的百分点, 并用字符串格式化显示出'xx.x%',只保留小数点后1位: &qu ...
- 第一次源码分析: 图片加载框架Picasso源码分析
使用: Picasso.with(this) .load("http://imgstore.cdn.sogou.com/app/a/100540002/467502.jpg") . ...
- ISO
- 贝塔阶段html及pdf模块测试
这次虽然工作内容是将c#的html及pdf处理程序移植到java中,但是由于重新编写代码使得先前的工作成果得不到利用,于是将其编写为dll,再在java端调用. 这使得在java端即便每个分支都到达, ...
- sublime 插件推荐： Nettuts+ Fetch
Nettuts+ Fetch github地址:Nettuts-Fetch 在sublime中直接用 ctrl+shift+P -> pci -> Nettuts-Fetch 即可下载 这 ...
- 常用js归纳
一.获取地址栏参数 /*根据name获取URL参数*/ function getQueryString(name) { var reg = new RegExp("(^|&)&quo ...
- linux安装adb
本文只针对centOS6.8,其他版本未测试 1.下载adb包 下载android sdk for linux(http://tools.android-studio.org/index.php/sd ...
- 在非UI线程中自制Dispatcher
在C#中,Task.Run当然是一个很好的启动新并行任务的机制,但是因为使用这个方法时,每次新的任务都会在一个新的线程中(其实就是线程池中的线程)运行 这样会造成某些情形下现场调度的相对困难,即使我隔 ...