纯CSS绘图：我的经典制作-小桥流水人家

曾经终败给现在 2022-03-08 08:18 99阅读 0赞

## 纯CSS绘图：我的经典制作-小桥流水人家 ##

## 爱情小熊 ##

更新博客了，很开心，因为有个她，下面的内容及其让单身狗不适应，请注意前方高能，谨慎前行！在用纯CSS绘制下面这些图的时候，有一些小故事。用纯的CSS绘图，我在网上寻找了许久，不知道要绘写什么，突然看到这两只小熊，因为那段时间刚刚恋爱，还处于热恋期，所以就想制作这个图，本身原图中间有一颗心的，给人一上一下的，但那时候还没有学animation动画，所以就没有做中间那个爱心了。后面制作好了还专门拿给女友看，她也很开心你，还要要求我以后给她弄个更难的。

两只熊看完了下面还有内容，还有故事（小桥流水篇）

![两只有爱情的小熊][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]

## 小熊的HTML代码 ##

## 小熊的CSS代码 ##

这一截代码有点长，我现在看都有点晕

body{ 
                margin:0;
                background:#000;
            }
            #wrap1{ 
                width:1314px;
                height:520px;
                background:#B9EDF8;
                margin:52px auto;
                position:relative;
                z-index:-5;
    
            }
            .man{ 
                position:absolute;
                top:100px;
                left:50px;
            }
            .woman{ 
                position:absolute;
                top:90px;
                left:260px;
            }
            .duzi{ 
                width:100px;
                height:220px;
                background-color:#a9a9a9;
                position:relative;;
            }
            .erduo1{ 
                width:25px;
                height:35px;
                border-radius:50%;
                background-color:#a9a9a9;
                transform: rotate(-25deg);
                position:absolute;
                top:-20px;
                left:-5px;
            }
            .erduo1:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:5px;
            }
            .erduo2{ 
                width:25px;
                height:35px;
                border-radius:50%;
                background-color:#a9a9a9;
                transform: rotate(25deg);
                position:absolute;
                top:-20px;
                right:-5px;
            }
            .erduo2:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:5px;
            }
            .eye1{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:20px;
                left:40px;
                z-index:2;
            }
            .eye2{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:18px;
                left:80px;
                z-index:2;
            }
            .zuiba{ 
                width:70px;
                height:70px;
                border-radius:10px;
                background-color:#a9a9a9;
                transform: rotate(55deg);
                position:absolute;
                top:15px;
                right:-20px;
                
            }
            .zuiba2{ 
                content:"";
                width:25px;
                height:25px;
                border-left:4px solid #333;
                border-radius:50%;
                transform: rotate(-45deg);
                position:absolute;
                top:50px;
                right:5px;
            }
            .zuiba3{ 
                width:40px;
                height:60px;
                border-radius:100% 100% 100% 100%/100% 100% 50% 50%;
                background-color:#a9a9a9;
                transform: rotate(75deg);
                position:absolute;
                top:28px;
                right:-35%;
            }
            .bizi{ 
                width:25px;
                height:20px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:45px;
                right:-35px;
                
            }
            .duzi2{ 
                width:70px;
                height:112px;
                border-radius:50%;
                background-color:rgba(255, 255, 255, 0.8);
                position:absolute;
                bottom:20px;
                right:10px;
    
            }
            .shou1{ 
                /* width:120px; height:70px; border:20px solid #a9a9a9; position:absolute; border-radius:100% 100% 100% 20%; transform:rotate(-35deg); border-bottom:transparent; */
                position:absolute;
                left:-65px;
                bottom:20px;
                background: none;
                width: 130px;
                height: 70px;
                border: solid 20px #000;
                border-color: #a9a9a9 transparent transparent transparent;
                border-radius: 50%/100% 100% 0 0;
                transform: rotate(-45deg);
                z-index:-1;
    
            }
            .shou2{ 
                width:20px;
                height:80px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:40px;
                right:-31px;
                z-index:-2;
                transform:rotate(-45deg);
            }
            .shou5{ 
                width:24px;
                height:14px;
                background-color:#a9a9a9;
                border-radius:50%;
                position:absolute;
                bottom:39px;
                right:-55px;
                z-index:-1;
                transform:rotate(45deg);
            }
            .shou6{ 
                width:24px;
                height:13px;
                background-color:#a9a9a9;
                border-radius:50%;
                position:absolute;
                bottom:39px;
                right:-68px;
                z-index:5;
                transform:rotate(-45deg);
            }
            .jiao1{ 
                width:20px;
                height:70px;
                border-radius:0 0 5px 10px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:-50px;
            }
            .jiao1:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 10px 5px;
                background-color:#a9a9a9;
                position:absolute;
                left:6px;
                transform: rotate(10deg)
            }
            .jiao2{ 
                width:20px;
                height:70px;
                border-radius:0 0 10px 5px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:-50px;
                right:0px;
            }
            .jiao2:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 5px 10px;
                background-color:#a9a9a9;
                position:absolute;
                right:6px;
                transform: rotate(-10deg)
            }
    
            .duzi3{ 
                width:100px;
                height:220px;
                background-color:#fdc4b6;
                position:relative;;
            }
            .erduo3{ 
                width:22px;
                height:32px;
                border-radius:50%;
                background-color:#fdc4b6;
                transform: rotate(-25deg);
                position:absolute;
                top:-20px;
                left:-4px;
            }
            .erduo3:before{ 
                content:"";
                width:6px;
                height:10px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:7px;
            }
            .erduo4{ 
                width:22px;
                height:32px;
                border-radius:50%;
                background-color:#fdc4b6;
                transform: rotate(25deg);
                position:absolute;
                top:-20px;
                right:-4px;
            }
            .erduo4:before{ 
                content:"";
                width:6px;
                height:10px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:7px;
            }
            .eye3{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:23px;
                right:40px;
                z-index:2;
            }
            .eye4{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:18px;
                right:78px;
                z-index:2;
            }
            .zuiba4{ 
                width:70px;
                height:70px;
                border-radius:10px;
                background-color:#fdc4b6;
                transform: rotate(-55deg);
                position:absolute;
                top:16px;
                left:-20px;
                
            }
            .zuiba5{ 
                content:"";
                width:25px;
                height:25px;
                border-left:4px solid #333;
                border-radius:50%;
                transform: rotate(-135deg);
                position:absolute;
                top:50px;
                left:5px;
            }
            .zuiba6{ 
                width:40px;
                height:60px;
                border-radius:100% 100% 100% 100%/100% 100% 50% 50%;
                background-color:#fdc4b6;
                transform: rotate(-75deg);
                position:absolute;
                top:28px;
                left:-35%;
            }
            .bizi2{ 
                width:25px;
                height:20px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:45px;
                left:-35px;
                transform:rotate(10deg);
                
            }
            .duzi4{ 
                width:70px;
                height:112px;
                border-radius:50%;
                background-color:rgba(255, 255, 255, 0.8);
                position:absolute;
                bottom:20px;
                left:10px;
    
            }
            .shou3{ 
                /* width:120px; height:70px; border:20px solid #a9a9a9; position:absolute; border-radius:100% 100% 100% 20%; transform:rotate(-35deg); border-bottom:transparent; */
                position:absolute;
                right:-65px;
                bottom:20px;
                background: none;
                width: 130px;
                height: 70px;
                border: solid 20px #000;
                border-color: #fdc4b6 transparent transparent transparent;
                border-radius: 50%/100% 100% 0 0;
                transform: rotate(45deg);
                z-index:-1;
    
            }
            .shou4{ 
                width:20px;
                height:120px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:15px;
                left:-34px;
                transform:rotate(45deg);
                border-radius:0 0 10px 10px;
                z-index:-1;
            }
            .jiao3{ 
                width:20px;
                height:70px;
                border-radius:0 0 5px 10px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:-50px;
            }
            .jiao3:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 10px 5px;
                background-color:#fdc4b6;
                position:absolute;
                left:6px;
                transform: rotate(10deg)
            }
            .jiao4{ 
                width:20px;
                height:70px;
                border-radius:0 0 10px 5px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:-50px;
                right:0px;
            }
            .jiao4:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 5px 10px;
                background-color:#fdc4b6;
                position:absolute;
                right:6px;
                transform: rotate(-10deg)
            }

