• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > 关于css旋转动画效果的简单实现

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含css,旋转,动画等相关知识,佚名 希望在学习及工作中可以帮助到您

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

  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旋转动画效果的简单实现就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持微课江湖。

您可能想查找下面的文章:

  • css小技巧
  • 各大网站CSS初始化代码
  • css权重问题
  • CSS实现鼠标上移图标旋转效果
  • 使用CSS3制作一个简单的进度条(demo)
  • 用纯CSS实现饼状Loading等待图效果
  • 利用CSS3伪元素实现逐渐发光的方格边框
  • CSS3实现内凹圆角的实例代码
  • 利用HTML5+CSS3实现3D转换效果实例详解
  • css3+伪元素实现鼠标移入时下划线向两边展开的效果

相关文章

  • 2017-08-06CSS制作可输入内容的table表格
  • 2017-08-06DIV水平垂直居中css实现代码
  • 2017-08-06css后代选择器和子选择器的区别介绍
  • 2017-08-06CSS网页布局实例 常见的12种网页布局
  • 2017-08-06用CSS3写的模仿iPhone中的返回按钮
  • 2017-08-06css display inline block 兼容性问题写法
  • 2017-08-06CSS3实现自定义Checkbox特效实例代码
  • 2017-08-06很少朋友知道的margin 百分比是按参照物来计算的
  • 2017-08-06CSS实现五颜六色按钮组成的导航条效果代码
  • 2017-08-06DIV遮罩层如何实现

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 你不知道的outerText,innerText 区别说明
    • CSS压缩的技巧与工具
    • 完整css选择器总结
    • CSS3 制作旋转的大风车(充满童年回忆)
    • 在固定大小DIV层插入N个图片使其一行排列
    • DIV设置float后父容器无法定位高度的问题解决方法
    • css 条件注释使用指南
    • 如何在class内写xsl标记注意事项
    • IE6下不能设置height:1px的元素是什么原因如何解决
    • IE6 注释引起的文字溢出和浮动错位的解决思路

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有