浪人 发表于 2021-10-31 12:49

第一场雪-css打造逼真的下雪【公共上传】

<style type="text/css">.items {z-index: 100;width: 1000px;
height: 600px;POSITION: relative;
box-shadow:0px 0px 0px 2px #fff000, 0px 0px 10px 20px #666666;MARGIN-LEFT:-18px;margin-top:30px;
ox-sizing: border-box;
overflow:hidden;border-radius:0%;
transform-origin: center;}


ul {


width: 1000px;
height: 100%;
text-align: center;
}

.cb-slideshow li:nth-child(1) span {
background-image: url(https://up.enterdesk.com/edpic_source/8a/21/18/8a2118c091e2c1cfdf5ae684180159ae.jpg)
}

.cb-slideshow li:nth-child(2) span {
background-image: url(https://up.enterdesk.com/edpic_source/7f/00/1c/7f001c911efc1feb24b86595c07217a4.jpg)
}

.cb-slideshow li:nth-child(3) span {
background-image: url(https://up.enterdesk.com/edpic_source/f5/30/be/f530befd1885d516ceda909a38e149a1.jpg)
}

.cb-slideshow li:nth-child(4) span {
background-image: url(https://up.enterdesk.com/edpic_source/3e/02/4d/3e024d51071b6829845a58d93eadfdde.jpg)
}

.cb-slideshow li:nth-child(5) span {
background-image: url(https://up.enterdesk.com/edpic_source/d2/6f/86/d26f86a28f6cb67e554146f72ff34e47.jpg)
}

.cb-slideshow li:nth-child(6) span {
background-image: url(https://up.enterdesk.com/edpic_source/30/38/3b/30383b8e77b603a86cc51f6dc823bf16.jpg)
}


.cb-slideshow,.cb-slideshow:after {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9
}

.cb-slideshow:after {
content: ''
}

.cb-slideshow li span {
width: 870px;
height: 500px;
position: absolute;background-size:100% 100%;
box-shadow: 0px 0px 0px 3px #ffffff, 0px 0px 0px 0px #000000;
top: 36px;
left: 35px;
opacity: 0;
z-index: 10;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s
}

.cb-slideshow li:nth-child(2) span {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s
}

.cb-slideshow li:nth-child(3) span {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s
}

.cb-slideshow li:nth-child(4) span {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s
}

.cb-slideshow li:nth-child(5) span {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s
}

.cb-slideshow li:nth-child(6) span {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s
}

@-webkit-keyframes imageAnimation {
0% {
opacity: 0.01;
-webkit-transform:translate(0%,0%) scale(0.01);

-webkit-animation-timing-function: ease-out;
}

8% {
opacity: 0.4;
-webkit-transform: scale(0.03)rotate(360deg);
-webkit-animation-timing-function: ease-out
}
16% {
opacity: 1;
-webkit-transform: scale(1)
}
17% {
opacity: 1;
-webkit-transform: scale(1.2)
}

25% {
opacity: 0;
-webkit-transform:translate(0%,0%) scale(1.6)
}

100% {
opacity: 0
-webkit-transform: scale(0.01);
}}

#swf {position: absolute;top: 0;
left: 0;
        z-index: 10;
}
.swf1 {
        margin-top:0px;margin-LEFT: 0px;
        z-index: 1;
}
</style>
<div class="items"><iframe border="0" frameborder="0" height="600" id="Layer1" marginheight="0" marginwidth="0" name="Music" scrolling="no" src="//pan.yinhuabbs.cn/view.php/2633b51e8adaac4c7d298c81bbfa2a7d.html" style="Z-INDEX: 1; LEFT: -30px; POSITION: relative; TOP: 3px" width="1024"></iframe>
<ul class="cb-slideshow">
        <li><span>1</span></li>
        <li><span>2</span></li>
        <li><span>3</span></li>
        <li><span>4</span></li>
        <li><span>5</span></li>
        <li><span>6</span></li>
</ul>

<div style="position:relative;margin-top:-610px;margin-left:-0px">
<div id="swf">
<div class="swf1"><embed allowfullscreen="true" allownetworking="all" allowscriptaccess="always" class="blog_flash" height="600" id="0.1935410605202461" invokeurls="false" menu="false" src="//ln2018.oss-cn-hangzhou.aliyuncs.com/htm/cmp/xxie/cmp4b110928.swf" width="1000" wmode="transparent"></embed></div>
</div>
</div>
</div>

蓝魔 发表于 2021-11-3 20:06

赏心悦目，谢谢楼主。

静竹. 发表于 2021-11-5 08:59

好大的雪！欣赏老师的好制作！
页: [1]
查看完整版本: 第一场雪-css打造逼真的下雪【公共上传】