css实现三维金属方块旋转交互动画效果代码
代码语言:html
所属分类:三维
代码描述:css实现三维金属方块旋转交互动画效果代码,鼠标左键点击不放可放大。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@100&display=swap'> <style> .abc { display: flex; justify-content: center; align-items: center; width: 200px; height: 200px; background: #000; color: #fff; font-family: "Barlow Semi Condensed", sans-serif; } .cube .scale { transform: scale(1.2, 0.7); } .cube .surface { position: absolute; width: 200px; height: 200px; top: -100px; left: -100px; background: linear-gradient(-30deg, #333, #555); overflow: hidden; } .cube .surface::before { content: ""; position: absolute; width: 300%; height: 300%; top: -150%; background: radial-gradient(closest-side, #fff 0%, #fff 20%, #333 100%); filter: blur(50px); transform: translateX(-100%); -webkit-animation: refrection 10000ms ease-out infinite; animation: refrection 10000ms ease-out infinite; } .cube .surface.-a { transform: rotateY(0deg) translateZ(100px); } .cube .surface.-a::before { -webkit-animation-delay: -1000ms; animation-delay: -1000ms; } .cube .surface.-b { transform: rotateY(180deg) translateZ(100px); } .cube .surface.-b::before { -webkit-animation-delay: 4000ms; animation-delay: 4000ms; } .cube .surface.-c { transform: rotateY(90deg) translateZ(100px); } .cube .surface.-c::before { -webkit-animation-delay: 1500ms; animation-delay: 1500ms; } .cube .surface.-d { transform: rotateY(-90deg) translateZ(100px); } .cube .surface.-d::before { -webkit-animation-delay: 6500ms; animation-delay: 6500ms; } .cube .shadow { position: absolute; width: 200px; height: 200px; top: -100px; left: -100px; background: rgba(0, 0, 0, 0.6); filter: blur(30px); transform: rotateX(-90deg) translateZ(130px) scale(0.92); } .cube .rotate { -webkit-animation: rotation 10000ms linear infinite; animation: rotation 10000ms linear infinite; } @-webkit-keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } @keyframes rotat.........完整代码请登录后点击上方下载按钮下载查看
网友评论0