div+css实现三维立方体旋转动画效果代码
代码语言:html
所属分类:动画
代码描述:div+css实现三维立方体旋转动画效果代码,悬浮立方体会变色,立方体是线框的。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --time { syntax: "<angle>"; initial-value: 0deg; inherits: false; } @keyframes anim { 0% { --time: 0deg; } 100% { --time: 359deg; } } @property --hover { syntax: "<number>"; initial-value: 0; inherits: false; } @keyframes hover { 0% { --hover: 0; } 100% { --hover: 1; } } @keyframes hover-out { 0% { --hover: 1; } 100% { --hover: 0; } } html { background: black; } .wrapper { position: fixed; width: 960px; height: 960px; left: 50%; top: 50%; margin-left: -480px; margin-top: -480px; perspective: 500px; display: grid; place-items: center; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0