document.write("");

天上五朵云，飘啊飘

有云，有人，有紫色花群

一个简单的，动态的HTML页面，

 

感兴趣可以copy看一下效果，

至于我为什么不上效果图？等以后有空我再上（遥遥无期）

  

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>天空飘着五朵云</title>
<style>
*{ margin: 0; padding: 0;}
 
body {
overflow: hidden;
 
}
#clouds{
padding: 200px 0;
background: #c9dbe9;
background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
position: relative;
}
.cloud:before , .cloud:after {
content: '';
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
 
top: -55px; right: 15px;left: auto;
}
 
.x1 {
    /* padding-top: 100px; */
animation: moveclouds 15s linear infinite;
}
 
.x2 {
left: 200px;
transform: scale(0.6);
opacity: 0.6;
animation: moveclouds 25s linear infinite;
 
}
.x3 {
left: -250px; top: -200px;
transform: scale(0.8);
opacity: 0.8;
animation: moveclouds 20s linear infinite;
 
}
.x4 {
left: 470px; top: -250px;
transform: scale(0.75);
opacity: 0.75;
animation: moveclouds 18s linear infinite;
 
}
.x5 {
left: 350px; top: -150px;
transform: scale(0.8);
opacity: 0.8;
animation: moveclouds 20s linear infinite;
}
 
@keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
</style>
 
</head>
 
<body id="bd">
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
<div class="all" >
    <div class="animation">
        <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 141.82 574.17"><defs><style>.cls-1{fill:#1d0602;}.cls-2{fill:#f8dcca;}.cls-3{fill:#f3e3d6;}.cls-4{fill:#1b0205;}.cls-5{fill:#f7e857;}</style></defs><title>人-4</title><path class="cls-1" d="M334.3,455.61V655.08s42.56,31.92,63.83,21.28,37.24-5.32,50.54-8-13.3-303.2-13.3-303.2H334.3Z" transform="translate(-310.57 -112.83)"/><ellipse class="cls-2" cx="64.96" cy="64.84" rx="41.23" ry="43.89"/><path class="cls-3" d="M322.44,442.45s-1.21,20.14,10,20.59,29-6.65,22.07-19.66-16-18.39-16-18.39Z" transform="translate(-310.57 -112.83)"/><path class="cls-4" d="M334.3,176.34l5.32-21.28s31.92,31.92,45.22,29.26S411.43,171,411.43,171l5.32,8a46.05,46.05,0,0,0,0-29.26s-8-47.87-39.89-34.58S321,136.44,334.3,176.34Z" transform="translate(-310.57 -112.83)"/><path class="cls-4" d="M416.75,179s-5.32,16,0,18.61,26.6,2.66,21.28-13.29S422.07,163,416.75,179Z" transform="translate(-310.57 -112.83)"/><path class="cls-5" d="M360.9,365.18h74.47s29.26-95.75,0-122.35-31.92-34.58-31.92-34.58L360.9,218.89s0,2.66-13.3,18.62S297.07,312,315.68,445h47.88Z" transform="translate(-310.57 -112.83)"/><path class="cls-1" d="M359.92,668.73h16.2a2.77,2.77,0,0,1,1.51.44l19.23,12.36a2.78,2.78,0,0,1,.46,4.31h0a2.79,2.79,0,0,1-2,.82H358.8a2.78,2.78,0,0,1-2.77-3l1.12-12.36A2.77,2.77,0,0,1,359.92,668.73Z" transform="translate(-310.57 -112.83)"/><path class="cls-1" d="M410.21,668.38H427a2.9,2.9,0,0,1,1.56.46l20,12.83a2.89,2.89,0,0,1,.48,4.48h0a2.86,2.86,0,0,1-2,.85H409a2.89,2.89,0,0,1-2.88-3.15L407.33,671A2.88,2.88,0,0,1,410.21,668.38Z" transform="translate(-310.57 -112.83)"/><ellipse class="cls-1" cx="34.37" cy="80.79" rx="1.9" ry="6.65"/><ellipse class="cls-1" cx="345.11" cy="180.11" rx="5.08" ry="1.28" transform="translate(-354.74 69.95) rotate(-27.95)"/><ellipse class="cls-1" cx="361.1" cy="180.18" rx="1.36" ry="5.08" transform="translate(-244.19 343.03) rotate(-69.61)"/><ellipse class="cls-1" cx="50.33" cy="80.79" rx="1.9" ry="6.65"/></svg>
    </div>

</div>


<div id="grad1"></div>
</div>

 
</body>
<style>
    #bd{
        background-image: #9198e5;
    }
    #grad1 {
        height: 305px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(#c9dbe9, #9198e5);
    }
    </style>
<style  lang="less" scoped>
    .all{
/* background: #c9dbe9; */
        background: linear-gradient(top, #c9dbe9 0%, #fff 100%);
        height: 395px;
        background-color: red; /* 浏览器不支持时显示 */
        background-image: linear-gradient(#c9dbe9, #9198e5);
    }
    .animation {
    width: 100px;
    height: 100px;
    /* background: #c9dbe9; */
    animation: move 20s linear infinite alternate;
}

@keyframes move {
    100% {
        transform: translate(1000px, 0);
    }
}

.stop:hover ~ .animation {
    animation-play-state: paused;
}
</style>
</html>

 

posted @ 2022-02-25 14:34  人间春风意  阅读(27)  评论(0)  编辑  收藏  举报