一篇关于css旋转动画效果的简单如何实现

假期很短暂,快乐却无边,工作很苦闷,赚钱最重要,陶醉在假期的快乐中,奋斗在工作的战线中,苦中寻乐一点甜,快乐与你长相伴。

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

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

效果自己测试,很绚丽哦!

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例