css+div实现催眠之眼动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现催眠之眼动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; min-height: 100vh; display: grid; place-items: center; background-color: hsl(240deg, 10%, 90%); overflow: hidden; } .layer { transform: rotate(45deg); width: min(60vw, 80vh); aspect-ratio: 1 / 1; background-color: hsla(0deg, 0%, 0%, 20%); position: relative; animation: 12s spin infinite ease-in-out alternate; overflow: hidden; border-radius: 100% 0; } .layer > .layer { top: 50%; left: 50%; width: 90%; height: 90%; transform: translate(-50%, -50%) rotate(var(--rot)); } @property --rot { syntax: "<angle>"; inherits: true; initial-value: 3deg; } @keyframes spin { 0% { --rot: -32deg; } 100% { --rot: 32deg; } } </style> </head> <body > <div class="layer"> <div class="layer"> <div class="layer"> <div class="layer"> <div class="layer".........完整代码请登录后点击上方下载按钮下载查看
网友评论0