原文地址:https://segmentfault.com/a/1190000015484852
感想:monster中边框角、上下动画、旋转动画、左右动画,眼睛中transform:scaleY(n);
HTML code:
<!-- monster包含其body和eyes --> <div class="monster"> <span class="body"></span> <span class="eyes"></span> </div>
CSS code:
html, body { margin: 0; padding: 0; height: 100vh; background-color: black; } /* 设置前景色 */ .monster{ width: 100vw; height: 50vh; background-color: lightcyan; } /* 画出monster的body */ .monster{ position: relative; overflow: hidden; } .body{ position: absolute; left: -2vmin; bottom: calc(-1 * 32vmin / 2 - 4vmin); width: 32vmin; height: 32vmin; border-radius: 43% 40% 43% 40%; background-color: teal; /* 设置动画 */ animation: bounce 1s infinite alternate, wave 3s linear infinite, wander 5s linear infinite alternate; } /* 身体上下跳的动画 */ @keyframes bounce{ to{ bottom: calc(-1 * 32vmin / 2 - 2vmin); } } /* 身体转动的动画 */ @keyframes wave { to { transform: rotate(360deg); } } /* monster左右移动*/ @keyframes wander { to { left: calc(100% - 32vmin + 2vmin); } } /* monster的eyes容器 */ .eyes{ width: 24vmin; height: 5vmin; position: absolute; left: calc(32vmin - 24vmin - 2vmin); bottom: 2vmin; animation: wander 5s linear infinite alternate; } /* 用eyes的两个伪元素画出monster的eyes */ .eyes::before, .eyes::after { content: ''; position: absolute; box-sizing: border-box; width: 5vmin; height: 5vmin; border: 1.25vmin solid white; border-radius: 50%; /* 眼睛眨眼 */ animation: blink 3s infinite linear; } @keyframes blink { 4%, 10%, 34%, 40% { transform: scaleY(1); } 7%, 37% { transform: scaleY(0); } } .eyes::before { left: 4vmin; } .eyes::after { right: 4vmin; }