【W(wǎng)eb前端】刷到此視頻的人每天都很快樂！中秋節(jié)當(dāng)天加倍快樂??！
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0">
? ? <title>中秋快樂</title>
</head>
<style>
? ? body {
? ? ? ? background: linear-gradient(to right, #c0c0aa 0%, #7bdde4 100%);
? ? }
? ?
? ? .mid {
? ? ? ? transform-style: preserve-3d;
? ? ? ? animation: roll 30s 0s linear infinite;
? ? }
? ?
? ? .mid>.ball {
? ? ? ? width: 300px;
? ? ? ? height: 300px;
? ? ? ? margin-top: 200px;
? ? ? ? left: 50%;
? ? ? ? margin-left: -150px;
? ? ? ? border: 0.4px solid rgb(83, 89, 92, 0.3);
? ? ? ? border-radius: 50%;
? ? ? ? transform-style: preserve-3d;
? ? ? ? transform: rotateY(0deg);
? ? ? ? position: absolute;
? ? ? ? animation: attle 10s 0s linear infinite;
? ? }
? ?
? ? .mid>div:nth-child(1) {
? ? ? ? transform: rotateY(180deg);
? ? }
? ?
? ? .mid>div:nth-child(2) {
? ? ? ? transform: rotateY(170deg);
? ? }
? ?
? ? .mid>div:nth-child(3) {
? ? ? ? transform: rotateY(160deg);
? ? }
? ?
? ? .mid>div:nth-child(4) {
? ? ? ? transform: rotateY(150deg);
? ? }
? ?
? ? .mid>div:nth-child(5) {
? ? ? ? transform: rotateY(140deg);
? ? }
? ?
? ? .mid>div:nth-child(6) {
? ? ? ? transform: rotateY(130deg);
? ? }
? ?
? ? .mid>div:nth-child(7) {
? ? ? ? transform: rotateY(120deg);
? ? }
? ?
? ? .mid>div:nth-child(8) {
? ? ? ? transform: rotateY(110deg);
? ? }
? ?
? ? .mid>div:nth-child(9) {
? ? ? ? transform: rotateY(100deg);
? ? }
? ?
? ? .mid>div:nth-child(10) {
? ? ? ? transform: rotateY(90deg);
? ? }
? ?
? ? .mid>div:nth-child(11) {
? ? ? ? transform: rotateY(80deg);
? ? }
? ?
? ? .mid>div:nth-child(12) {
? ? ? ? transform: rotateY(70deg);
? ? }
? ?
? ? .mid>div:nth-child(13) {
? ? ? ? transform: rotateY(60deg);
? ? }
? ?
? ? .mid>div:nth-child(14) {
? ? ? ? transform: rotateY(50deg);
? ? }
? ?
? ? .mid>div:nth-child(15) {
? ? ? ? transform: rotateY(40deg);
? ? }
? ?
? ? .mid>div:nth-child(16) {
? ? ? ? transform: rotateY(30deg);
? ? }
? ?
? ? .mid>div:nth-child(17) {
? ? ? ? transform: rotateY(20deg);
? ? }
? ?
? ? .mid>div:nth-child(18) {
? ? ? ? transform: rotateY(10deg);
? ? }
? ?
? ? @keyframes roll {
? ? ? ? 0% {
? ? ? ? ? ? -webkit-transform: rotateZ(-30deg) rotateY(0deg);
? ? ? ? ? ? -moz-transform: rotateZ(-30deg) rotateY(0deg);
? ? ? ? ? ? -ms-transform: rotateZ(-30deg) rotateY(0deg);
? ? ? ? ? ? -o-transform: rotateZ(-30deg) rotateY(0deg);
? ? ? ? ? ? transform: rotateZ(-30deg) rotateY(0deg);
? ? ? ? }
? ? ? ? 100% {
? ? ? ? ? ? -webkit-transform: rotateZ(-30deg) rotateY(360deg);
? ? ? ? ? ? -moz-transform: rotateZ(-30deg) rotateY(360deg);
? ? ? ? ? ? -ms-transform: rotateZ(-30deg) rotateY(360deg);
? ? ? ? ? ? -o-transform: rotateZ(-30deg) rotateY(360deg);
? ? ? ? ? ? transform: rotateZ(-30deg) rotateY(360deg);
? ? ? ? }
? ? }
? ?
? ? @keyframes roll2 {
? ? ? ? 0% {
? ? ? ? ? ? -webkit-transform: rotateY(-30deg) rotate(0deg);
? ? ? ? ? ? -moz-transform: rotateY(-30deg) rotate(0deg);
? ? ? ? ? ? -ms-transform: rotateY(-30deg) rotate(0deg);
? ? ? ? ? ? -o-transform: rotateY(-30deg) rotate(0deg);
? ? ? ? ? ? transform: rotatY(-30deg) rotate(0deg);
? ? ? ? }
? ? ? ? 100% {
? ? ? ? ? ? -webkit-transform: rotateY(-30deg) rotate(-360deg);
? ? ? ? ? ? -moz-transform: rotateY(-30deg) rotate(3-60deg);
? ? ? ? ? ? -ms-transform: rotateY(-30deg) rotate(-360deg);
? ? ? ? ? ? -o-transform: rotateY(-30deg) rotate(-360deg);
? ? ? ? ? ? transform: rotateY(-30deg) rotate(-360deg);
? ? ? ? }
? ? }
? ?
? ? .hock {
? ? ? ? width: 180px;
? ? ? ? height: 180px;
? ? ? ? margin: 0 auto;
? ? ? ? top: 150px;
? ? ? ? left: 10px;
? ? ? ? border: 0.5px solid rgb(83, 89, 92, 0.3);
? ? ? ? border-radius: 50%;
? ? ? ? /* 形成3d空間 */
? ? ? ? transform-style: preserve-3d;
? ? ? ? /* 便于觀察 */
? ? ? ? transform: rotateX(75deg) rotateY(160deg);
? ? ? ? padding: 100px;
? ? ? ? border: 10px solid rgb(239, 200, 5);
? ? ? ? border-radius: 100%;
? ? ? ? /* 加點陰影 */
? ? ? ? box-shadow: 10px 0px 420px #000;
? ? ? ? position: relative;
? ? }
? ?
? ? @keyframes attle {
? ? ? ? 0% {
? ? ? ? ? ? background: #eae4e9;
? ? ? ? }
? ? ? ? 13.33% {
? ? ? ? ? ? background: #fff1e6;
? ? ? ? }
? ? ? ? 25% {
? ? ? ? ? ? background: #fde2e4;
? ? ? ? }
? ? ? ? 38.33% {
? ? ? ? ? ? background: #fad2e1;
? ? ? ? }
? ? ? ? 50% {
? ? ? ? ? ? background: #e2ece9;
? ? ? ? }
? ? ? ? 68.33% {
? ? ? ? ? ? background: #e6e1be;
? ? ? ? }
? ? ? ? 75% {
? ? ? ? ? ? background: #f8ebbb;
? ? ? ? }
? ? ? ? 83.33% {
? ? ? ? ? ? background: #dfe7fd;
? ? ? ? }
? ? ? ? 100% {
? ? ? ? ? ? background: #cddafd;
? ? ? ? }
? ? }
? ?
? ? .box1 {
? ? ? ? font-family: 華文彩云;
? ? ? ? font-size: 60px;
? ? ? ? color: rgb(173, 126, 9);
? ? ? ? text-align: center;
? ? }
? ?
? ? .moon {
? ? ? ? position: absolute;
? ? ? ? left: 660px;
? ? ? ? top: 30px;
? ? ? ? width: 100px;
? ? ? ? height: 100px;
? ? ? ? background-color: transparent;
? ? ? ? border-radius: 50%;
? ? ? ? box-shadow: 20px 10px 0px 0px #FFFF00;
? ? ? ? margin-left: -500px;
? ? }
</style>
<body>
? ? <div>
? ? ? ? <div class="moon"> </div>
? ? ? ? <p class="box1">中秋快樂，??</p>
? ? ? ? <div class="mid">
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="ball"></div>
? ? ? ? ? ? <div class="hock"> </div>
? ? ? ? </div>
? ? </div>
</body>
</html>
