WEB动画-CSS3关键帧

Hello 2019

于 2018-12-18 10:06:02 发布

阅读量348

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB JS CSS HTML5 文章标签： WEB CSS3 动画关键帧

本文链接：https://blog.youkuaiyun.com/zhangminghe2/article/details/85060477

CSS 同时被 3 个专栏收录

3 篇文章

订阅专栏

HTML5

3 篇文章

订阅专栏

WEB

2 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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