单个div+css布局实现火花四溅效果代码
代码语言:html
所属分类:布局界面
代码描述:单个div+css布局实现火花四溅效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #000; background: radial-gradient(circle at 55% calc(100% - 40vmin), #4328, #000c), linear-gradient(#fff2, #0002), #210; overflow: clip; margin: 0; height: 100vh; } .spark { font-size: 1vmin; width: 1.5em; height: 50em; background: radial-gradient(farthest-side at 50% 0, orange 5%, #fc0 10%,red, gray,#444 30%, #222 40%) 50% 100% / 60% 100%, #0000 ; background-repeat: no-repeat; position: absolute; bottom: 0; left: 45%; transform: rotate(10deg); transform-origin: 50% 100%; mix-blend-mode: lighten; } .spark::before { content: ""; position: absolute; width: 50em; height: 50em; background: repeating-conic-gradient(#fff 0 1.65%, #0000 0 7%), repeating-conic-gradient(#0000 0 8.1%, #ff0 0 8.5%), repeating-conic-gradient(from 20deg, #0000 0 7.5%, #fff 0 8.5%) 50% 50% / 40% 40%, repeating-conic-gradient(from 47deg, #0000 0 7.75%, #f0f6 0 8.5%) 50% 50% / 60% 40%, repeating-conic-gradient(from 35deg, #0000 0 7.5%, #fff 0 8.5%) 50% 50% / 50% 50%, radial-gradient(#fff 7%, #0000 0) #000; background-re.........完整代码请登录后点击上方下载按钮下载查看
网友评论0