单个div+css实现催眠眼镜动画效果代码
代码语言:html
所属分类:动画
代码描述:单个div+css实现催眠眼镜动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { height: 100vh; --background: rgb(219, 165, 65); --background-tr: rgba(219, 165, 65,0); --border: #000; --yellow: rgb(255, 251, 2); --red: rgb(206, 44, 44); --green: rgb(77, 197, 30); position: relative; display: flex; justify-content: center; align-items: center; background: var(--background); } .hypnotic { position: relative; width: 100vmin; height: 80vmin; margin: 0; border-radius: 5px; background: radial-gradient(ellipse at 50% 100%, var(--background-tr) 49%, var(--border) 50%, var(--border) 53%, var(--background-tr) 54%) 50% 30%/15% 5% no-repeat, linear-gradient(0deg, var(--border) 100%, var(--border) 100%) 49% 65.2%/15% 1% no-repeat, linear-gradient(-75deg, var(--background-tr) 49%, var(--border) 50%, var(--border) 53%, var(--background-tr) 54%) 45% 47%/15% 35% no-repeat, radial-gradient(circle, var(--background-tr) 49%, var(--border) 50%, var(--border) 51%, var(--background-tr) 52%) 80% 30%/40% 40% no-repeat, radial-gradient(circle, var(--background-tr) 49%, var(--border) 50%, var.........完整代码请登录后点击上方下载按钮下载查看
网友评论0