css实现折叠盒子打开关闭效果代码
代码语言:html
所属分类:动画
代码描述:css实现折叠盒子打开关闭效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { background-color: #111; color: #fff; min-height: 100vh; display: flex; justify-content: center; align-items: center; perspective: 1000px; perspective-origin: 50% calc(50% - 200px); } .counterturn { position: absolute; transform-style: preserve-3d; -webkit-animation: counterturnTransform 14s infinite linear; animation: counterturnTransform 14s infinite linear; } @-webkit-keyframes counterturnTransform { from { transform: rotateY(0) translateY(66px); } to { transform: rotateY(-360deg) translateY(66px); } } @keyframes counterturnTransform { from { transform: rotateY(0) translateY(66px); } to { transform: rotateY(-360deg) translateY(66px); } } .fold { position: absolute; transform-style: preserve-3d; -webkit-animation: foldTransform 2s infinite linear; animation: foldTransform 2s infinite linear; } @-webkit-keyframes foldTransform { from { transform: rotateY(0); } to { transform: rotateY(90deg); } } @keyframes foldTransform { from { transform: rotateY(0); } to { transform: rotateY(90deg); } } .topWrpper { position: absolute; top: -150px; width: 200px; height: 300px; transform-origin: left; transform-style: preserve-3d; -webkit-animation: topFlip 2s infinite ease-in, topLeft 2s infinite ease-in-out; animation: topFlip 2s infinite ease-in, topLeft 2s infinite ease-in-out; } @-webkit-keyframes topFlip { 0% { transform: rotateX(90deg) translateZ(30px); } 80%, 100% { transform: rotateX(90deg) translateZ(30px) rotateY(-180deg); } } @keyframes topFlip { 0% { transform: rotateX(90deg) translateZ(30px); } 80%, 100% { transform: rotateX(90deg) translateZ(30px) rotateY(-180deg); } } @-webkit-keyframes topLeft { 0% { left: 0; } 100% { left: 100px; } } @keyframes topLeft { 0% { left: 0; } 100% { left: 100px; } } .topWrpper .topPart { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform-style: preserve-3d; background-image: linear-gradient(#297aa3, #0f1d24); background-size: 100% 500%; -webkit-animation: topBounce 2s infinite ease-out, topSize 2s infinite ease-in-out, partBackPosition 2s infinite ease-in-out; animation: topBounce 2s infinite ease-out, topSize 2s infinite ease-in-out, partBackPosition 2s infinite ease-in-out; } @-webkit-keyframes topBounce { 0%, 80% { transform: translate(-50%, -50%) translateZ(0); } 90%, 100% { transform: translate(-50%, -50%) translateZ(30px); } } @keyframes topBounce { 0%, 80% { transform: translate(-50%, -50%) translateZ(0); } 90%, 100% { transform: translate(-50%, -50%) translateZ(30px); } } @-webkit-keyframes topSize { 0%, 80% { width: 200px; height: 300px; } 90% { width: 330px; height: 440px; } 100% { width: 300px; height: 400px; } } @keyframes topSize { 0%, 80% { width: 200px; height: 300px; } 90% { width: 330px; height: 440px; } 100% { width: 300px; height: 400px; } } .topWrpper .topPart .front, .topWrpper .topPart .back { -webkit-animation: topFrontBack 2s infinite ease-in-out; animation: topFrontBack 2s infinite ease-in-out; } .topWrpper .topPart .right, .topWrpper .topPart .left { -webkit-animation: topWidth 2s infinite ease-in-out; animation: topWidth 2s infinite ease-in-out; } @-webkit-keyframes topFrontBack { 0%, 80%, 100% { height: 30px; } 90% { height: 15px; } 0% { background-color: #2966a3; } 100% { background-color: #143352; } } @keyframes topFrontBack { 0%, 80%, 100% { height: 30px; } 90% { height: 15px; } 0% { background-color: #2966a3; } 100% { background-color: #143352; } } @-webkit-keyframes topWidth { 0%, 80%, 100% { width: 30px; } 90% { width: 15px; } 0% { background-color: #143352; } 100% { background-color: #2966a3; } } @keyframes topWidth { 0%, 80%, 100% { width: 30px; } 90% { width: 15px; } 0% { background-color: #143352; } 100% { background-color: #2966a3; } } .topWrpper .topPart .bottom { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, #297aa3, #0f1d24); background-size: 500% 100%; background-position: left; -webkit-animation: topBottomTranslateZ 2s infinite ease-in-out; animation: topBottomTranslateZ 2s infinite ease-in-out; } @-webkit-keyframes topBottomTranslateZ { 0%, 80%, 100% { transform: translateZ(-30px); } 90% { transform: translateZ(-15px); } } @keyframes topBottomTranslateZ { 0%, 80%, 100% { transform: translateZ(-30px); } 90% { transform: translateZ(-15px); } } .bottomWarpper { position: absolute; top: -150px; width: 200px; height: 300px; transform: rotateX(90deg); transform-style: preserve-3d; -webkit-animation: bottomRight 2s infinite ease-in-out; animation: bottomRight 2s infinite ease-in-out; } @-webkit-keyframes bottomRight { 0% { right: 0; } 100% { right: -100px; } } @keyframes bottomRight { 0% { right: 0; } 100% { right: -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0