css实现滑板车滑动旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现滑板车滑动旋转动画效果代码,鼠标点击滑板车看效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(to right, #e1eec3, #f05053); overflow: hidden; } body h1 { text-transform: uppercase; font-size: 12px; color: #fff; opacity: 0.25; margin-top: 400px; } body .linewrap { position: absolute; width: 110vw; height: 110vh; top: -5vh; left: 20vw; transform: skewX(-50deg); z-index: -1; } body .line { width: 1.5px; height: 100px; background: linear-gradient(to bottom, transparent, #fff); position: absolute; top: -50vh; left: 0vw; -webkit-animation: lines 3s linear infinite; animation: lines 3s linear infinite; transform: scaleY(0.25) translateY(110vh); opacity: 0.5; } @-webkit-keyframes lines { to { transform: scaleY(1) translateY(150vh); } } @keyframes lines { to { transform: scaleY(1) translateY(150vh); } } body .line:nth-of-type(1) { left: 5vw; height: 10px; } body .line:nth-of-type(2) { left: 10vw; height: 20px; } body .line:nth-of-type(3) { left: 15vw; height: 30px; } body .line:nth-of-type(4) { left: 20vw; height: 40px; } body .line:nth-of-type(5) { left: 25vw; height: 50px; } body .line:nth-of-type(6) { left: 30vw; height: 60px; } body .line:nth-of-type(7) { left: 35vw; height: 70px; } body .line:nth-of-type(8) { left: 40vw; height: 80px; } body .line:nth-of-type(9) { left: 45vw; height: 90px; } body .line:nth-of-type(10) { left: 50vw; height: 100px; } body .line:nth-of-type(11) { left: 55vw; height: 110px; } body .line:nth-of-type(12) { left: 60vw; height: 120px; } body .line:nth-of-type(13) { left: 65vw; height: 130px; } body .line:nth-of-type(14) { left: 70vw; height: 140px; } body .line:nth-of-type(15) { left: 75vw; height: 150px; } body .line:nth-of-type(16) { left: 80vw; height: 160px; } body .line:nth-of-type(17) { left: 85vw; height: 170px; } body .line:nth-of-type(18) { left: 90vw; height: 180px; } body .line:nth-of-type(19) { left: 95vw; height: 190px; } body .line:nth-of-type(20) { left: 100vw; height: 200px; } body .line:nth-of-type(1) { -webkit-animation-delay: -8s; animation-delay: -8s; } body .line:nth-of-type(2) { -webkit-animation-delay: -6s; animation-delay: -6s; } body .line:nth-of-type(3) { -webkit-animation-delay: -5s; animation-delay: -5s; } body .line:nth-of-type(4) { -webkit-animation-delay: -7s; animation-delay: -7s; } body .line:nth-of-type(5) { -webkit-animation-delay: -5s; animation-delay: -5s; } body .line:nth-of-type(6) { -webkit-animation-delay: -9s; animation-delay: -9s; } body .line:nth-of-type(7) { -webkit-animation-delay: -7s; animation-delay: -7s; } body .line:nth-of-type(8) { -webkit-animation-delay: -8s; animation-delay: -8s; } body .line:nth-of-type(9) { -webkit-animation-delay: -7s; animation-delay: -7s; } body .line:nth-of-type(10) { -webkit-animation-delay: -6s; animation-delay: -6s; } body input { position: absolute; width: 90px; height: 30px; z-index: 9; opacity: 0; } body .threesix { left: calc(50% + 10px); top: calc(50% - 70px); } body .shovit { left: calc(50% - 20px); top: calc(50% - 40px); } body .kickflip { left: calc(50% - 60px); top: calc(50% - 10px); } body .ollie { left: calc(50% - 130px); top: calc(50% + 55px); height: 60px; width: 100px; } body .hardflip { left: calc(50% - 90px); top: calc(50% + 25px); } body .manual { left: calc(50% + 40px); top: calc(50% - 120px); height: 50px; } body input:checked { pointer-events: none; } body input:checked ~ .outer .wrap { -webkit-animation: ollie 0.5s linear 1 forwards; animation: ollie 0.5s linear 1 forwards; } body input:checked ~ .outer .wrap:after { -webkit-animation: shadow 0.5s linear 1 forwards; animation: shadow 0.5s linear 1 forwards; } @-webkit-keyframes shadow { 0% { transform: translateZ(-80px) translateX(20px) scale(0.85); } 5% { transform: translateZ(-105px) translateX(20px) scale(0.85); } 50% { transform: translateZ(-230px) translateX(20px) scale(0.65); } 75% { transform: translateZ(-105px) translateX(20px) scale(0.85); } 100% { transform: translateZ(-80px) translateX(20px) scale(0.85); } } @keyframes shadow { 0% { transform: translateZ(-80px) translateX(20px) scale(0.85); } 5% { transform: translateZ(-105px) translateX(20px) scale(0.85); } 50% { transform: translateZ(-230px) translateX(20px) scale(0.65); } 75% { transform: translateZ(-105px) translateX(20px) scale(0.85); } 100% { transform: translateZ(-80px) translateX(20px) scale(0.85); } } @-webkit-keyframes ollie { 0% { transform: rotateX(45deg) rotate(-50deg); } 5% { transform: rotateY(10deg) rotateX(25deg) rotate(-50deg) translateZ(25px); } 50% { transform: rotateX(45deg) rotate(-50deg) translateZ(200px); } 75% { transform: rotateX(55deg) rotate(-50deg) translateZ(25px); } 100% { transform: rotateX(45deg) rotate(-50deg); } } @keyframes ollie { 0% { transform: rotateX(45deg) rotate(-50deg); } 5% { transform: rotateY(10deg) rotateX(25deg) rotate(-50deg) translateZ(25px); } 50% { transform: rotateX(45deg) rotate(-50deg) translateZ(200px); } 75% { transform: rotateX(55deg) rotate(-50deg) translateZ(25px); } 100% { transform: rotateX(45deg) rotate(-50deg); } } body .manual:checked ~ .outer .wrap { -webkit-animation: none; animation: none; } body .manual:checked ~ .outer .wrap .board { -webkit-animation: manual 1s ease-in-out 1 forwards; animation: manual 1s ease-in-out 1 forwards; transform-origin: right; } @-webkit-keyframes manual { 0% { transform: rotateY(0deg); } 20% { transform: rotateY(20deg); } 30% { transform: rotateY(21deg); } 40% { transform: rotateY(20deg); } 60% { transform: rotateY(21deg); } 70% { transform: rotateY(20deg); } 100% { transform: rotateY(0deg); } } @keyframes manual { 0% { transform: rotateY(0deg); } 20% { transform: rotateY(20deg); } 30% { transform: rotateY(21deg); } 40% { transform: rotateY(20deg); } 60% { transform: rotateY(21deg); } 70% { transform: rotateY(20deg); } 100% { transform: rotateY(0deg); } } body .manual:checked ~ .outer .wrap:after { -webkit-animation: none; animation: none; } body .threesix:checked ~ .outer .wrap .board { -webkit-animation: threesixflip 0.5s linear 1 forwards; animation: threesixflip 0.5s linear 1 forwards; } body .threesix:checked ~ .outer .wrap .board .wheel { -webkit-animation: wheelspin 0.5s ease-in-out 1 forwards; animation: wheelspin 0.5s ease-in-out 1 forwards; } body .threesix:checked ~ .outer .wrap .board .wheel:before { -webkit-animation: wheelspin 0.5s ease-in-out 1 forwards; animation: wheelspin 0.5s ease-in-out 1 forwards; } @-webkit-keyframes threesixflip { from { transform: rotateX(0deg) rotate(0deg); } to { transform: rotateX(-360deg) rotate(-360deg); } } @keyframes threesixflip { from { transform: rotateX(0deg) rotate(0deg); } to { transform: rotateX(-360deg) rotate(-360deg); } } body .shovit:checked ~ .outer .wrap .board { -webkit-animation: shovit 0.5s ease-in-out 1 forwards; animation: shovit 0.5s ease-in-out 1 forwards; } @-webkit-keyframes shovit { to { transform: rotate(-360deg); } } @keyframes shovit { to { transform: rotate(-360deg); } } body .kickflip:checked ~ .outer .wrap .board { -webkit-animation: kickflip 0.5s ease-in-out 1 forwards; animation: kickflip 0.5s ease-in-out 1 forwards; } body .kickflip:checked ~ .outer .wrap .board .wheel { -webkit-animation: wheelspin 0.5s ease-in-out 1 forwards; animation: wheelspin 0.5s ease-in-out 1 forwards; } body .kickflip:checked ~ .outer .wrap .board .wheel:before { -webkit-animation: wheelspin 0.5s ease-in-out 1 forwards; animation: wheelspin 0.5s ease-in-out 1 forwards; } @-webkit-keyframes wheelspin { 0% { box-shadow: -4px -5px 0 0 #1096f1, -8px -10px 0 0 #1096f1, -11px -15px 0 0 #1096f1; } 50% { box-shadow: 0px 0px 0 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0