css实现一个三维反式吡喃动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现一个三维反式吡喃动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style>p { position: absolute; top: .5em; left: .5em; margin: 0; color: #dee1b6; font: 1.5em comic sans ms, sans-serif; } a { color: #bd5532; }</style> <style> body { overflow: hidden; height: 100vh; perspective: 25em; background: #373b44; } div { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; } .a3d { animation: r 8s linear infinite; } @keyframes r { to { transform: rotateY(0.75turn); } } .s3d { animation: h 8s ease-in-out infinite; } .s3d:nth-child(1) .s4gon, .s3d:nth-child(1) .s3gon:nth-child(1), .s3d:nth-child(1) .s3gon:nth-child(4) { color: #dee1b6; } .s3d:nth-child(1) { color: #73c8a9; animation-name: hop1; } .s3d:nth-child(1) .rot { animation-name: rh1; } .s3d:nth-child(1) .s4gon { transform: rotateX(-90deg); } @keyframes hop1 { 18%, 32% { transform: none; } 25% { transform: translateY(-3.75em); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0