css3 border旋转时的动画应用


Posted in HTML / CSS onJanuary 22, 2016

废话不多说了,直接给大家贴代码了,具体代码如下所示:

JavaScript Code复制内容到剪贴板
  1. <html>    
  2. <head>    
  3. <title>css3动画border旋转时的应用。</title>    
  4. <meta charset="UTF-8"/>    
  5. <style type="text/css">    
  6. body{    
  7. background: #ccc;    
  8. }    
  9. .he{    
  10. width: 100px;    
  11. height: 100px;    
  12. margin: 200px auto;    
  13. border: 10px solid black;    
  14. border-left-color: #fff;    
  15. border-radius: 70px;    
  16. animation: namemf 1s linear infinite;    
  17. -webkit-animation:namemf 1s linear infinite;    
  18. -ms-animation: namemf 1s linear infinite;    
  19. }    
  20. @keyframes namemf{    
  21. from{    
  22. transform:rotate(0deg) ;    
  23. }    
  24. to{    
  25. transform: rotate(360deg);    
  26. }    
  27. }    
  28. @-webkit-keyframes namemf{    
  29. from{    
  30. transform:rotate(0deg) ;    
  31. }    
  32. to{    
  33. transform: rotate(360deg);    
  34. }    
  35. }    
  36. @-ms-keyframes namemf{    
  37. from{    
  38. transform:rotate(0deg) ;    
  39. }    
  40. to{    
  41. transform: rotate(360deg);    
  42. }    
  43. }    
  44. </style>    
  45. </head>    
  46. <body>    
  47. <div class="he">    
  48. </div>    
  49. </body>    
  50. </html>   
效果图

css3 border旋转时的动画应用


上面代码中要注意的地方:
border-radius: 70px;为70px时div才能显示为圆形,因为上下左右的border多出了20px
border-left-color: #fff;可以独立设置一边的颜色
animation: namemf 1s linear infinite;中linear为匀速运动

 
ease:动画以低速开始,然后加快,在结束前变慢。

 
ease-in:动画以低速开始

 
ease-out:动画以低速结束

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3实现时间轴效果
Jul 11 HTML / CSS
HTML5 CSS3新的WEB标准和浏览器支持
Jul 16 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
简述Html5 IphoneX 适配方法
Feb 08 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
CSS3实现swap交换动画
Jan 19 #HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 #HTML / CSS
纯HTML5+CSS3制作图片旋转
Jan 12 #HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 #HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 #HTML / CSS
使用CSS3的appearance属性改变元素的外观的方法
Dec 12 #HTML / CSS
CSS3 flex布局之快速实现BorderLayout布局
Dec 03 #HTML / CSS
You might like
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
php图片缩放实现方法
2014/02/20 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
Laravel框架实现redis集群的方法分析
2017/09/14 PHP
JavaScript实现禁止后退的方法
2006/12/27 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
2015/10/02 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
日常收藏的jquery技巧
2015/12/02 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
Ionic+AngularJS实现登录和注册带验证功能
2017/02/09 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
基于AngularJS实现表单验证功能
2017/07/28 Javascript
详解bootstrap导航栏.nav与.navbar区别
2017/11/23 Javascript
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
对Python 简单串口收发GUI界面的实例详解
2019/06/12 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python内置函数locals和globals对比
2020/04/28 Python
Python利用命名空间解析XML文档
2020/08/10 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
内部类的定义、种类以及优点
2013/10/16 面试题
小学生演讲稿
2014/01/12 职场文书
党员创先争优活动总结
2014/05/04 职场文书
企业文化学习心得体会
2016/01/21 职场文书
Python jiaba库的使用详解
2021/11/23 Python