css实现锥形纸条下拉动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现锥形纸条下拉动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { font-size: 0; overflow: hidden; width: 100%; height: 100%; } .center { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .view { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .plane, .part { width: 0; height: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @-webkit-keyframes main-rotation { 0% { -webkit-transform: rotateX(60deg) rotateZ(0deg); transform: rotateX(60deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(60deg) rotateZ(360deg); transform: rotateX(60deg) rotateZ(360deg); } } @keyframes main-rotation { 0% { -webkit-transform: rotateX(60deg) rotateZ(0deg); transform: rotateX(60deg) rotateZ(0deg); } 100% { -webkit-transform: rotateX(60deg) rotateZ(360deg); transform: rotateX(60deg) rotateZ(360deg); } } .view { background: #111; -webkit-perspective: 800; perspective: 800; font-size: 40px; } .plane.main, .main.part { position: absolute; margin: auto; left: 0; right: 0; top: -1em; width: 1em; height: 1em; -webkit-transition: 0.3s; transition: 0.3s; } .view:hover .plane.main, .view:hover .main.part { -webkit-transform: rotateX(30deg); transform: rotateX(30deg); } .part { position: absolute; width: 0.5em; height: 1em; -webkit-animation: magic 1s alternate infinite; animation: magic 1s alternate infinite; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transform: translateX(50%) skew(0, -10deg) rotateY(20deg) skew(0, 10deg) translateX(50%); transform: translateX(50%) skew(0, -10deg) rotateY(20deg) skew(0, 10deg) translateX(50%); -webkit-transition: 1s ease--in-out; transition: 1s ease--in-out; } .part::before, .part::after { content: ""; display: block; position: absolute; left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .part::after { background: -webkit-gradient(linear, left bottom, left top, from(#48c8a3), to(#278369)); background: linear-gradient(0deg, #48c8a3, #278369); } .part::before { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); background: -webkit-gradient(linear, left bottom, left top, from(#1b5c49), to(#10342a)); background: linear-gradient(0deg, #1b5c49, #10342a); } .part:empty::before { border-top-left-radius: 0.5em; border-bottom-left-radius: 0.5em; } .part:empty::after { border-top-right-radius: 0.5em; border-bottom-right-radius: 0.5em; } @-webkit-keyframes magic { 0% { -webkit-transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); } 100% { -webkit-transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); } } @keyframes magic { 0% { -webkit-transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); transform: translateX(100%) scale(0.95, 1) skew(0, -10deg) rotateY(20deg) skew(0, 10deg); } 100% { -webkit-transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); transform: translateX(100%) scale(0.99, 1) skew(0, -1deg) rotateY(16deg) skew(0, 1deg); } } </style> </head> <body> <div class="view"> <div class="plane main"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> <div class="part"> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0