css实现立体钻石旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现立体钻石旋转动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" /> <title>BFW NEW PAGE</title> <style> body{ margin: 100px; background: #212121; } .pyramid-loader { position: relative; width: 300px; height: 300px; display: block; transform-style: preserve-3d; transform: rotateX(-20deg); } .wrapper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin 4s linear infinite; } @keyframes spin { 100% { transform: rotateY(360deg); } } .pyramid-loader .wrapper .side { width: 70px; height: 70px; /* you can choose any gradient or color you want */ /* background: radial-gradient( #2F2585 10%, #F028FD 70%, #2BDEAC 120%); */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center top; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } .pyramid-loader .wrapper .side1 { transform: rotateZ(-30deg) rotateY(90deg); background: conic-g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0