CSS3控制HTML元素动画效果
2014-02-08 17:05
771 查看
使用CSS3控制HTML元素的动画效果:
1.对元素transform的控制
先上例子:
CSS3中,元素可以具有如下的transform-control属性:
通过恰当的变换,最终可以将元素的位置变化成为我们需要的效果。
2.CSS3的动画属性
CSS3中元素的所有均由下面的属性控制
实际上,这个css属性控制了在元素的style发生变化的时候应该怎样改变那些数值,一些可以连续变化的style,诸如opacity,color,width等等都可以在这样的属性控制下进行动画
3.动画的多时间点控制
我们可以逐点控制动画,放上另一个例子:
在上面的例子中,-webkit-transition-property控制了动画需要控制那些style属性,duration和delay控制时间节点,timeing function控制了是不是需要淡入淡出的效果。
4.如何让一个元素的hover动作触发另一个元素的动画?
我们可以使用CSS属性的一些链接符号,如下面的例子中,使用~号,在label1的hover动作触发的时候,会影响到label2,然后触发label2的动画
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>
相关文章推荐
- css3控制多重动画效果
- 深入CSS3 动画效果的总结详解
- css3之动画效果animation
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- 纯CSS3实现的8种Loading动画效果
- CSS3效果:5种预载动画效果
- 手势检测实现相册的左右滑动(并加上移动与旋转的特效) 首先,activity_main.xml里,使用ViewFlipper组件(可使用动画控制多个组件之间的切换效果) <?xml version="
- CSS3实现鼠标移动到图片上图片变大(缓慢变大,有过渡效果,放大的过程是有动画过渡的,这个过渡的时间可以自定义)
- CSS3中动画效果Transitions与Animations的区别
- 超棒的CSS3动画页面过渡效果
- CSS3制作各种平滑过渡的动画效果
- html+css3太阳系行星运转动画效果的实现代码
- CSS3贝塞尔曲线$$动画效果
- CSS3系列三(与背景边框相关样式 、变形处理、动画效果)
- jQuery控制DIV层实现由大到小,由远及近动画变化效果
- CSS3(背景样式,文本立体效果,2d3d转换及动画)第八天
- 使用CSS3 BACKFACE-VISIBILITY属性制作翻转动画效果
- css3实现三种不同的loading加载动画效果
- 用css3和canvas实现的蜂窝动画效果
- HTML5+CSS3实现图片可倾斜摆放的动画相册效果