CSS 图片动态旋转
<div class="header-logo">
<img src="../../img/logo.png" />
</div>
.header-container>.header-photo>img {
width: 50px;
height: 50px;
margin-top: 10px;
/* 设置图片为圆形 */
border-radius: 100%;
/*
rotate 自定义动画效果名称
6s 完成的时间
linear 表示全程速度相同,除了这个还有:
ease 动画以低速开始,然后加快,在结束前变慢
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
infinite设置播放次数,infinite无限次,如果有次数,选择数字
*/
animation: rotate 6s linear infinite;
}
/* 头像动态旋转效果 */
/*
创建动画效果rotate
rotate(*deg)表示旋转度数,另外还有
rotateX(*deg),rotateY(*deg),rotateZ(*deg)表示向市民方向旋转
*/
@keyframes rotate {
0% {
transform: rotate(0deg);
/*从0度开始*/
}
100% {
transform: rotate(360deg);
/*360度结束*/
}
}