您现在的位置是：网站首页> 编程资料编程资料

关于css旋转动画效果的简单实现CSS重要属性之 margin 属性知识大整合(必看篇)CSS background全部汇总利用CSS3实现自定义滚动条代码分享利用纯CSS实现动态的文字效果实例CSS重要属性之float学习心得(分享)常用的 css 命名规则(推荐)纯CSS3制作逼真的汽车运动动画特效源码浅谈css和@import区别及用法

2021-09-04 815人已围观

简介 下面小编就为大家带来一篇关于css旋转动画效果的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

XML/HTML Code复制内容到剪贴板
  1. >  
  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旋转动画效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

上一篇：CSS重要属性之float学习心得(分享)详解css中的float深入理解和应用css中Float属性css(display,float,position)深入理解老生常谈css中float的用法CSS使用float属性设置浮动元素的实例教程使用CSS的overflow属性防止float撑开div的方法CSS清除浮动float的三种方法小结

下一篇：CSS background全部汇总css background-attachment属性进阶css 背景固定样式background-attachment属性基础css background 背景图的设置方法CSS的background属性及CSS3的背景图片设置总结CSS制作边框效果的技巧总结详解使用CSS固定页面背景图片位置的方法使用CSS3来实现滚动视差效果的教程css 中background 设置文本框背景图 的方法

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网