效果一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>来回滚动</title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 120px;
height: 120px;
margin-left: 20px;
margin-top: 50px;
/* infinite循环运动,alternate正常与反向交替运动 */
animation: move 3s ease-out infinite alternate;
background: url('./images/01.jpg');
background-size: cover;
}
@keyframes move {
0% {
transform: translate(0, 0) rotateZ(360deg);
}
100% {
transform: translate(600px, 0) rotateZ(720deg) scale(.9);
border-radius: 50%;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>溜溜球</title>
<style>
*{
margin: 0;
padding: 0;
}
p{
height: 10px;
width: 2px;
background-color: rgba(172, 169, 169, 0.842);
margin-left: 150px;
animation: changeH2 1.5s ease-in-out infinite alternate;
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
margin-left: 100px;
box-shadow: 0 0 30px #000;
animation: changeH 1.5s infinite alternate;
background:linear-gradient(rgba(187, 184, 184, 0.795),rgba(46, 45, 45, 0.842));
}
@keyframes changeH{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(720deg);
}
}
@keyframes changeH2{
from{
height: 400px;
}
to{
height: 10px;
}
}
</style>
</head>
<body>
<p></p>
<div></div>
</body>
</html>
效果三
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>心动</title>
<style>
* {
margin: 0;
padding: 0;
}
.heart {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: red;
position: relative;
transform: rotate(45deg) scale(0.5);
animation: run 1s ease-in-out infinite alternate;
}
@keyframes run {
25% {
transform: scale(.8);
transform: rotate(45deg);
}
50% {
transform: scale(1);
transform: rotate(45deg);
}
75% {
transform: scale(0.8);
transform: rotate(45deg);
}
}
.box1,
.box2 {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
position: absolute;
left: -100px;
}
.box2 {
left: 0px;
top: -100px;
}
.heart:hover {
/* 控制动画状态paused暂停 */
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="heart">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
效果四
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹跳小球</title>
<style>
* {
margin: 0;
padding: 0;
}
.container{
height: 700px;
background: rgb(250, 250, 250);
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
width: 50px;
height: 50px;
background: rgb(252, 217, 19);
border-radius: 50%;
animation: jump 1s ease-out infinite alternate-reverse;
}
@keyframes jump {
to {
transform: translateY(-260px);
}
}
.box2 {
width: 100px;
height: 20px;
background-color: rgba(219, 219, 219, 0.3);
border-radius: 70%;
position: relative;
top: 35px;
left: -75px;
animation: hide 1s infinite alternate ease-in;
}
@keyframes hide {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box1">
</div>
<section class="box2"></section>
</div>
</body>
</html>