css3如何向上_Css3向上滚动动画

书写css代码。

.shape { position: absolute; width: 66px; height: 66px; -webkit-animation: circle 5s linear infinite; animation: circle 5s linear infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1); }

.shape::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 360px; -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation: inherit; animation: inherit; -webkit-animation-name: shadow; animation-name: shadow; }

.circle { top: calc(100vh - 66px); left: calc(25vw - 66px); background: linear-gradient(45deg, #49E7C2 0%, #7AEC90 100%); border-radius: 100%; }

.circle::after { background: linear-gradient(-180deg, rgba(73, 231, 194, 0.4) 0%, rgba(28, 28, 28, 0) 100%); }

.rectangle { top: calc(100vh - 66px); left: calc(50vw - 66px); background: linear-gradient(45deg, #EA9F45 0%, #F4EE51 100%); -webkit-animation-delay: 2s; animation-delay: 2s; }

.rectangle::after { background: linear-gradient(-180deg, rgba(234, 159, 69, 0.3) 0%, rgba(28, 28, 28, 0) 100%); top: 100%; }

.triangle { top: calc(100vh - 66px); left: calc(75vw - 66px); background: linear-gradient(45deg, #22A0F9 0%, #71FDC8 100%); -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0); clip-path: polygon(0 0, 100% 100%, 100% 0); -webkit-animation-delay: 1s; animation-delay: 1s; }

.triangle::after { background: linear-gradient(-180deg, rgba(34, 223, 249, 0.4) 0%, rgba(28, 28, 28, 0) 100%); top: 0; will-change: transform; }