目录
任务描述
本关任务:用 CSS3 实现简单的小动画。效果图如下:
相关知识
为了完成本关任务,你需要掌握:1.创建动画,2.绑定元素。
创建动画
用 @keyframes
来创建一个动画,然后把这个动画绑定到一个元素上就有效果了。
需要实现的效果图如下:
基本的html结构如下:
<p>@keyframes</p>
p{ font-size: 14px}
效果图如下:
先用@keyframes
创建一个动画,这个动画表示字体会从20px
变成40px
。代码如下:
@keyframes bigfonts{
from { font-size: 20px;}
to { font-size: 40px;}
}
说明:
@keyframes
表示创建动画,动画名称是bigfonts
;from
表示这个动画的开始,to
表示这个动画的结束;- 动画发生的时间也可以用百分比来表示,
0%
是动画的开始,100%
是动画的结束。from
和to
相当于0%
和100%
;
绑定元素
然后将动画bigfonts
绑定到p
元素上就可以了。代码如下:
p:hover{
animation: bigfonts 2s ease;
}
效果已经实现了。这里说明一下animation
的属性值:
bigfonts
是动画的名称;2s
是动画一次完成的时间;ease
表示动画的速度曲线,动画以低速开始,然后加快,在结束前变慢。默认也是ease
;
编程要求
根据提示,在右侧编辑器补充代码,实现当滑动到p
元素上时,宽度从100px
变为400px
的效果。要求如下:
- 动画名称为
changeColor
; - 动画一次完成的时间为
2s
; - 动画的速度曲线为
ease-in
; - 这里动画的开始,结束用
from,to
;
为了方便评测, CSS 都是需要以分号;
结尾的。
效果如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
<style>
* {
margin: 0;
padding: 0;
}
p {
margin: 100px;
width: 100px;
height: 100px;
background: orange;
}
/************* Begin ************/
/* 创建动画 */
@keyframes changeColor {
from {
width: 100px;
}
to {
width: 400px;
}
}
/*绑定元素*/
p:hover {
animation: changeColor 2s ease-in;
}
/************** End **************/
</style>
</head>
<body>
<p></p>
</body>
</html>