**未完待续…**

## 小桥流水人家 ##

看到这幅图，也是如此平庸出奇，但是每幅图后面都有一个故事的，我也想讲一下我的故事，代码什么的，比我写的好的多了去了，故事最重要。

这个图开先并没有这么丰富的内容，只是几棵树，一个太阳，一个房子，还有草坪，云，其他的都是后面添加进去的，从一开始我就给这幅图取名叫小桥流水人家，非常有韵味嘛，正如马致远的天净沙·秋思，他那描述的是秋天嘛，我这是情窦初开的春天嘛。当绘制好前面的内容之后，没有水，没有人，没有桥，何来小桥流水人家？

两只熊是之前就做好的，于是我奇思妙想的把两只熊添加进去了，觉得画面还是不够丰富，我再在上面绘制了桥，河流，小鱼，和一直憨鸟。我当时真的挺佩服自己的，竟可以添加上去还能如此吻合，还应了我的标题：**小桥流水人家**。于是绘制完了之后，再一次将这两只小熊生活在一个蓝天白云，青山绿水，丝丝炊烟，有桥，有水，有人家的风光图发给了她。  
随后学习了动画，再给下图添加了动图，只不过不是不用的animation动画，如下图所示，由于没有画画功底，不能将每一帧画出来，并不是逐帧动画，所以看起有点生硬，还能看得过去吧。

