您的位置：首页 > Web前端 > CSS

css3 animation 实现环形路径平移动画

2016-11-14 08:59 676 查看
注意 @keyframes to/from 的学习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

<style>
/* 顺时针自转 */
@keyframes spin {
to {
transform: rotate(1turn);
}
}

/* 逆时针自转 */
@keyframes spin-reverse {
from {
transform: rotate(1turn);
}
}

/* 这是一坨自暴自弃的样式 */
.basic{
border:3px solid orange;
height: 150px;
width:150px;
border-radius:50%;
margin:50px;
}

/*
顺时针自转，同时该元素下所有的子元素也会一起旋转起来
*/
.avatar{

/*
linear : 从头到尾速度是相同的;
infinite：无限轮播
*/
animation: spin 10s infinite linear;

}

/*
逆时针旋转“自转”，与“公转”导致的旋转相抵消。形成一种不动的错觉
*/
.avatar > img {

animation:spin-reverse 10s infinite linear;
}

</style>

<div class="basic avatar">
<img src="github.png" alt="">
</div>

</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航