设页面中有
编写的HTML文件如下。
圆的放大.container
{
margin: 0 auto;
width: 300px;
height:300px;
position: relative;
display:flex;
justify-content:center;
align-items:center;
background:#d8d8d8;
border: 4px solid rgba(255, 0, 0, 0.9);
border-radius: 10%;
}
.circle
{
width:150px;
height:150px;
border: 4px solid #000;
border-radius: 50%;
animation: anim 1s ease-out infinite;
}
@keyframes anim
{
0% { transform: scale(0); opacity: 0; }
50% { opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
在浏览器中打开包含这段HTML代码的html文件,可以呈现出如图1所示的动画效果。
图1 圆的放大(一)
若将上面文件中的“border: 4px solid #000;”改写为“background: #000;”ÿ