css布局实现冬天窗外的雪景效果代码-html代码-BFW代码库

css布局实现冬天窗外的雪景效果代码

代码语言：html

代码描述：css布局实现冬天窗外的雪景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Rubik+Doodle+Shadow&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap");

main {
        display: grid;
        place-items: center;
        gap: 3vmin;
}
.winter {
        position: relative;
        width: 35vw;
        height: 35vw;
        background: 
                /* TREE */ /* FORE */ conic-gradient(
                                at 50% 0,
                                #0000 165deg,
                                #228b22 165deg 195deg,
                                #0000 195deg
                        )
                        top 82% left 17% / 27% 50%,
                linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 95% left 25% / 2%
                        8%,
                /* TREE  MIDDLE DISTANCE */
                        conic-gradient(at 50% 0, #0000 165deg, #1c721c 165deg 195deg, #0000 195deg)
                        top 80% left 37% / 13% 22%,
                linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 86.5% left 39% /
                        1.5% 6%,
                /* TREE DISTANCE */
                        conic-gradient(at 50% 0, #0000 165deg, #186218 165deg 195deg, #0000 195deg)
                        top 77% left 5% / 8% 15%,
                linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 82% left 8% /
                        1.25% 3%,
                /* TREE FAR DISTANCE */
                        conic-gradient(at 50% 0, #0000 165deg, #145214 165deg 195deg, #0000 195deg)
                        top 76.5% left 13% / 5% 10%,
                linear-gradient(to right, #374231 0 100%, #0000 0 100%) top 80% left.........完整代码请登录后点击上方下载按钮下载查看