首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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：动画以低速结束

css3 border旋转时的动画应用

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
css3旋转木马_动力节点Java学院整理
Jul 12 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 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
低放电路(1) 德劲1102(1) PL550(1) PL450(1) 乐信(1) ICF-SW7600(1) BCL3000(2) SHARP(1) GF515(1) RP2100(1)
You might like
封装一个PDO数据库操作类代码
2009/09/09 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
php站内搜索关键词变亮的实现方法
2014/12/30 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP面向对象程序设计之命名空间与自动加载类详解
2016/12/02 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
jQuery 回调函数（callback）的使用和基础
2015/02/26 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
Bootstrap多级菜单的实现代码
2017/05/23 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
pycharm 使用心得（八）如何调用另一文件中的函数
2014/06/06 Python
使用Kivy将python程序打包为apk文件
2017/07/29 Python
python PyTorch预训练示例
2018/02/11 Python
详解Python中的测试工具
2019/06/09 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
linux 下selenium chrome使用详解
2020/04/02 Python
Python selenium自动化测试模型图解
2020/04/15 Python
python实时监控logstash日志代码
2020/04/27 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片（支持预览与批量）
2017/01/05 HTML / CSS
Sofft鞋官网：世界知名鞋类品牌
2017/03/28 全球购物
以实惠的价格轻松租车，免费取消：Easyrentcars
2019/07/16 全球购物
主管竞聘书范文
2014/03/31 职场文书
儿童诗两首教学反思
2016/02/23 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
mysql 子查询的使用
2022/04/28 MySQL