WEB动画-CSS3关键帧

最新推荐文章于 2025-08-27 00:16:36 发布

原创最新推荐文章于 2025-08-27 00:16:36 发布 · 365 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#WEB #CSS3 #动画 #关键帧

CSS 同时被 3 个专栏收录

3 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

WEB

2 篇文章

订阅专栏

本文展示了一个使用CSS3实现的动画案例，通过关键帧动画和过渡效果改变元素的宽度、高度、背景颜色、透明度及旋转角度。初始状态下的元素尺寸较小，背景颜色为绿色，透明度较低。在动画过程中，元素逐渐增大，背景变为蓝色，完全可见，并完成一次旋转。

<!DOCTYPE html>
<html>
<head>
<style>
@keyframes myfirst
{
from{
   width:65px;
   height:40px;
   background:#92B901;
   color:#ffffff;
   font-weight:bold;
   font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
opacity:0.4;
}

to{
   transform: rotate(360deg);
   opacity:1;
   background:#1ec7e6;
   width:90px;
   height:60px;
   font-size:16px;
}
}
div{
animation:myfirst 1s;
animation-iteration-count:2;
animation-direction:alternate;
   width:65px;
   height:40px;
   background:#92B901;
   color:#ffffff;
   position:absolute;
   font-weight:bold;
   font:12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
   padding:20px 10px 0px 10px;
   margin:5px;
   border-radius:5px;
   opacity:0.4;