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; } bod.........完整代码请登录后点击上方下载按钮下载查看
网友评论0