CSS3控制HTML元素动画效果


Posted in HTML / CSS onFebruary 08, 2014

使用CSS3控制HTML元素的动画效果:

1.对元素transform的控制

先上例子:

复制代码
代码如下:

<head>
<style>
.showbox{
float: left;
margin:4em 1em;
width:100px;
height:60px;
borer:2px solid green;
background-color:#000;
text-align:center;
-webkit-transition: 1s ease-in-out;
transition:1s ease-in-out;
}
.sliderright:hover{
-webkit-transform:translate(30em, 0);
transform:translate(30em, 0);
}
</style>
</head>
<body>
<div class='showbox sliderright'>
</div>
</body>

CSS3中,元素可以具有如下的transform-control属性:

复制代码
代码如下:

-webkit-transform: translate(3em,0);
-webkit-transform: rotate(30deg);
-webkit-transform: scale(1.5);

通过恰当的变换,最终可以将元素的位置变化成为我们需要的效果。

2.CSS3的动画属性

CSS3中元素的所有均由下面的属性控制

复制代码
代码如下:

-webkit-transition: 1s ease-in-out;

实际上,这个css属性控制了在元素的style发生变化的时候应该怎样改变那些数值,一些可以连续变化的style,诸如opacity,color,width等等都可以在这样的属性控制下进行动画

3.动画的多时间点控制

我们可以逐点控制动画,放上另一个例子:

复制代码
代码如下:

<head>
<style>
.box{
position:relative;
width:100px;
height:100px;
left:0;
top:0;
background:blue;
-webkit-transition-property: width, height, left, top, background, -webkit-transform;
-webkit-transition-duration: 1s, 1s, 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay:1s, 1s, 0, 0, 0, 1s;
}
.box:hover{
width:50px;
height:50px;
left:150px;
top:150px;
background:red;
-webkit-transform:rotate(360deg);
}
</style>
</head>
<body>
<div style='height:250px;width:250px;background:grey'>
<div class='box'>
</div>
</div>
</body>

在上面的例子中,-webkit-transition-property控制了动画需要控制那些style属性,duration和delay控制时间节点,timeing function控制了是不是需要淡入淡出的效果。

4.如何让一个元素的hover动作触发另一个元素的动画?

我们可以使用CSS属性的一些链接符号,如下面的例子中,使用~号,在label1的hover动作触发的时候,会影响到label2,然后触发label2的动画

复制代码
代码如下:

<head>
<style>
.box1{
position:absolute;
background:red;
width:100px;
height:100px;
top:0;
left:0;
}
.box1:hover ~ .box2{
left:500px;
}
.box2{
position:absolute;
width:100px;
height:100px;
left:120px;
top:0;
background:blue;
-webkit-transition: 1s ease-in-out;
}
</style>
</head>
<body>
<div style='height:100px;width:400px;background:grey'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
</body>
HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3实现曲线阴影和翘边阴影
May 03 HTML / CSS
CSS3条纹背景制作的实战攻略
May 31 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
HTML5 Canvas中绘制矩形实例
Jan 01 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
Dec 21 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
详解HTML5 Canvas标签及基本使用
Jan 10 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
Html5新增了哪些功能
Apr 16 HTML / CSS
使用css3匹配手机屏幕横竖状态
Jan 27 #HTML / CSS
css3教程之倾斜页面
Jan 27 #HTML / CSS
使用css3制作动感导航条示例
Jan 26 #HTML / CSS
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 #HTML / CSS
css3实现的下拉菜单效果示例
Jan 22 #HTML / CSS
css图标制作教程制作云图标
Jan 19 #HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 #HTML / CSS
You might like
Apache+php+mysql在windows下的安装与配置图解(最新版)
2008/11/30 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
javascript实现全局匹配并替换的方法
2015/04/27 Javascript
浅谈javascript的call()、apply()、bind()的用法
2016/02/21 Javascript
jQuery中的基本选择器用法学习教程
2016/04/14 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
浅谈微信页面入口文件被缓存解决方案
2018/09/29 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
2020/10/30 Javascript
[00:29]2019完美世界全国高校联赛(秋季赛)总决赛海口落幕
2019/12/10 DOTA
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
Python如何存储数据到json文件
2020/03/09 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
结构工程研究生求职信
2013/10/13 职场文书
大学活动总结模板
2014/07/10 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
群众路线教育查摆剖析材料
2014/10/10 职场文书
高中班主任心得体会
2016/01/07 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
mysql如何配置白名单访问
2021/06/30 MySQL