?文章來源地址http://www.zghlxwxcb.cn/news/detail-486212.html
目錄
本次實(shí)現(xiàn)效果
?目錄結(jié)構(gòu)
?index
static/css/style.css
static/js/script.js
結(jié)語：
?
前期回顧? ????
【 css動畫 】—— 把你喜歡css動畫嵌入到瀏覽器中_0.活在風(fēng)浪里的博客-CSDN博客常用酷炫動畫999+合集，代碼直接復(fù)制可用，總用你想找的，快來抱走吧，三連，停！聽鵝說，下次一定、下次一定……https://blog.csdn.net/m0_57904695/article/details/127846345?spm=1001.2014.3001.5501下一篇JS實(shí)現(xiàn)斗地主功能
本文實(shí)現(xiàn)了包含形象的卡通小人吃、睡、電腦工作的網(wǎng)頁動畫，js循環(huán)動畫，簡單的畫面設(shè)計(jì)。非常絲滑有意思，歡迎對此代碼感興趣的朋友前來下載參考。
如果大家非常好奇該段代碼所帶來的動畫效果的話，那就直接拷貝到自己電腦上，本動畫還做了屏幕適應(yīng)，不上傳了資源了，方便大家直接玩樂，如果對你有些微幫助還請收藏以備下次及時(shí)找到！
?本文直接復(fù)制可以用，
本次實(shí)現(xiàn)效果
?目錄結(jié)構(gòu)
?
?
?
?index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Eat, Sleep, Game, Repeat ___ 0.1.活在風(fēng)浪里~！</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="static/css/style.css" />
</head>
<body>
<div class="container">
<div class="lcd-light"></div>
<div class="monitor"></div>
<div class="monitor-neck"></div>
<div class="monitor-base"></div>
<div class="desk"></div>
<div class="tower"></div>
<div class="chair-back"></div>
<div class="chair-bottom"></div>
<div class="clock">
<div class="hour"></div>
<div class="minute"></div>
</div>
<div class="pillow"></div>
<div class="bed"></div>
<div class="human-wrapper">
<div class="human">
<div class="head">
<div class="eyes"></div>
</div>
<div class="torso">
<div class="l-thigh">
<div class="l-lower-leg"></div>
</div>
<div class="r-thigh">
<div class="r-lower-leg"></div>
</div>
<div class="r-upper-arm">
<div class="r-lower-arm"></div>
</div>
<div class="l-upper-arm">
<div class="l-lower-arm"></div>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/script.js"></script>
<a href="" style="display: none"></a>
</body>
</html>
static/css/style.css
body {
margin: 0;
}
.container {
background: #ffb02f;
position: relative;
width: 100%;
height: 56.25vw;
}
.container div {
background: black;
position: absolute;
transform-origin: 0 50%;
}
.container .lcd-light {
border-radius: 0;
left: 18.23vw;
top: 19.79vw;
width: 10.42vw;
height: 18.75vw;
background: radial-gradient(at center left, white, transparent 75%);
background: -moz-radial-gradient(center left, white, transparent 75%);
background: -webkit-radial-gradient(center left, white, transparent 75%);
transform: rotate(-10deg);
animation: monitorFlash 0.08s steps(2) infinite alternate;
}
.container .lcd-light::before, .container .lcd-light::after {
border: 0;
content: "";
display: block;
position: absolute;
}
.container .lcd-light::before {
border-bottom: 6.25vw solid transparent;
border-left: 10.42vw solid #ffb02f;
}
.container .lcd-light::after {
border-top: 3.65vw solid transparent;
border-left: 9.38vw solid #ffb02f;
bottom: 0;
}
.container .monitor {
border-radius: 1.04vw;
left: 16.67vw;
top: 23.96vw;
width: 11.46vw;
height: 2.08vw;
transform: rotate(80deg);
}
.container .monitor-neck {
border-radius: 0;
left: 14.58vw;
top: 35.42vw;
width: 3.65vw;
height: 1.04vw;
transform: rotate(-40deg);
}
.container .monitor-base {
border-radius: 3.13vw 3.13vw 0 0;
left: 11.46vw;
top: 35.42vw;
width: 6.25vw;
height: 3.13vw;
}
.container .desk {
border-radius: 2.08vw;
left: 8.33vw;
top: 38.02vw;
width: 18.23vw;
height: 3.13vw;
}
.container .tower {
border-radius: 1.04vw;
left: 8.33vw;
top: 42.19vw;
width: 15.63vw;
height: 9.9vw;
}
.container .tower::before {
background-color: #ffb02f;
background-image: repeating-linear-gradient(transparent, transparent 0.52vw, black 0.52vw, black 1.04vw), repeating-linear-gradient(90deg, transparent, transparent 0.52vw, black 0.52vw, black 1.04vw);
content: "";
display: block;
position: absolute;
top: 2.08vw;
right: 2.08vw;
width: 3.65vw;
height: 2.6vw;
}
.container .chair-back {
border-radius: 2.08vw;
left: 38.54vw;
top: 40.63vw;
width: 9.9vw;
height: 3.13vw;
transform: rotate(-80deg);
}
.container .chair-bottom {
border-radius: 2.08vw;
left: 29.69vw;
top: 43.23vw;
width: 9.9vw;
height: 3.13vw;
}
.container .clock {
border-radius: 50%;
left: 44.79vw;
top: 6.25vw;
width: 8.85vw;
height: 8.85vw;
background: white;
border: 1.82vw solid black;
}
.container .hour, .container .minute {
will-change: transform;
}
.container .hour {
border-radius: 1.04vw;
left: 3.65vw;
top: 1.56vw;
width: 1.56vw;
height: 3.65vw;
transform-origin: 0.78vw 2.86vw;
transform: rotate(135deg);
animation: hrHand 4s linear infinite;
}
.container .minute {
border-radius: 1.04vw;
left: 3.65vw;
top: 0.78vw;
width: 1.56vw;
height: 4.43vw;
transform-origin: 0.78vw 3.65vw;
animation: minHand 0.3333333333s linear infinite;
}
.container .pillow {
border-radius: 2.08vw;
left: 85.94vw;
top: 40.63vw;
width: 8.33vw;
height: 3.13vw;
transform: rotate(-35deg);
}
.container .bed {
border-radius: 2.08vw 2.08vw 0.52vw 0.52vw;
left: 54.69vw;
top: 43.23vw;
width: 29.69vw;
height: 5.21vw;
background: transparent;
border-top: 3.13vw solid black;
border-right: 3.13vw solid black;
border-left: 3.13vw solid black;
}
.container .human-wrapper {
transform: translate(68.75vw, 23.44vw);
will-change: transform;
animation: bodyMove 8s linear infinite;
}
.container .human {
background: transparent;
border-radius: 0;
left: 0;
top: 0;
width: 6.25vw;
height: 20.31vw;
transform-origin: 3.13vw 17.71vw;
transform: rotate(90deg);
animation: bodyRotate 8s linear infinite;
}
.container .human div {
will-change: transform;
}
.container .head {
border-radius: 50%;
left: 0;
top: 0;
width: 6.25vw;
height: 6.25vw;
transform: translate(-2.86vw, 0.78vw);
animation: headMove 8s linear infinite;
}
.container .eyes {
background: transparent;
width: 3.13vw;
height: 1.04vw;
top: 2.08vw;
left: 2.34vw;
transform-origin: 50% 50%;
transform: rotate(-55deg);
animation: eyesMove 8s linear infinite;
}
.container .eyes::before, .container .eyes::after {
background: #dc1e1e;
border-radius: 50%;
content: "";
display: inline-block;
position: absolute;
width: 1.04vw;
height: 1.04vw;
}
.container .eyes::before {
right: 0.52vw;
}
.container .torso {
border-radius: 3.13vw;
left: 1.04vw;
top: 6.77vw;
width: 4.17vw;
height: 12.5vw;
}
.container .r-upper-arm,
.container .r-lower-arm,
.container .l-upper-arm,
.container .l-lower-arm {
transform-origin: 1.82vw 1.82vw;
}
.container .l-thigh,
.container .r-thigh,
.container .l-lower-leg,
.container .r-lower-leg {
transform-origin: 2.08vw 2.08vw;
}
.container .r-upper-arm {
border-radius: 3.13vw;
left: 0.26vw;
top: 0;
width: 3.65vw;
height: 8.33vw;
transform: rotate(-40deg);
animation: RUpArmMove 8s linear infinite;
}
.container .r-lower-arm {
border-radius: 3.13vw;
left: 0;
top: 4.95vw;
width: 3.65vw;
height: 8.33vw;
transform: rotate(-25deg);
animation: RLowArmMove 8s linear infinite;
}
.container .l-upper-arm {
border-radius: 3.13vw;
left: 0.26vw;
top: 0;
width: 3.65vw;
height: 8.33vw;
transform: rotate(-40deg);
animation: LUpArmMove 8s linear infinite;
}
.container .l-lower-arm {
border-radius: 3.13vw;
left: 0;
top: 4.95vw;
width: 3.65vw;
height: 8.33vw;
transform: rotate(-25deg);
animation: LLowArmMove 8s linear infinite;
}
.container .l-thigh,
.container .r-thigh {
border-radius: 3.13vw;
left: 0;
top: 8.33vw;
width: 4.17vw;
height: 10.94vw;
transform: rotate(-5deg);
}
.container .l-thigh {
animation: LThighMove 8s linear infinite;
}
.container .r-thigh {
animation: RThighMove 8s linear infinite;
}
.container .l-lower-leg,
.container .r-lower-leg {
border-radius: 3.13vw;
left: 0;
top: 6.77vw;
width: 4.17vw;
height: 10.94vw;
transform: rotate(5deg);
}
.container .l-lower-leg {
animation: LLowerLegMove 8s linear infinite;
}
.container .r-lower-leg {
animation: RLowerLegMove 8s linear infinite;
}
.container .reset-anim {
animation: none;
}
@keyframes monitorFlash {
from {
opacity: 1;
}
to {
opacity: 0.75;
}
}
@keyframes bodyMove {
from {
transform: translate(68.75vw, 23.44vw);
}
6.9444444444% {
transform: translate(68.75vw, 23.44vw);
}
8.3333333333% {
transform: translate(68.75vw, 19.53vw);
}
15.2777777778% {
transform: translate(68.75vw, 19.53vw);
}
22.2222222222% {
transform: translate(35.16vw, 19.53vw);
}
23.6111111111% {
transform: translate(33.85vw, 20.31vw);
}
25% {
transform: translate(32.81vw, 23.96vw);
}
52.7777777778% {
transform: translate(32.81vw, 23.96vw);
}
54.1666666667% {
transform: translate(33.33vw, 23.96vw);
}
55.5555555556% {
transform: translate(34.38vw, 23.96vw);
}
56.9444444444% {
transform: translate(34.38vw, 23.96vw);
}
58.3333333333% {
transform: translate(36.46vw, 23.96vw);
}
59.7222222222% {
transform: translate(46.88vw, 19.79vw);
}
61.1111111111% {
transform: translate(48.18vw, 19.79vw);
}
62.5% {
transform: translate(55.99vw, 19.79vw);
}
63.8888888889% {
transform: translate(61.2vw, 21.35vw);
}
65.2777777778% {
transform: translate(68.75vw, 23.44vw);
}
to {
transform: translate(68.75vw, 23.44vw);
}
}
@keyframes bodyRotate {
from {
transform: rotate(90deg);
}
6.9444444444% {
transform: rotate(90deg);
}
8.3333333333% {
transform: rotate(80deg);
}
9.7222222222% {
transform: rotate(70deg);
}
11.1111111111% {
transform: rotate(35deg);
}
12.5% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-3deg);
}
22.2222222222% {
transform: rotate(-3deg);
}
23.6111111111% {
transform: rotate(-30deg);
}
25% {
transform: rotate(-15deg);
}
48.6111111111% {
transform: rotate(-15deg);
}
50% {
transform: rotate(0deg);
}
51.3888888889% {
transform: rotate(0deg);
}
52.7777777778% {
transform: rotate(7deg);
}
54.1666666667% {
transform: rotate(15deg);
}
55.5555555556% {
transform: rotate(25deg);
}
56.9444444444% {
transform: rotate(35deg);
}
58.3333333333% {
transform: rotate(40deg);
}
59.7222222222% {
transform: rotate(70deg);
}
61.1111111111% {
transform: rotate(85deg);
}
62.5% {
transform: rotate(85deg);
}
63.8888888889% {
transform: rotate(88deg);
}
65.2777777778% {
transform: rotate(90deg);
}
to {
transform: rotate(90deg);
}
}
@keyframes headMove {
from {
transform: translate(-2.86vw, 0.78vw);
}
6.9444444444% {
transform: translate(-2.86vw, 0.78vw);
}
8.3333333333% {
transform: translate(-1.3vw, 1.82vw);
}
9.7222222222% {
transform: translate(0vw, 0vw);
}
48.6111111111% {
transform: translate(0vw, 0vw);
}
50% {
transform: translate(-0.52vw, 0vw);
}
51.3888888889% {
transform: translate(0.52vw, 0vw);
}
56.9444444444% {
transform: translate(1.04vw, 0vw);
}
58.3333333333% {
transform: translate(0.52vw, 0vw);
}
59.7222222222% {
transform: translate(0vw, 0vw);
}
61.1111111111% {
transform: translate(-0.52vw, 0.26vw);
}
62.5% {
transform: translate(-0.78vw, 0.26vw);
}
63.8888888889% {
transform: translate(-1.3vw, 0.52vw);
}
65.2777777778% {
transform: translate(-2.86vw, 0.78vw);
}
to {
transform: translate(-2.86vw, 0.78vw);
}
}
@keyframes eyesMove {
from {
transform: rotate(-55deg) scale(1, 0);
}
4.1666666667% {
transform: rotate(-55deg) scale(1, 1);
}
6.9444444444% {
transform: rotate(-55deg) scale(1, 1);
}
12.5% {
transform: rotate(0deg) translate(0vw, 1.04vw);
}
13.8888888889% {
transform: rotate(0deg) translate(-1.04vw, 1.04vw);
}
15.2777777778% {
transform: rotate(0deg) translate(-1.82vw, 1.04vw);
}
48.6111111111% {
transform: rotate(0deg) translate(-1.82vw, 1.04vw);
}
50% {
transform: rotate(30deg) translate(-1.82vw, 1.04vw);
}
51.3888888889% {
transform: rotate(30deg) translate(1.04vw, 1.04vw);
}
58.3333333333% {
transform: rotate(0deg) translate(0.5vw, 1.04vw);
}
63.8888888889% {
transform: rotate(-25deg) translate(0vw, 1.04vw) scale(1, 1);
}
65.2777777778% {
transform: rotate(-55deg) translate(0vw, 0vw) scale(1, 0);
}
to {
transform: rotate(-55deg) translate(0vw, 0vw) scale(1, 0);
}
}
@keyframes RUpArmMove {
from {
transform: rotate(-40deg);
}
6.9444444444% {
transform: rotate(-40deg);
}
8.3333333333% {
transform: rotate(-30deg);
}
9.7222222222% {
transform: rotate(-45deg);
}
11.1111111111% {
transform: rotate(0deg);
}
12.5% {
transform: rotate(15deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-35deg);
}
18.0555555556% {
transform: rotate(-5deg);
}
19.4444444444% {
transform: rotate(25deg);
}
20.8333333333% {
transform: rotate(-5deg);
}
22.2222222222% {
transform: rotate(-35deg);
}
23.6111111111% {
transform: rotate(-15deg);
}
25% {
transform: rotate(65deg);
}
48.6111111111% {
transform: rotate(65deg);
}
50% {
transform: rotate(75deg);
}
51.3888888889% {
transform: rotate(50deg);
}
52.7777777778% {
transform: rotate(40deg);
}
54.1666666667% {
transform: rotate(10deg);
}
55.5555555556% {
transform: rotate(45deg);
}
56.9444444444% {
transform: rotate(-30deg);
}
58.3333333333% {
transform: rotate(-60deg);
}
59.7222222222% {
transform: rotate(-120deg);
}
61.1111111111% {
transform: rotate(-100deg);
}
62.5% {
transform: rotate(-100deg);
}
63.8888888889% {
transform: rotate(-60deg);
}
65.2777777778% {
transform: rotate(-20deg);
}
68.0555555556% {
transform: rotate(-40deg);
}
to {
transform: rotate(-40deg);
}
}
@keyframes RLowArmMove {
from {
transform: rotate(-25deg);
}
6.9444444444% {
transform: rotate(-25deg);
}
8.3333333333% {
transform: rotate(-60deg);
}
9.7222222222% {
transform: rotate(-15deg);
}
12.5% {
transform: rotate(-15deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(30deg);
}
22.2222222222% {
transform: rotate(30deg);
}
23.6111111111% {
transform: rotate(80deg);
}
25% {
transform: rotate(40deg);
}
26.3888888889% {
transform: rotate(50deg);
}
27.7777777778% {
transform: rotate(80deg);
}
29.1666666667% {
transform: rotate(50deg);
}
30.5555555556% {
transform: rotate(20deg);
}
31.9444444444% {
transform: rotate(50deg);
}
33.3333333333% {
transform: rotate(80deg);
}
34.7222222222% {
transform: rotate(50deg);
}
36.1111111111% {
transform: rotate(20deg);
}
37.5% {
transform: rotate(50deg);
}
38.8888888889% {
transform: rotate(80deg);
}
40.2777777778% {
transform: rotate(50deg);
}
41.6666666667% {
transform: rotate(20deg);
}
43.0555555556% {
transform: rotate(50deg);
}
44.4444444444% {
transform: rotate(80deg);
}
45.8333333333% {
transform: rotate(50deg);
}
47.2222222222% {
transform: rotate(20deg);
}
48.6111111111% {
transform: rotate(50deg);
}
50% {
transform: rotate(25deg);
}
51.3888888889% {
transform: rotate(20deg);
}
52.7777777778% {
transform: rotate(20deg);
}
54.1666666667% {
transform: rotate(10deg);
}
55.5555555556% {
transform: rotate(-30deg);
}
56.9444444444% {
transform: rotate(-30deg);
}
58.3333333333% {
transform: rotate(-40deg);
}
59.7222222222% {
transform: rotate(-30deg);
}
63.8888888889% {
transform: rotate(-45deg);
}
65.2777777778% {
transform: rotate(-30deg);
}
66.6666666667% {
transform: rotate(-30deg);
}
69.4444444444% {
transform: rotate(-25deg);
}
to {
transform: rotate(-25deg);
}
}
@keyframes LUpArmMove {
from {
transform: rotate(-40deg);
}
6.9444444444% {
transform: rotate(-40deg);
}
8.3333333333% {
transform: rotate(-60deg);
}
9.7222222222% {
transform: rotate(-80deg);
}
11.1111111111% {
transform: rotate(-60deg);
}
12.5% {
transform: rotate(-30deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(35deg);
}
18.0555555556% {
transform: rotate(-5deg);
}
19.4444444444% {
transform: rotate(-25deg);
}
20.8333333333% {
transform: rotate(-5deg);
}
22.2222222222% {
transform: rotate(35deg);
}
23.6111111111% {
transform: rotate(60deg);
}
25% {
transform: rotate(65deg);
}
48.6111111111% {
transform: rotate(65deg);
}
50% {
transform: rotate(15deg);
}
51.3888888889% {
transform: rotate(5deg);
}
52.7777777778% {
transform: rotate(0deg);
}
58.3333333333% {
transform: rotate(-80deg);
}
59.7222222222% {
transform: rotate(-45deg);
}
65.2777777778% {
transform: rotate(30deg);
}
68.0555555556% {
transform: rotate(-40deg);
}
to {
transform: rotate(-40deg);
}
}
@keyframes LLowArmMove {
from {
transform: rotate(-25deg);
}
6.9444444444% {
transform: rotate(-25deg);
}
8.3333333333% {
transform: rotate(-60deg);
}
9.7222222222% {
transform: rotate(-15deg);
}
12.5% {
transform: rotate(-15deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(30deg);
}
23.6111111111% {
transform: rotate(30deg);
}
25% {
transform: rotate(40deg);
}
26.3888888889% {
transform: rotate(50deg);
}
27.7777777778% {
transform: rotate(20deg);
}
29.1666666667% {
transform: rotate(50deg);
}
30.5555555556% {
transform: rotate(80deg);
}
31.9444444444% {
transform: rotate(50deg);
}
33.3333333333% {
transform: rotate(20deg);
}
34.7222222222% {
transform: rotate(50deg);
}
36.1111111111% {
transform: rotate(80deg);
}
37.5% {
transform: rotate(50deg);
}
38.8888888889% {
transform: rotate(20deg);
}
40.2777777778% {
transform: rotate(50deg);
}
41.6666666667% {
transform: rotate(80deg);
}
43.0555555556% {
transform: rotate(50deg);
}
44.4444444444% {
transform: rotate(20deg);
}
45.8333333333% {
transform: rotate(50deg);
}
47.2222222222% {
transform: rotate(70deg);
}
48.6111111111% {
transform: rotate(75deg);
}
50% {
transform: rotate(70deg);
}
52.7777777778% {
transform: rotate(-15deg);
}
58.3333333333% {
transform: rotate(-85deg);
}
59.7222222222% {
transform: rotate(-90deg);
}
66.6666666667% {
transform: rotate(-25deg);
}
to {
transform: rotate(-25deg);
}
}
@keyframes RThighMove {
from {
transform: rotate(-5deg);
}
6.9444444444% {
transform: rotate(-5deg);
}
8.3333333333% {
transform: rotate(-30deg);
}
9.7222222222% {
transform: rotate(-80deg);
}
11.1111111111% {
transform: rotate(-30deg);
}
12.5% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-15deg);
}
18.0555555556% {
transform: rotate(15deg);
}
19.4444444444% {
transform: rotate(30deg);
}
20.8333333333% {
transform: rotate(15deg);
}
22.2222222222% {
transform: rotate(30deg);
}
23.6111111111% {
transform: rotate(70deg);
}
25% {
transform: rotate(90deg);
}
52.7777777778% {
transform: rotate(90deg);
height: 10.94vw;
}
54.1666666667% {
transform: rotate(0deg);
height: 7.29vw;
}
58.3333333333% {
transform: rotate(0deg);
height: 7.29vw;
}
59.7222222222% {
transform: rotate(-50deg);
height: 10.94vw;
}
61.1111111111% {
transform: rotate(-90deg);
}
62.5% {
transform: rotate(-60deg);
}
63.8888888889% {
transform: rotate(-30deg);
}
65.2777777778% {
transform: rotate(-5deg);
}
to {
transform: 3rotate -5deg;
}
}
@keyframes RLowerLegMove {
from {
transform: rotate(5deg);
}
6.9444444444% {
transform: rotate(5deg);
}
8.3333333333% {
transform: rotate(30deg);
}
9.7222222222% {
transform: rotate(15deg);
}
11.1111111111% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-15deg);
}
22.2222222222% {
transform: rotate(-15deg);
}
23.6111111111% {
transform: rotate(-25deg);
}
25% {
transform: rotate(-70deg);
}
50% {
transform: rotate(-70deg);
}
51.3888888889% {
transform: rotate(-80deg);
}
52.7777777778% {
transform: rotate(-70deg) translateY(0);
}
54.1666666667% {
transform: rotate(-30deg) translateY(-3.65vw);
}
55.5555555556% {
transform: rotate(0deg) translateY(-3.65vw);
}
56.9444444444% {
transform: rotate(5deg) translateY(-3.65vw);
}
58.3333333333% {
transform: rotate(10deg) translateY(-3.65vw);
}
59.7222222222% {
transform: rotate(60deg) translateY(0);
}
61.1111111111% {
transform: rotate(30deg);
}
62.5% {
transform: rotate(60deg);
}
63.8888888889% {
transform: rotate(30deg);
}
65.2777777778% {
transform: rotate(5deg);
}
to {
transform: rotate(5deg);
}
}
@keyframes LThighMove {
from {
transform: rotate(-5deg);
}
6.9444444444% {
transform: rotate(-5deg);
}
8.3333333333% {
transform: rotate(-30deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(30deg);
}
18.0555555556% {
transform: rotate(15deg);
}
19.4444444444% {
transform: rotate(-15deg);
}
20.8333333333% {
transform: rotate(15deg);
}
22.2222222222% {
transform: rotate(-15deg);
}
23.6111111111% {
transform: rotate(50deg);
}
25% {
transform: rotate(90deg);
}
48.6111111111% {
transform: rotate(90deg);
height: 10.94vw;
}
50% {
transform: rotate(0deg);
height: 6.77vw;
}
51.3888888889% {
transform: rotate(-5deg);
height: 6.77vw;
}
52.7777777778% {
transform: rotate(-10deg);
height: 6.77vw;
}
54.1666666667% {
transform: rotate(-70deg);
height: 6.77vw;
}
58.3333333333% {
transform: rotate(-40deg);
height: 6.77vw;
}
59.7222222222% {
transform: rotate(-110deg);
height: 10.94vw;
}
61.1111111111% {
transform: rotate(-190deg);
}
62.5% {
transform: rotate(-50deg);
}
63.8888888889% {
transform: rotate(-5deg);
}
to {
transform: rotate(-5deg);
}
}
@keyframes LLowerLegMove {
from {
transform: rotate(5deg);
}
6.9444444444% {
transform: rotate(5deg);
}
8.3333333333% {
transform: rotate(30deg);
}
12.5% {
transform: rotate(30deg);
}
13.8888888889% {
transform: rotate(0deg);
}
15.2777777778% {
transform: rotate(0deg);
}
16.6666666667% {
transform: rotate(-30deg);
}
18.0555555556% {
transform: rotate(-15deg);
}
22.2222222222% {
transform: rotate(-15deg);
}
23.6111111111% {
transform: rotate(-50deg);
}
25% {
transform: rotate(-90deg);
}
48.6111111111% {
transform: rotate(-90deg) translateY(0);
}
50% {
transform: rotate(0deg) translateY(-4.95vw);
}
51.3888888889% {
transform: rotate(0deg) translateY(-4.95vw);
}
52.7777777778% {
transform: rotate(30deg) translateY(-4.95vw);
}
54.1666666667% {
transform: rotate(35deg) translateY(-4.95vw);
}
55.5555555556% {
transform: rotate(30deg) translateY(-4.95vw);
}
56.9444444444% {
transform: rotate(0deg) translateY(-4.95vw);
}
58.3333333333% {
transform: rotate(5deg) translateY(-4.17vw);
}
59.7222222222% {
transform: rotate(45deg) translateY(0);
}
61.1111111111% {
transform: rotate(145deg);
}
62.5% {
transform: rotate(55deg);
}
63.8888888889% {
transform: rotate(25deg);
}
65.2777777778% {
transform: rotate(5deg);
}
to {
transform: rotate(5deg);
}
}
@keyframes hrHand {
from {
transform: rotate(135deg);
}
to {
transform: rotate(495deg);
}
}
@keyframes minHand {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1turn);
}
}static/js/script.js
/* For restaring animations on window resize */
const animParts = [
"lcd-light",
"hour",
"minute",
"human-wrapper",
"human",
"head",
"eyes",
"r-upper-arm",
"r-lower-arm",
"l-upper-arm",
"l-lower-arm",
"l-thigh",
"r-thigh",
"l-lower-leg",
"r-lower-leg"
];
function restartAnims(animClassArray, resetClass) {
for (let i = 0; i < animClassArray.length; ++i) {
// get animated elements and reset animations
let animClass = document.getElementsByClassName(animClassArray[i])[0];
animClass.className += " " + resetClass;
// reflow
let animClassW = animClass.offsetWidth;
animClass.offsetWidth = animClassW;
// animation reset class removed
animClass.className = animClassArray[i];
}
}
window.addEventListener("resize", function(){
restartAnims(animParts, "reset-anim");
});結(jié)語：
本文就要結(jié)束了，感謝大家的閱讀！文章來源：http://www.zghlxwxcb.cn/news/detail-486212.html
?
到了這里，關(guān)于卡通動畫項(xiàng)目 —— 寫代碼 —— 睡覺 —— 絲滑如德芙的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
