<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>动画</title>
<style>
/* 定义动画 */
/* 关键帧:自定义名称 */
@keyframes move {
from {
/* 开始的状态 */
transform: translate(0,0);
}
to {
/* 结束的状态 */
transform: translate(600px,0);
}
}
@keyframes move2 {
/* 多组 */
0%{
transform: translate(0,0) scale(1);
}
50%{
transform: translate(300px,300px) scale(1.5);
}
100%{
transform: translate(600px,0px) scale(0.5);
}
}
img{
width: 100px;
height: 100px;
border-radius: 50%;
/* 调用动画 */
/* 无限循环 infinite */
/* 是否反向 alternate*/
/* animation: move 0.3s 1s linear infinite alternate; */
animation: move2 2s linear infinite;
}
</style>
</head>
<body>
<img src="img/tu.png" alt="">
</body>
</html>
网页动画效果
最新推荐文章于 2024-06-14 07:13:04 发布