博主分享免费Java教学视频,B站账号:Java刘哥
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <link rel="stylesheet" href="abc.css">
- <title></title>
- <style>
- .div1{
- width: 500px;
- height: 500px;
- border-radius: 50%;
- margin:0 auto;
- background-color: #333;
- animation: changewidth 2s ease-in-out 0s 50 alternate ;}/*这里animation的值可以填6个,分别标志为①②③④⑤⑥*/
- @keyframes changewidth
- {
- 0%{width: 500px;background-color: black;}
- 50%{width: 0;background-color: aqua;}
- 100%{width: 500px;background-color: red;}
- }
- </style>
- </head>
- <body>
- <div class="div1"></div>
- </body>
- </html>
- animation:①②③④⑤⑥;
- @keyframes ①
- {
- 0%{ **};
- 10%{ *};
- ……
- 100%{*};
- }
- @keyframes ①
- {
- 这里面可以填很多属性,如:width,height,font,background,color……
- }
- 微信
- 交流学习,有偿服务
- 博客/Java交流群
- 资源分享,问题解决,技术交流。群号:590480292
您可以选择一种方式赞助本站
支付宝扫一扫赞助
微信钱包扫描赞助
赏