CSS3中的动画效果

最新推荐文章于 2024-05-23 22:54:35 发布

唐小狼

最新推荐文章于 2024-05-23 22:54:35 发布

阅读量521

点赞数

分类专栏： HTML5 前端工程师学习笔记 css3

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51450740

版权

前端工程师学习笔记同时被 3 个专栏收录

85 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

css3

16 篇文章 0 订阅

订阅专栏

1、transition

示例代码：

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>transition</title>
  
  
  
  
   
       <style>
  
  
  
  
   
           div{
  
  
  
  
   
               background-color: #ffff00;
  
  
  
  
   
               color: black;
  
  
  
  
   
               transition:background-color 3s linear,color 2s linear,transform 1s linear;
  
  
  
  
   
           }
  
  
  
  
   
           div:hover{
  
  
  
  
   
               transform: rotate(360deg);
  
  
  
  
   
               background-color: aqua;
  
  
  
  
   
               color: red;
  
  
  
  
   
           }
  
  
  
  
   
       </style>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <div>示例文字</div>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

2、animation

与transition的区别是，transition只定义了起始和结束的状态，动画是这两个状态之间平滑过渡。animation可以指定多个关键帧的状态，从而可以实现更加复杂的动画效果。

示例代码

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html lang="en">
  
  
  
  
   
   <head>
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>animation</title>
  
  
  
  
   
       <style>
  
  
  
  
   
           div{
  
  
  
  
   
               background-color: #ffff00;            
  
  
  
  
   
           }
  
  
  
  
   
           @keyframes mycolor{
  
  
  
  
   
               0%{
  
  
  
  
   
                   background-color: #ffff00;
  
  
  
  
   
               }
  
  
  
  
   
               40%{
  
  
  
  
   
                   background-color: aqua;
  
  
  
  
   
               }
  
  
  
  
   
               70%{
  
  
  
  
   
                   background-color: darkblue;
  
  
  
  
   
               }
  
  
  
  
   
               100%{
  
  
  
  
   
                   background-color: #ffff00;
  
  
  
  
   
               }
  
  
  
  
   
           }
  
  
  
  
   
           div:hover{
  
  
  
  
   
               animation: mycolor 5s linear;
  
  
  
  
   
           }
  
  
  
  
   
       </style>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <div>示例文字</div>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>