当前位置：主页 > 查看内容

关于css旋转动画效果的简单实现

发布时间：2021-09-17 00:00| 有 位朋友查看

简介：我们可以通过css来做出动画效果，下面我为大家演示的是div的旋转，颜色过渡的动画 XML/HTML Code 复制内容到剪贴板 !DOCTYPEhtml html lang = zh-cmn-Hans head meta charset = utf-8 / title / title style a{ text-align:center; line-height:100px; trans……

我们可以通过css来做出动画效果，下面我为大家演示的是div的旋转，颜色过渡的动画

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="zh-cmn-Hans">  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title></title>  
  6. <style>  
  7.     a{       
  8.         text-align:center;   
  9.         line-height:100px;   
  10.         transition:all 2s;   
  11.         width:100px;   
  12.         height:100px;   
  13.         background:pink;   
  14.         float:left;   
  15.         border-radius:50%;   
  16.     }   
  17.     a:hover{   
  18.         transition:all 2s;   
  19.         background:red;   
  20.         transform-origin:50 100;   
  21.         transform:rotate(360deg);   
  22.         border-radius:50%;   
  23.            
  24.     }   
  25. </style>  
  26. </head>  
  27. <body>  
  28. <h1>请将鼠标移动到下面的矩形上：</h1>  
  29. <a>  
  30.     两秒旋转360   
  31. </a>  
  32. </body>  
  33. </html>  

效果自己测试，很绚丽哦！

以上这篇关于css旋转动画效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。


原文链接：https://m.jb51.net/css/486654.html
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：CSS background全部汇总 下一篇：没有了

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