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 ...
随机推荐
- LAMP和LNMP
编译安装和yum安装 centos 7 可以使用10年 ubuntu可以使用5年 VirtualBox也是一个虚拟机 下载centos 安装centos exit 退出登陆 ping www.ba ...
- 台式机装原版Win2008R2
台式机装原版Win2008R2 坑了老半天,总结出几点 1,系统os下载: http://msdn.itellyou.cn/ 注:其他地方下载的,装后发现不是起不来就是驱动装不了. 2,u盘里放个压缩 ...
- codevs 3110 二叉堆练习3
3110 二叉堆练习3 http://codevs.cn/problem/3110/ 题目描述 Description 给定N(N≤500,000)和N个整数(较有序),将其排序后输出. 输入描述 I ...
- 将 instance 连接到 flat_net - 每天5分钟玩转 OpenStack（88）
上一节我们创建了 "flat_net",本节将在此网络中部署 instance 并验证连通性. launch 新的 instance “cirros-vm1”,选择网络 falt_ ...
- 一个简单的ASP.NET MVC异常处理模块
一.前言 异常处理是每个系统必不可少的一个重要部分,它可以让我们的程序在发生错误时友好地提示.记录错误信息,更重要的是不破坏正常的数据和影响系统运行.异常处理应该是一个横切点,所谓横切点就是各个部分都 ...
- 用Tensorflow让神经网络自动创造音乐
#————————————————————————本文禁止转载,禁止用于各类讲座及ppt中,违者必究————————————————————————# 前几天看到一个有意思的分享,大意是讲如何用Ten ...
- Android 提醒公共方法 Notification
SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化 常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址 今天的目标是做一个公共的提醒方法 ...
- 【笔记】JS基础一
名词解释 ECMAScript 翻译器,解释器 DOM 文档对象模型 Document Object Model 例如 document BOM 浏览器对象模型 Browser Object Mode ...
- MySQL练习题
MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...
- Keepalived的安装
Keepalived的安装 官网下载:点击直达 yum install -y libnl yum install -y libnl-devel 下载 cd /usr/local/src/ wget h ...