css+div实现三维骰子转动动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现三维骰子转动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap"); body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; background-color: #111; font-family: "Zen Dots", sans-serif; font-size: 72px; font-weight: bold; } .infinity-path { position: relative; width: 60vw; height: 80vh; } .dice, .dice1, .dice2, .dice3 { position: absolute; width: 100px; height: 100px; transform-style: preserve-3d; transform-origin: center; animation: rotateDice 4s linear infinite, moveInfinity 7s linear infinite; } .dice2, .dice3{ opacity: 0; } .dice2{ animation-delay: 1.4s; } .dice3{ animation-delay: 2.9s; } .face { position: absolute; width: 100px; height: 100px; background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet); background-size: 400% 400%; border: 1px solid #ccc; border-radius: 30%; box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.6), 0 0 50px rgba(255, 255, 255, 0.4); opacity: 0.8; display: flex; justify-content: center; align-items: center; animation: rainbow 5s linear infinite; transition: filter 0.3s ease; } .face:hover { opacity: 1.0; filter: brightness(2); color: #FFF; } .face::before { content: ''; position: absolute; width: 60px; height: 60px; border-radius: 30%; background: #fff6; box-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(255, 255, 255, 0.4); animation: sparkle 1.5s infinite ease-in-out; } .face1 { transform: rotateY(0deg) translateZ(50px); } .face2 { transform: rotateY(90deg) translateZ(50px); } .face3 { transform: rotateY(180deg) translateZ(50px); } .face4 { transform: rotateY(-90deg) translateZ(50px); } .face5 { transform: rotateX(90deg) translateZ(50px); } .face6 { transform: rotateX(-90deg) translateZ(50px); } @keyframes rotateDice { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } @.........完整代码请登录后点击上方下载按钮下载查看
网友评论0