设置边框弹跳的代码,能解释一下下图代码吗?我看不太懂

<!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>


qq_缘道_04178747
浏览 1409回答 3
3回答

stone310

#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*/ }

qq_缘道_04178747

上图哪段程序是可以使边框弹跳的,而这段程序要怎么使用呢?
打开App,查看更多内容
随时随地看视频慕课网APP