之前都是一些静态的东西,今天给大家带来一点动态的编码(也是最简单的)。
首先我们要了解到什么是CSS3过渡:
在CSS3中,我们为了添加某种效果可以从一种样式转变到另一个的时候,无需使用Flash动画或JavaScript。——(而需用到CSS3过渡)。
然后我们要了解到要实现这一点,必须规定两项内容:
指定要添加效果的CSS属性
指定效果的持续时间
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
</body>
(hover)规定当鼠标指针悬浮于 (div)元素上(动态效果不好展示,请见谅,可以自己试试)而当鼠标光标移动到该元素时,它逐渐改变它原有样式。
如果未指定的期限(如width 2s),transition将没有任何效果,(也就是会直接改变,不会有缓慢变化而形成动态效果)因为它默认值是0。
transform: rotate(180deg);
这个是添加在div:hover 里的,表示动态的旋转效果,()里的是图形旋转的角度
注意:要添加多个样式的变换效果,添加的属性由逗号分隔。
A 要创建 CSS3 动画,你需要了解== @keyframes 规则==。@keyframes 规则是创建动画。
B @keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式
C 当在 @keyframes 创建动画,把它绑定到一个选择器,否则动画不会有任何效果。
D 指定至少这两个CSS3的动画属性绑定向一个选择器:
规定动画的名称;
规定动画的时长
<style>
div
{
width:100px;
height:100px;
background:red;
animation:a 5s;
transition:width 2s, height 2s, transform 2s;
}
div:hover
{
width:300px;
transform: rotate(180deg);
}
@keyframes a
{
from {background:red;}
to {background:yellow;}
}
</style>
其中,使用animation元素,把 “a” 动画捆绑到 div 元素,时长:5 秒,意为从红色转变到黄色
注意: 您必须定义动画的名称和动画的持续时间。如果省略的持续时间,动画将无法运行,因为默认值是0。
接下来就是改变背景色和位置:
<style>
div
{
width:100px;
height:100px;
background:red;
animation:a 5s;
position:relative;
transition:width 2s, height 2s, transform 2s;
}
div:hover
{
width:300px;
transform: rotate(180deg);
}
@keyframes a
{
from {background:red;}
to {background:yellow;}
}
@keyframes a
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
其中,使用position元素,relative限制,用百分比来规定变化发生的时间,0% 是动画的开始,100% 是动画的完成,然后在大括号里加上该时刻所变的背景颜色和位置
下面的表格列出了 @keyframes 规则和所有动画属性:
巧妙运用后即可绘制太阳系各大行星运行轨迹,如:
添加链接描述
That’s all,goodbye.