动画效果 柱子会上下跳动
html
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Primary
Color Bounce</title> <meta name="viewport" content="width=device-width,
initial-scale=1"> <link rel="stylesheet" href="style.css"> </head> <body> <div
class="emojis"> <div>??</div> <div>??</div> <div>??</div> <div>??</div>
<div>??</div> <div>??</div> <div>??</div> <div>??</div> <div>??</div> </div>
<div class="palette"> <div></div> <div></div> <div></div> <div></div>
<div></div> <div></div> <div></div> <div></div> <div></div> </div> </body>
</html>
css
:root { --size: 7vmin; --speed: 0.9s; --ease-emojis: cubic-bezier(0.125,
0.185, 0.55, 1.775); --ease-bars: cubic-bezier(0.105, 0.165, 0.55, 1.575);
--red: #F44336; --blue: #1E88E5; --yellow: #FDD835; } * { box-sizing:
border-box; } body { display: flex; flex-direction: column; align-items:
center; justify-content: center; padding-top: calc(var(--size) * 4); height:
100vh; } .palette, .emojis { display: flex; } .palette div, .emojis div {
margin: 0 1vmin; width: var(--size); height: var(--size); } .palette {
position: relative; } .palette:after { content: ''; position: absolute; top:
100%; width: 100%; height: var(--size); background: white; z-index: 2; }
.emojis div { position: relative; font-size: calc(var(--size) / 1.5);
text-align: center; animation: jump calc(var(--speed) * 2) var(--ease-emojis)
infinite; } .palette div { transform-origin: 50% 100%; animation: stretch
var(--speed) var(--ease-bars) infinite; } .palette div:nth-child(1n) {
background: var(--red); } .palette div:nth-child(2n) { background: var(--blue);
} .palette div:nth-child(3n) { background: var(--yellow); } .palette
div:nth-child(1), .emojis div:nth-child(1) { animation-delay: 0.095s; }
.palette div:nth-child(2), .emojis div:nth-child(2) { animation-delay: 0.19s; }
.palette div:nth-child(3), .emojis div:nth-child(3) { animation-delay: 0.285s;
} .palette div:nth-child(4), .emojis div:nth-child(4) { animation-delay: 0.38s;
} .palette div:nth-child(5), .emojis div:nth-child(5) { animation-delay:
0.475s; } .palette div:nth-child(6), .emojis div:nth-child(6) {
animation-delay: 0.57s; } .palette div:nth-child(7), .emojis div:nth-child(7) {
animation-delay: 0.665s; } .palette div:nth-child(8), .emojis div:nth-child(8)
{ animation-delay: 0.76s; } .palette div:nth-child(9), .emojis div:nth-child(9)
{ animation-delay: 0.855s; } @keyframes stretch { 50% { transform: scaleY(4); }
} @keyframes jump { 35% { transform: translateY(calc(var(--size) * -5))
rotate(15deg); } 50% { transform: translateY(0) rotate(0); } 85% { transform:
translateY(calc(var(--size) * -5)) rotate(-25deg); } }

技术
©2019-2020 Toolsou All rights reserved,
Unity-Demo实例之 ✨ 实现UI-背包装备拖拽功能计算机网络---计算机网络基本概念(协议、体系)某东14薪变16薪,是诚意还是套路?让人意想不到的Python之樱花树(turtle库的华丽样式)java四大函数式接口(重点,简单)06【若依框架解读】数据范围过滤--太牛了Unity3D之UGUI基础--画布的三种模式os模块的简单使用html写樱花树,写樱花树的作文