css+div实现月亮闹鬼动画效果代码
代码语言:html
所属分类:动画
代码描述:css+div实现月亮闹鬼动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { min-height: 400px; height: 100vh; position: relative; background-color: #222; } div { position: absolute; left: 50%; top: 50%; } div::before, div::after { display: block; content: ''; position: absolute; } @media (max-width: 400px) { div:not(.no-scale) { transform: scale(0.8); } } #haunted { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; background: radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 64% 7%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 63.5% 6.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 22% 24%/3em 3em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 21% 23%/3.1em 3.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 74% 34%/2em 2em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 73.5% 33.5%/2.1em 2.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 14% 57%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 13.5% 56.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 26% 65%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 25.5% 64.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 54% 54%/1em 1em, radial-gradient(circle, #999 50%, rgba(153,153,153,0) 51%) 53.5% 53.5%/1.1em 1.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 85% 54%/1em 1em, radial-gradient(circle, #ccc 50%, rgba(204,204,204,0) 51%) 86% 54.5%/1.2em 1.2em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 44% 94%/2.8em 2.8em, radial-gradient(circle, #ccc 50%, rgba(204,204,204,0) 51%) 44% 96%/3.1em 3.1em, radial-gradient(circle, #aaa 50%, rgba(170,170,170,0) 51%) 86% 75%/1em 1em, radial-gradient(circl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0