css3 border旋转时的动画应用

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

本文主要包含css3 border,css3 border radius,css3 border image,css3 border属性,css3 border渐变等相关知识,佚名希望在学习及工作中可以帮助到您

废话不多说了，直接给大家贴代码了，具体代码如下所示：
</div>

<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>

</div> </div> 效果图

上面代码中要注意的地方：
border-radius: 70px;为70px时div才能显示为圆形，因为上下左右的border多出了20px
border-left-color: #fff;可以独立设置一边的颜色
animation: namemf 1s linear infinite;中linear为匀速运动　　　　　　　
ease：动画以低速开始，然后加快，在结束前变慢。　　　　　　　
ease-in：动画以低速开始　　　　　　　
ease-out：动画以低速结束 </div>

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

2017-06-02html5+css3之CSS中的布局与Header的实现
2017-06-02css3实现针线缝合效果(图解步骤)
2017-06-02关于box-sizing的全面理解
2017-06-02CSS3 渐变（Gradients）之CSS3 线性渐变
2017-06-02CSS3+Sprite实现僵尸行走动画特效源码
2017-06-02各大浏览器 CSS3 和 HTML5 兼容速查表图文
2017-06-02不同浏览器对CSS3和HTML5的支持状况
2017-06-02CSS3对背景图片的裁剪及尺寸和位置的设定方法
2017-08-21css3 flex属性flex-grow、flex-shrink、flex-basis学习笔记
2017-06-02使用HTML和CSS3绘制基本卡通图案的示例分享

css3 border旋转时的动画应用

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

相关文章

文章分类

最近更新的内容