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模拟jq点击事件的实例代码
Jul 06 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
利用CSS3制作简单的3d半透明立方体图片展示
Mar 25 HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
Html5实现单张、多张图片上传功能
Apr 28 HTML / CSS
html5 canvas-2.用canvas制作一个猜字母的小游戏
Jan 07 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
javascript之解决IE下不渲染的bug
2007/06/29 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jquery教程ajax请求json数据示例
2014/01/13 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
jquery dataTable 获取某行数据
2017/05/05 jQuery
Angular 表单控件示例代码
2017/06/26 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
Python中的localtime()方法使用详解
2015/05/22 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python实现网站注册验证码生成类
2017/06/08 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
selenium+python 对输入框的输入处理方法
2018/10/11 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
python实现FTP循环上传文件
2020/03/20 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
Java如何支持I18N?
2016/10/31 面试题
简短的公司员工自我评价分享
2013/11/13 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
机械工程师岗位职责
2014/06/16 职场文书
骨干教师考核评语
2014/12/31 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
劳动保障事务所个人工作总结
2015/08/12 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP