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中的5个有趣的新技术
Apr 02 HTML / CSS
css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
Feb 10 HTML / CSS
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
Dec 20 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
May 10 HTML / CSS
Html5新特性用canvas标签画多条直线附效果截图
Jun 30 HTML / CSS
浅谈html5 响应式布局
Dec 24 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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
深思 PHP 数组遍历的差异(array_diff 的实现)
2008/03/23 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
javascript类型转换使用方法
2014/02/08 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
vue+element实现批量删除功能的示例
2018/02/28 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python字符串替换示例
2014/04/24 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python中协程实现TCP连接的实例分析
2018/10/14 Python
Python 正则表达式匹配字符串中的http链接方法
2018/12/25 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
django API 中接口的互相调用实例
2020/04/01 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
我爱我家教学反思
2014/05/01 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
行政处罚事先告知书
2015/07/01 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python