css3 border旋转时的动画应用
发布时间:2016-01-22 14:19:49 作者:佚名 我要评论
这篇文章主要介绍了css3 border旋转时的动画应用的相关资料,需要的朋友可以参考下
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
JavaScript Code复制内容到剪贴板
- <html>
- <head>
- <title>css3动画border旋转时的应用。</title>
- <meta charset="UTF-8"/>
- <style type="text/css">
- body{
- background: #ccc;
- }
- .he{
- width: 100px;
- height: 100px;
- margin: 200px auto;
- border: 10px solid black;
- border-left-color: #fff;
- border-radius: 70px;
- animation: namemf 1s linear infinite;
- -webkit-animation:namemf 1s linear infinite;
- -ms-animation: namemf 1s linear infinite;
- }
- @keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-webkit-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- @-ms-keyframes namemf{
- from{
- transform:rotate(0deg) ;
- }
- to{
- transform: rotate(360deg);
- }
- }
- </style>
- </head>
- <body>
- <div class="he">
- </div>
- </body>
- </html>
上面代码中要注意的地方:
border-radius: 70px;为70px时div才能显示为圆形,因为上下左右的border多出了20px
border-left-color: #fff;可以独立设置一边的颜色
animation: namemf 1s linear infinite;中linear为匀速运动
ease:动画以低速开始,然后加快,在结束前变慢。
ease-in:动画以低速开始
ease-out:动画以低速结束
相关文章
- 这篇文章主要介绍了CSS border虚线边框属性教程,教大家如何使用css制作网页中的虚线,巩固CSS border属性使用方法,感兴趣的小伙伴们可以参考一下2016-04-19
- 这篇文章主要介绍了CSS中使用border来创建三角形的基本方法讲解,文中同时还附带了对HTML5 Canvas和SVG三角形的介绍,需要的朋友可以参考下2016-03-31
CSS3 flex布局之快速实现BorderLayout布局
所谓的布局管理器分为好多种,最常见的有流式布局管理器(FlowLayout)、边界布局管理器(BorderLayout)和表格布局管理器(GridLayout)。本文给大家介绍CSS3 flex布局之2015-12-03- css3中新增了一个属性 border-image ,这个属性允许开发者使用图片来定义边框,扩充了 CSS2 中仅有的几个预定义边框样式(border-style)。本文给大家介绍css3 border-image边2015-11-24
- 这篇文章主要介绍了实例讲解CSS3中的border-radius属性,是CSS3入门学习中的基础知识,需要的朋友可以参考下2015-08-18
- 这篇文章主要介绍了详解CSS3中border-image的使用,是CSS3入门学习中的基础知识,需要的朋友可以参考下2015-07-18
- 这篇文章主要介绍了CSS3使用border-radius属性制作圆角,并附上示例代码,推荐给有相同需求的小伙伴。2014-12-22
- 下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-05-23
最新评论