Mithilfe von CSS-Animationen, -Transformationen und -Übergängen können Sie einfache Bildzoom-, Rotations- und Verschiebungseffekte erzielen. Es gibt eine ganze Reihe von Animationseffekten, die daraus erweitert werden können, z. B. das langsame Vergrößern des Bildes, das langsame Drehen und Vergrößern des Bildes , das Bild langsam Position ändern usw.,
Renderings von Lotterieanimationen
Das Implementierungsprinzip ist ebenfalls sehr einfach und wird durch die Verwendung von Animationsanimationen und Schlüsselanimationsrahmen erreicht. Mithilfe der Skalierung können Sie einen reibungslosen Übergangseffekt erzielen. Das Folgende ist der Quellcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="center">
<div>抽奖效果</div>
<img
src="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"
class="card"
/>
</div>
<style>
.center {
width: 500px;
margin: 0 auto;
text-align: center;
}
.card {
width: 260px;
height: 400px;
animation: showImg 3s linear 1;
}
@keyframes showImg {
0% {
transform: scale(0.1) rotate(0);
}
50% {
transform: scale(0.5) rotate(360deg);
}
100% {
transform: scale(1) rotate(720deg);
}
}
</style>
</body>
</html>
Bild um 360 Grad gedreht und vergrößert
Das Bild ändert sich von klein nach groß und wird nach einer Drehung um 360 Grad um die y-Achse angezeigt:
Quellcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div>抽奖效果</div>
<div class="box">
<img
src="https://img-blog.csdnimg.cn/67fc9799ae8e48749e82cf70b179895b.png"
class="img"
/>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
/* height: 100%; */
width: 100%;
}
.wrap {
margin: 0 auto;
padding-top: 100px;
text-align: center;
}
.box {
width: 300px;
height: 400px;
margin: 0 auto;
}
.img {
width: 220px;
height: 300px;
transform: rotatey(0deg) scale(0.1);
/* transform-origin: center; */
transition: all 3s;
}
.wrap:hover .img {
/* transform: scale(1); */
transform: rotatey(360deg) scale(1);
-webkit-transform: rotatey(360deg) scale(1);
-o-transform: rotatey(360deg) scale(1);
-moz-transform: rotatey(360deg) scale(1);
-ms-transform: rotatey(360deg) scale(1);
}
</style>
</body>
</html>
Bild dreht sich langsam, Animation
Das Bild wird durch Drehen langsam gedreht, und nachdem die Maus darauf platziert wurde, tritt ein Pauseneffekt auf: Die Animation unten hat einen hängenden Effekt, aber die tatsächliche Situation ist sehr flüssig.
Quellcode zum Drehen von Bildern:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="source"></div>
<div class="avatar"></div>
</div>
</body>
<style>
body {
background-color: black;
padding-top: 100px;
}
.wrap {
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.source {
width: 100px;
height: 100px;
margin-right: 20px;
background-image: url('./assets/ball.png');
background-position: center;
background-size: 100% 100%;
animation: circle 1s linear infinite;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
background-image: url('https://profile-avatar.csdnimg.cn/f6acd04828d84240afc2739fe039fd49_weixin_44786530.jpg!1');
background-position: center;
background-size: 100% 100%;
animation: circle 2s linear infinite;
}
.source:hover {
animation-play-state: paused;
}
.avatar:hover {
animation-play-state: paused;
}
@keyframes circle {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(36deg);
}
20% {
transform: rotate(72deg);
}
30% {
transform: rotate(108deg);
}
40% {
transform: rotate(144deg);
}
50% {
transform: rotate(180deg);
}
60% {
transform: rotate(216deg);
}
70% {
transform: rotate(252deg);
}
80% {
transform: rotate(288deg);
}
90% {
transform: rotate(324deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</html>
Feder-Couplet-Effekt
Das Frühlingsfest steht vor der Tür, also stellen wir die Frühlingsfest-Couplets zusammen und nutzen dabei die Drehung bei der Transformation und die Änderung der Mittelposition. Die Darstellung ist wie folgt:
Quellcode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="wrap">
<div class="card">
<div class="text">春</div>
</div>
<div class="two">
<div class="text">到</div>
</div>
<div class="three">
<div class="text">万</div>
</div>
<div class="for">
<div class="text">家</div>
</div>
</div>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
background-color: skyblue;
}
.wrap {
width: 100px;
/* margin-top: 200px; */
margin: 100px auto;
}
.card {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(45deg);
transform-origin: left top;
animation: shark 3s infinite ease-in-out -6s;
}
.two {
width: 100px;
height: 100px;
margin-top: 45px;
background-color: red;
transform: rotate(45deg);
transform-origin: left top;
animation: shark 2s infinite ease-in-out -5s;
}
.three {
width: 100px;
height: 100px;
margin-top: 45px;
background-color: red;
transform: rotate(45deg);
transform-origin: left top;
animation: shark 3s infinite ease-in-out -4s;
}
.for {
width: 100px;
height: 100px;
margin-top: 45px;
background-color: red;
transform: rotate(45deg);
transform-origin: left top;
animation: shark 2s infinite ease-in-out -3s;
}
.text {
font-size: 50px;
color: white;
transform: rotate(-45deg) translate(10px, 10px);
}
@keyframes shark {
0% {
transform: rotate(30deg);
}
50% {
transform: rotate(60deg);
}
100% {
transform: rotate(30deg);
}
}
</style>
</body>
</html>