<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>填充</title><style type="text/css">#box1{ width:130px; height:100px; padding:10px; border:1px solid red; animation:box 1.5s; animation-iteration-count:infinite;}@keyframes box{0% {opacity: 1; width:130px;}50% {opacity: 1; height:500px;width:145px;}100% {opacity: 0.8; width:130px;height:100px;}}</style></head><body><div id="box1">这真的是盒子？</div></body></html>
3 回答
已采纳
stone310
TA贡献361条经验 获得超191个赞
#box1{
width:130px;
height:100px;
padding:10px;
border:1px solid red;
animation:box 1.5s; /*定义了动画名称（box）和每次动画持续时间（1.5s）*/
animation-iteration-count:infinite; /*定义了动画执行次数（此处为无限次infinite）*/
}
@keyframes box /*定义box动画*/
{
0% {opacity: 1; width:130px;} /*执行到0%的时候，属性为透明度1，宽130px*/
50% {opacity: 1; height:500px;width:145px;} /*执行到50%的时候，变化的属性为高500px，宽145px*/
100% {opacity: 0.8; width:130px;height:100px;} /*执行到100%的时候，变化的属性为透明度0.8，宽130px，高100px*/
}
- 3 回答
- 1 关注
- 1527 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消