css3 实现动画
CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画
使用css3关键帧动画可以轻松实现
请看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键帧动画</title>
</head>
<style type="text/css"> @keyframes move {
10%{
transform: translate(50px,50px)
}
30%{
transform: translate(150px,150px) scale(1.5);
}
50%{
transform: translate(250px,150px) scale(1);
}
70%{
transform: translate(350px,250px) scale(2);
}
100%{
transform: translate(0px,0px) scale(1);
}
} @-webkit-keyframes move {
10%{
-webkit-transform: translate(50px,50px)
}
30%{
-webkit-transform: translate(150px,150px) scale(1.5)
}
50%{
-webkit-transform: translate(250px,150px) scale(1)
}
70%{
-webkit-transform: translate(350px,250px) scale(2)
}
100%{
-webkit-transform: translate(0px,0px) scale(1)
}
} .box{
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%; /* 规定 @keyframes 动画的名称 */
animation-name:move;
-webkit-animation-name:move;
-o-animation-name:move;
-ms-animation-name:move;
-moz-animation-name:move;
/* 规定动画完成一个周期所花费的秒 默认是 0 */
animation-duration:1s;
-webkit-animation-duration:1s;
-o-animation-duration:1s;
-ms-animation-duration:1s;
-moz-animation-duration:1s;
/* 规定动画的速度曲线。默认是 "ease" */
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-moz-animation-timing-function: linear;
/* 规定动画何时开始。默认是 0 */
animation-delay: 0;
-webkit-animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-moz-animation-delay: 0;
/* 规定动画被播放的次数。默认是 1 */
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
} </style>
<body>
<div class="box"></div>
</body>
</html>
动画类型不仅仅局限于 translate(平移) 还可以是 scale(缩放)rotate(旋转)等
css3 实现动画的更多相关文章
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
- 8款超酷而实用的CSS3按钮动画
1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图 ...
- 9种jQuery和css3图片动画特效代码演示
1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
随机推荐
- 名字top500字典 各种格式及python脚本
原文件名字top500 链接: https://pan.baidu.com/s/1cv0jPYb1-EBceoZz3QNvgg 密码: bat5 中文名字 链接: https://pan.baidu. ...
- zabbix自定义监控主机
目的: 从头开始自定义监控主机的磁盘.CPU.运行内存等 配置自动发现主机:设置ip地址范围,检查类型为zabbix客户端,端口未10050,键值为system.uname,设置唯一性准则为ip地址 ...
- windows远程登录报错 CredSSP不支持Oracle
https://support.microsoft.com/en-us/help/4093492/credssp-updates-for-cve-2018-0886-march-13-2018
- markdown特殊符号语法
符号 说明 对应编码 & AND符号 & < 小于 < > 大于 > _ ...
- H3C交换机IRF典型配置举例LACP MAD检测方式
一.组网需求 由于公司人员激增,接入层交换机提供的端口数目已经不能满足PC的接入需求.现需要在保护现有投资的基础上扩展端口接入数量,并要求网络易管理.易维护. 二.组网图 三.配置思路 Device ...
- 你云我云•兄弟夜谈会 第三季 企业IT架构
你云我云•兄弟夜谈会 第三季 企业IT架构 你云我云•兄弟夜谈会 第二季 5G 你云我云•兄弟夜谈会 第一季 企业云 0. 概况 时间:2019年2月23日 22:00~23:30 主题:企业IT架构 ...
- Windows下安装Python虚拟环境
Windows下安装Python虚拟环境 虚拟环境安装 需求概要 "虚拟环境"是从电脑独立开辟出来的环境.就好比我们生活中的橱柜中,会把酱油放在一个瓶子里,把醋放在另外一个瓶子里, ...
- DynamicEnumUtil 动态添加枚举类的枚举值
import java.lang.reflect.AccessibleObject; import java.lang.reflect.Array; import java.lang.reflect. ...
- mysql通过now()获取的时间不对
先用now()获取系统时间,发现时间不对(差8个小时): mysql> select now(); +---------------------+ | now() | +------------ ...
- MySQL Group Replication-MGR集群
简介 MySQL Group Replication(简称MGR)字面意思是mysql组复制的意思,但其实他是一个高可用的集群架构,暂时只支持mysql5.7和mysql8.0版本. 是MySQL官方 ...