单个div+css实现一幅超现实主义的画作代码
代码语言:html
所属分类:布局界面
代码描述:单个div+css实现一幅超现实主义的画作代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> #wonder { box-sizing: border-box; min-height: 400px; height: 100vh; position: relative; overflow: hidden; background: radial-gradient(circle, white 60%, rgba(255,255,255,0) 75%) 70% 10%/4em 4em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 70%) calc(50% - 12em) calc(50% - 4em)/4em 2em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 11em) calc(50% - 4.5em)/3em 3em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 10em) calc(50% - 5.5em)/4em 4em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 9em) calc(50% - 5em)/3em 3em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 8.5em) calc(50% - 4em)/4.5em 4.5em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 10.4em) calc(50% - 3.5em)/3.7em 3.7em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% - 7em) calc(50% - 4em)/4em 2.5em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 8.5em) calc(50% - 0.5em)/4.5em 2.5em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 10em) calc(50% - 1.2em)/4em 4em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 11em) calc(50% - 2.4em)/3em 3em, radial-gradient(circle, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 12.6em) calc(50% - 1.8em)/4em 4em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 13.7em) calc(50% - 0.5em)/4em 2.5em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 60%) calc(50% + 10.5em) calc(50% - 0.2em)/4em 4em, radial-gradient(ellipse, #ff69b4 10%, rgba(255,105,180,0) 70%) calc(50% + 12.3em) calc(50% - 0.4em)/4em 4em, linear-gradient(to bottom, #4682b4, #b0e0e6) 50% 0/100% 60%, radial-gradient(ellipse, rgba(0,0,0,0.11) 10%, rgba(0,0,0,0) 60%) calc(50% - 10em) calc(60% + 2.2em)/10em 2em, radial-gradient(ellipse, rgba(0,0,0,0.15) 10%, rgba(0,0,0,0) 60%) calc(50% + 11em) calc(60% + 1.5em)/10em 2em, radial-gradient(ellipse, rgba(0,0,0,0.5) 20%, rgba(0,0,0,0) 60%) 50% calc(50% + 8em)/12em 1em, linear-gradient(to top, rgba(240,248,255,0) 40%, #f0f8ff 90%) 50% 100%/100% 50%, repeating.........完整代码请登录后点击上方下载按钮下载查看
网友评论0