今天的故事就到此结束，请关注我的博客：Berlin\_Rome,下回再给你讲其他的！  
![小桥流水人家][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70 1]

![小桥流水人家动图][20190314182440206.gif]

## 小桥流水人家的HTML代码 ##

## 小桥流水人家CSS代码 ##

*{ 
                box-sizing:border-box;
            }
            body{ 
                margin:0;
            }
            #wrap{ 
                width:1200px;
                height:700px;
                margin:20px auto;
                background-image:linear-gradient(#50C1E9,#B9EDF8 80%);
                position:relative;
                z-index:0;
                overflow:hidden;
            }
            .sun{ 
                position:absolute;
                left:300px;
                top:10px;
                width:60px;
                height:60px;
                border-radius:50%;
                background-image:radial-gradient(#ff0,#f0ca17);
                box-shadow:0 0 40px #ff0;
            }
            .bg1{ 
                width:1000px;
                height:400px;
                border-radius:50%;
                background:radial-gradient(at top right,#adbd37 20%,#588133 60%);
                position:absolute;
                bottom:-100px;
                left:-450px;
                transform:rotate(1deg);
            }
            .bg2{ 
                width:1400px;
                height:400px;
                border-radius:50%;
                background:radial-gradient(at top center,#adbd37 20%,#588133);
                position:absolute;
                bottom:-200px;
                right:-200px;
                transform:rotate(-10deg)
            }
            .tree1{ 
                width:200px;
                height:200px;
                border-radius:50%;
                background-image:radial-gradient(at top right,#adbd37,#30AE1E);
                position:absolute;
                left:-30px;
                top:130px;
    
            }
            .tree1:after{ 
                content:"";
                position:absolute;
                width:30px;
                top:190px;
                left:75px;
                border-right:6px solid transparent;
                border-left:6px solid transparent;
                border-top:none;
                border-bottom:100px solid #492711;
               background:linear-gradient(to left,#895B2E,#492711);
            }
            .tree2{ 
                width:50px;
                height:100px;
                border-radius:100% 100% 100% 100%/100% 100% 50% 50%;
                background-image:radial-gradient(at top center,rgb(28, 193, 123,.6),rgb(21, 146, 94));
                position:absolute;
                top:300px;
                left:300px;
    
            }
            .tree2:before{ 
                content:"";
                width:8px;
                height:45px;
                background-color:#492711;
                position:absolute;
                top:99px;
                left:20px;
                z-index:-1;
    
            }
            .home{ 
                width:180px;
                height:180px;
                background-color:#ebb481;
                position:relative;
                left:900px;
                top:350px;
                z-index:-1;
            }
            .wuding{ 
                border-top:none;
                border-right:120px solid transparent;
                border-left:120px solid transparent;
                border-bottom:100px solid #d14035;
                position:absolute;
                bottom:180px;
                left:-30px;
            }
            .yanchong{ 
                width:20px;
                height:50px;
                background:#d14035;
                position:absolute;
                bottom:200px;
                right:10px;
            }
            .chuangzi{ 
                width:30px;
                height:30px;
                background-color:#9BD7D5;
                position:absolute;
                top:20px;
                left:20px;
                border:5px solid #d14035;
            }
            .tree3{ 
                width:60px;
                height:140px;
                border-radius:50%;
                background-image:radial-gradient(at top center,rgb(137, 158, 102),rgb(72, 94, 36));
                position:absolute;
                top:320px;
                right:500px;
    
            }
            .tree3:before{ 
                content:"";
                width:10px;
                height:100px;
                background-color:#492711;
                position:absolute;
                bottom:-99px;
                left:25px;
                z-index:-1;
    
            }
            .yun1{ 
                width:100px;
                height:30px;
                border-radius:50%;
                background-color:#fff;
                position: absolute;
                top:20px;
                right:50px;
                transition:all 10s linear;
            }
            .yun2{ 
                width:60px;
                height:30px;
                border-radius:70%;
                background-color:#fff;
                position: absolute;
                top:30px;
                right:40px;
                transform:rotate(5deg);
               
            }
            #wrap1{ 
                position:relative;
                top:-20px;
                right:-40px;
                z-index:5;
                
                opacity:1;
            }
            body:hover #wrap1{ 
                top:50px;
                right:-600px;
                transition: all 10s linear;
            }
            .man{ 
                position:absolute;
                top:100px;
                left:50px;
            }
            .woman{ 
                position:absolute;
                top:90px;
                left:260px;
            }
            .duzi{ 
                width:100px;
                height:220px;
                background-color:#a9a9a9;
                position:relative;;
            }
            .erduo1{ 
                width:25px;
                height:35px;
                border-radius:50%;
                background-color:#a9a9a9;
                transform: rotate(-25deg);
                position:absolute;
                top:-20px;
                left:-5px;
            }
            .erduo1:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:5px;
            }
            .erduo2{ 
                width:25px;
                height:35px;
                border-radius:50%;
                background-color:#a9a9a9;
                transform: rotate(25deg);
                position:absolute;
                top:-20px;
                right:-5px;
            }
            .erduo2:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:5px;
            }
            .eye1{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:20px;
                left:40px;
                z-index:2;
            }
            .eye2{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:18px;
                left:80px;
                z-index:2;
            }
            .zuiba{ 
                width:70px;
                height:70px;
                border-radius:10px;
                background-color:#a9a9a9;
                transform: rotate(55deg);
                position:absolute;
                top:15px;
                right:-20px;
                
            }
            .zuiba2{ 
                content:"";
                width:25px;
                height:25px;
                border-left:4px solid #333;
                border-radius:50%;
                transform: rotate(-45deg);
                position:absolute;
                top:50px;
                right:5px;
            }
            .zuiba3{ 
                width:40px;
                height:60px;
                border-radius:100% 100% 100% 100%/100% 100% 50% 50%;
                background-color:#a9a9a9;
                transform: rotate(75deg);
                position:absolute;
                top:28px;
                right:-35%;
            }
            .bizi{ 
                width:25px;
                height:20px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:45px;
                right:-35px;
                
            }
            .duzi2{ 
                width:70px;
                height:112px;
                border-radius:50%;
                background-color:rgba(255, 255, 255, 0.8);
                position:absolute;
                bottom:20px;
                right:10px;
    
            }
            .shou1{ 
                /* width:120px; height:70px; border:20px solid #a9a9a9; position:absolute; border-radius:100% 100% 100% 20%; transform:rotate(-35deg); border-bottom:transparent; */
                position:absolute;
                left:-65px;
                bottom:30px;
                background: none;
                width: 130px;
                height: 70px;
                border: solid 20px #000;
                border-color: #a9a9a9 transparent transparent transparent;
                border-radius: 50%/100% 100% 0 0;
                transform: rotate(-65deg);
                z-index:-1;
    
            }
            .shou2{ 
                width:20px;
                height:80px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:40px;
                right:-31px;
                z-index:-2;
                transform:rotate(-45deg);
            }
            .shou5{ 
                width:24px;
                height:14px;
                background-color:#a9a9a9;
                border-radius:50%;
                position:absolute;
                bottom:39px;
                right:-55px;
                z-index:-1;
                transform:rotate(45deg);
            }
            .shou6{ 
                width:24px;
                height:13px;
                background-color:#a9a9a9;
                border-radius:50%;
                position:absolute;
                bottom:39px;
                right:-68px;
                z-index:5;
                transform:rotate(-45deg);
            }
            .jiao1{ 
                width:20px;
                height:70px;
                border-radius:0 0 5px 10px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:-50px;
            }
            .jiao1:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 10px 5px;
                background-color:#a9a9a9;
                position:absolute;
                left:6px;
                transform: rotate(10deg)
            }
            .jiao2{ 
                width:20px;
                height:70px;
                border-radius:0 0 10px 5px;
                background-color:#a9a9a9;
                position:absolute;
                bottom:-50px;
                right:0px;
            }
            .jiao2:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 5px 10px;
                background-color:#a9a9a9;
                position:absolute;
                right:6px;
                transform: rotate(-10deg)
            }
    
            .duzi3{ 
                width:100px;
                height:220px;
                background-color:#fdc4b6;
                position:relative;;
            }
            .erduo3{ 
                width:22px;
                height:32px;
                border-radius:50%;
                background-color:#fdc4b6;
                transform: rotate(-25deg);
                position:absolute;
                top:-20px;
                left:-4px;
            }
            .erduo3:before{ 
                content:"";
                width:6px;
                height:10px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:7px;
            }
            .erduo4{ 
                width:22px;
                height:32px;
                border-radius:50%;
                background-color:#fdc4b6;
                transform: rotate(25deg);
                position:absolute;
                top:-20px;
                right:-4px;
            }
            .erduo4:before{ 
                content:"";
                width:6px;
                height:10px;
                border-radius:50%;
                background:#fff;
                position:absolute;
                top:5px;
                right:7px;
            }
            .eye3{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:23px;
                right:40px;
                z-index:2;
            }
            .eye4{ 
                width:10px;
                height:10px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:18px;
                right:78px;
                z-index:2;
            }
            .zuiba4{ 
                width:70px;
                height:70px;
                border-radius:10px;
                background-color:#fdc4b6;
                transform: rotate(-55deg);
                position:absolute;
                top:16px;
                left:-20px;
                
            }
            .zuiba5{ 
                content:"";
                width:25px;
                height:25px;
                border-left:4px solid #333;
                border-radius:50%;
                transform: rotate(-135deg);
                position:absolute;
                top:50px;
                left:5px;
            }
            .zuiba6{ 
                width:40px;
                height:60px;
                border-radius:100% 100% 100% 100%/100% 100% 50% 50%;
                background-color:#fdc4b6;
                transform: rotate(-75deg);
                position:absolute;
                top:28px;
                left:-35%;
            }
            .bizi2{ 
                width:25px;
                height:20px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:45px;
                left:-35px;
                transform:rotate(10deg);
                
            }
            .duzi4{ 
                width:70px;
                height:112px;
                border-radius:50%;
                background-color:rgba(255, 255, 255, 0.8);
                position:absolute;
                bottom:20px;
                left:10px;
    
            }
            .shou3{ 
                /* width:120px; height:70px; border:20px solid #a9a9a9; position:absolute; border-radius:100% 100% 100% 20%; transform:rotate(-35deg); border-bottom:transparent; */
                position:absolute;
                right:-65px;
                bottom:30px;
                background: none;
                width: 130px;
                height: 70px;
                border: solid 20px #000;
                border-color: #fdc4b6 transparent transparent transparent;
                border-radius: 50%/100% 100% 0 0;
                transform: rotate(65deg);
                z-index:-1;
    
            }
            .shou4{ 
                width:20px;
                height:120px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:15px;
                left:-34px;
                transform:rotate(45deg);
                border-radius:0 0 10px 10px;
                z-index:-1;
            }
            .jiao3{ 
                width:20px;
                height:70px;
                border-radius:0 0 5px 10px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:-50px;
            }
            .jiao3:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 10px 5px;
                background-color:#fdc4b6;
                position:absolute;
                left:6px;
                transform: rotate(10deg)
            }
            .jiao4{ 
                width:20px;
                height:70px;
                border-radius:0 0 10px 5px;
                background-color:#fdc4b6;
                position:absolute;
                bottom:-50px;
                right:0px;
            }
            .jiao4:after{ 
                content:"";
                width:20px;
                height:70px;
                border-radius:0  0 5px 10px;
                background-color:#fdc4b6;
                position:absolute;
                right:6px;
                transform: rotate(-10deg)
            }
            #he{ 
                border-left:80px solid transparent;
                border-top:none;
                border-right:80px solid transparent;
                border-bottom:500px solid #B9EDF8;
                position:absolute;
                top:370px;
                left:150px;
                transform: rotate(73deg);
            }
            .heliu{ 
                position:relative;
            }
            .yu1{ 
                width:30px;
                height:30px;
                position:absolute;
                background-color:#ffa200;
                border-radius:80% 0;
                top:300px;
                right:10px;
                transform:rotate(-35deg);
                transition:12s linear;
            }
            body:hover .yu1{ 
                top:600px;
                right:14px;
            }
            .yan1{ 
                width:7px;
                height:7px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:14px;
                right:16px;
                box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;
    
            }
            .weiba1{ 
                border-top:none;
                border-left:10px solid transparent;
                border-right:10px solid transparent;
                border-bottom:10px solid #ffa200;
                position:absolute;
                top:-7px;
                left:20px;
                transform:rotate(-142deg);
            }
    
    
            .yu2{ 
                width:30px;
                height:30px;
                position:absolute;
                background-color:#59be31;
                border-radius:80% 0;
                top:350px;
                right:10px;
                transform:rotate(-35deg);
                transition:11s linear;
            }
            body:hover .yu2{ 
                top:600px;
                right:-50px;
            }
            .yan2{ 
                width:7px;
                height:7px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:14px;
                right:16px;
                box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;
    
            }
            .weiba2{ 
                border-top:none;
                border-left:10px solid transparent;
                border-right:10px solid transparent;
                border-bottom:10px solid #59be31;
                position:absolute;
                top:-7px;
                left:20px;
                transform:rotate(-142deg);
            }
    
    
            .yu3{ 
                width:24px;
                height:24px;
                position:absolute;
                background-color:#0d99da;
                border-radius:80% 0;
                top:400px;
                right:0px;
                transform:rotate(-35deg);
                transition:10s linear;
            }
            body:hover .yu3{ 
                top:600px;
                right:10px;
            }
            .yan3{ 
                width:5px;
                height:5px;
                border-radius:50%;
                background-color:#333;
                position:absolute;
                top:14px;
                right:16px;
                box-shadow:-20px 7px 5px #eee,-30px 5px 5px 1px #fff;
    
            }
            .weiba3{ 
                border-top:none;
                border-left:8px solid transparent;
                border-right:8px solid transparent;
                border-bottom:8px solid #0d99da;
                position:absolute;
                top:-6px;
                left:17px;
                transform:rotate(-142deg);
            }
            #niao{ 
                position:absolute;
                top:500px;
                right:50px;
                transition:10s linear;
            }
            body:hover #niao{ 
                top:600px;
                right:400px;
            }
            .st1{ 
                width:100px;
                height:100px;
                border-radius:50%;
                background-color:#ffa200;
                position:relative;
            }
            .st1:after{ 
                content:"";
                width:50px;
                height:40px;
                background-color:#ecb953;
                border-radius:50%;
                position:absolute;
                z-index:3;
                bottom:0;
                left:25px;
            }
            .ed1{ 
                border-top:none;
                border-right:40px solid transparent;
                border-left:30px solid transparent;
                border-bottom:60px solid #ffa200;
                position:absolute;
                top:-20px;
                left:-10px;
                transform:rotate(-25deg);
            }
            .ed2{ 
                border-top:none;
                border-right:30px solid transparent;
                border-left:40px solid transparent;
                border-bottom:60px solid #ffa200;
                position:absolute;
                top:-20px;
                right:-10px;
                transform:rotate(25deg);
            }
            .yj1{ 
                width:30px;
                height:30px;
                border-radius:50%;
                background-color:#fff;
                position:absolute;
                top:20px;
                left:15px;
                z-index:2;
            }
            .yj1:after{ 
                content:"";
                width:16px;
                height:16px;
                background-color:#333;
                border-radius:50%;
                position:absolute;
                top:8px;
                left:8px;
            }
            .yj2{ 
                width:30px;
                height:30px;
                border-radius:50%;
                background-color:#fff;
                position:absolute;
                top:20px;
                right:15px;
                z-index:2;
            }
            .yj2:after{ 
                content:"";
                width:16px;
                height:16px;
                background-color:#333;
                border-radius:50%;
                position:absolute;
                top:8px;
                left:8px;
            }
            .bz1{ 
                border-bottom:none;
                border-right:10px solid transparent;
                border-left:10px solid transparent;
                border-top:10px solid #b97704;
                position:absolute;
                top:50px;
                left:40px;
                z-index:5;
            }
            .cb1{ 
                width:20px;
                height:50px;
                background-color:#ffa200;
                border-radius:50%;
                transform:rotate(45deg);
                position:absolute;
                bottom:15px;
                left:-10px;
    
            }
            .cb2{ 
                width:20px;
                height:50px;
                background-color:#ffa200;
                border-radius:50%;
                transform:rotate(-45deg);
                position:absolute;
                bottom:15px;
                right:-10px;
            }
            .j1{ 
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:1px;
                left:16px;
            }
            .j1:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:2px;
                left:-5px;
            }
            .j1:after{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:-2px;
                left:6px;
            }
            .j2{ 
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:1px;
                right:16px;
            }
            .j2:before{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:2px;
                right:-5px;
            }
            .j2:after{ 
                content:"";
                width:8px;
                height:12px;
                border-radius:50%;
                background-color:#b97704;
                position:absolute;
                bottom:-2px;
                right:6px;
            }
            #qiao{ 
                position:absolute;
                left:-45px;
                bottom:50px;
            }
            .qiaogan1{ 
                position:relative;
                background: none;
                width: 600px;
                height: 70px;
                border: solid 20px #000;
                border-color: #da9008 transparent transparent transparent;
                border-radius: 50%/200% 200% 0 0;
                transform: rotate(10deg);
            }
            .qiaogan2{ 
                background: none;
                width: 570px;
                height: 65px;
                border: solid 20px #000;
                border-color: #da9008 transparent transparent transparent;
                border-radius: 50%/150% 150% 0 0;
                transform: rotate(10deg);
                position:absolute;
                bottom:100px;
                left:80px;
            }
            .qiao3{ 
                
                bottom:100px;
                left:20px;
            }
            .qiao4{ 
                
                bottom:99px;
                left:50px;
            }
            .qiao5{ 
               
                bottom:98px;
                left:80px;
            }
            .qiao6{ 
               
                bottom:97px;
                left:110px;
            }
            .qiao7{ 
                
                bottom:96px;
                left:140px;
            }
            .qiao8{ 
                
                bottom:95px;
                left:170px;
            }
            .qiao9{ 
                
                bottom:88px;
                left:200px;
            }
            .qiao10{ 
               
                bottom:83px;
                left:230px;
            }
            .qiao11{ 
                
                bottom:78px;
                left:260px;
            }
            .qiao12{ 
                
                bottom:73px;
                left:290px;
            }
            .qiao13{ 
                
                bottom:63px;
                left:315px;
            }
            .qiao14{ 
                
                bottom:58px;
                left:345px;
            }
            .qiao15{ 
                
                bottom:52px;
                left:375px;
            }
            .qiao16{ 
               
                bottom:45px;
                left:405px;
            }
            .qiao17{ 
                
                bottom:35px;
                left:430px;
            }
            .qiao18{ 
                bottom:25px;
                left:460px;
            }
            .q1{ 
                background: none;
                width: 200px;
                height: 40px;
                border: solid 20px;
                border-color: #da9008 transparent transparent transparent;
                border-radius: 50%/50% 50% 0 0;
                transform: rotate(-45deg);
                position:absolute;
            }
            .shouye a{ 
                display:block;
                color:#333;
                text-decoration:none;
                width:70px;
                height:30px;
                background-color:#fff;
                position:absolute;
                bottom:10px;
                right:10px;
                text-align:center;
                line-height:30px;
            }
            .shouye a:hover{ 
                background-color:#5EB309;
                color:#fff;
            }

今天的内容到此结束，谢谢大家观赏！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70]: /images/20220308/39053fb9c83a4523aa13c80ab9a77549.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0Jlcmxpbl9Sb21l_size_16_color_FFFFFF_t_70 1]: /images/20220308/19466c1d7c4b4f6f90f4b24e454971ae.png
[20190314182440206.gif]: /images/20220308/8ac86168344d41fc838a40c1f37a4ee0.png