css实现炫酷404页面数字旋转动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现炫酷404页面数字旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet"> <style> html, body { width: 100%; height: 100%; font-family: "Days One", sans-serif; } body { overflow: hidden; display: flex; align-items: center; flex-direction: column; justify-content: center; position: relative; background-color: #6e1ec2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='199' viewBox='0 0 100 199'%3E%3Cg fill='%237825ce' fill-opacity='1'%3E%3Cpath d='M0 199V0h1v1.99L100 199h-1.12L1 4.22V199H0zM100 2h-.12l-1-2H100v2z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E"); } .scene { perspective: 400px; } .box { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; transform: translateZ(-100px); transition: 0.3s; animation-name: rotateAnimation; animation-duration: 4s; animation-iteration-count: infinite; } .box__face { position: absolute; width: 200px; height: 200px; font-size: 120px; line-height: 200px; text-align: center; color: #fff; border: 1px solid #000; } .box__face.front { transform: rotateY(0deg) translateZ(100px); background: #20162b; } .box__face.back { transform: rotateY(90deg) translateZ(100px); background: #130d1a; } .box__face.right { transform: rotateY(180deg) translateZ(100px); background: #070509; } .box__face.left { transform: rotateY(-90deg) translateZ(100px); background: black; } .box__face.top { transform: rotateX(90deg) translateZ(100px); background: #130d1a; } .box__face.bottom { transform: rotateX(-90deg) translateZ(100px); background: black; } @keyframes rotateAnimation { 25% { transform: translateZ(-100px) rotateY(-90deg); } 50% { transform: translateZ(-100px) rotateY(-180deg); }.........完整代码请登录后点击上方下载按钮下载查看
网友评论0