css实现文件挂在上面摆动动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现文件挂在上面摆动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto+Mono:700); *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { font-family: 'Roboto Mono', monospace; background-color: black; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 100rem; perspective: 100rem; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .veryImportantLink { position: absolute; top: 10px; right: 10px; font-size: 14px; color: white; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; opacity: 0.5; -webkit-transition: opacity 0.25s; transition: opacity 0.25s; } .veryImportantLink:hover, .veryImportantLink:active, .veryImportantLink:focus { opacity: 1; } .box { position: relative; top: 5vh; width: 20vw; height: 60vw; margin: 0 auto; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(-50vw); transform: translateZ(-50vw); } .cards { position: relative; display: block; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(45deg); transform: rotateY(45deg); -webkit-animation: turn 30s infinite linear; animation: turn 30s infinite linear; } .card, .card:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .card { font-size: 0; color: transparent; } .card:before { content: attr(title); padding-top: 150%; text-align: center; font-size: 25vw; color: black; text-transform: uppercase; background-color: white; box-shadow: 0 0 10vw rgba(0, 0, 0, 0.5); -webkit-transform-origin: 50% 10%; transform-origin: 50% 10%; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); -webkit-animation-name: swing; animation-name: swing; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(0.385, 0.23, 0.22, 1.18); animation-timing-function: cubic-bezier(0.385, 0.23, 0.22, 1.18); } .card:nth-child(even):before { animation-direction: reverse; } .card:nth-child(1) { z-index: 7; -webkit-transform: translateZ(-3vw); transform: translateZ(-3vw); } .card:nth-child(1):before { -webkit-animation-duration: 4s; animation-duration: 4s; -webkit-animation-delay: -3.6s; animation-delay: -3.6s; } .card:nth-child(2) { z-index: 6; -.........完整代码请登录后点击上方下载按钮下载查看
网友评论0