master

分支 (2)

管理

管理

master

liuguanghtml

html
/
背景图加音乐.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页</title>
<style type="text/css">
		body{background-image: url(图片/f23.jpg);height: 800px;	padding:35px 0 0;
	margin:auto;
	text-align:center;}/*背景*/
		header{background: #70dbdb;width: 100%;height: 10%;}
		footer{background: #70dbdb;width: 100%;height: 10%;float: left;}
		section{height: 90%;width: 90%;float: left;overflow: auto;}
		aside{background: #70dbdb;height: 90%;width: 10%;float: left;}
		nav{width: 100%;height: 40px;text-align: center;padding: 6px;}
		li{display: inline;}
		a{text-decoration: none;}
		p{color: #32cd99;}
		/*漂浮道具*/
		@keyframes mysnow {
        0% {
            bottom: 100%;
            opacity: 0;
        }
        50% {
            opacity: 1;
            transform: rotate(1080deg);
        }
        100% {
            transform: rotate(0deg);
            opacity: 0;
            bottom: 0;
        }
    }

    @-webkit-keyframes mysnow {
        0% {
            bottom: 100%;
            opacity: 0;
        }
        50% {
            opacity: 1;
            -webkit-transform: rotate(1080deg);
        }
        100% {
            -webkit-transform: rotate(0deg);
            opacity: 0;
            bottom: 0;
        }
    }

    @-moz-keyframes mysnow {
        0% {
            bottom: 100%;
            opacity: 0;
        }
        50% {
            opacity: 1;
            -moz-transform: rotate(1080deg);
        }
        100% {
            -moz-transform: rotate(0deg);
            opacity: 0;
            bottom: 0;
        }
    }

    @-ms-keyframes mysnow {
        0% {
            bottom: 100%;
            opacity: 0;
        }
        50% {
            opacity: 1;
            -ms-transform: rotate(1080deg);
        }
        100% {
            -ms-transform: rotate(0deg);
            opacity: 0;
            bottom: 0;
        }
    }

    @-o-keyframes mysnow {
        0% {
            bottom: 100%;
            opacity: 0;
        }
        50% {
            opacity: 1;
            -o-transform: rotate(1080deg);
        }
        100% {
            -o-transform: rotate(0deg);
            opacity: 0;
            bottom: 0;
        }
    }

    .roll {
        position: absolute;
        opacity: 0;
        animation: mysnow 5s;
        -webkit-animation: mysnow 5s;
        -moz-animation: mysnow 5s;
        -ms-animation: mysnow 5s;
        -o-animation: mysnow 5s;
        height: 80px;
    }

    .div {
        position: fixed;
    }/*漂浮道具*/
.ribbon {
	display:inline-block;
}

.ribbon:after, .ribbon:before {
	margin-top:0.5em;
	content: "";
	float:left;
	border:1.5em solid #00ffff;
/*导航两边颜色*/}

.ribbon:after {
	border-right-color:transparent;
}

.ribbon:before {
	border-left-color:transparent;
}

.ribbon a:link, .ribbon a:visited {
	color:#cfb53b;
	text-decoration:none;
	float:left;
	height:3.5em;
	overflow:hidden;
/*导航字体颜色*/}

.ribbon span {
	background:#00ffff;
	display:inline-block;
	line-height:3em;
	padding:0 1em;
	margin-top:0.5em;
	position:relative;

	-webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
	-moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
	-ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
	-o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
	transition: background-color 0.2s, margin-top 0.2s;
/*导航框架颜色*/}

.ribbon a:hover span {
	background:#00ffff;
	margin-top:0;
/*导航字体框颜色*/}

.ribbon span:before {
	content: "";
	position:absolute;
	top:3em;
	left:0;
	border-right:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
}

.ribbon span:after {
	content: "";
	position:absolute;
	top:3em;
	right:0;
	border-left:0.5em solid #9B8651;
	border-bottom:0.5em solid #fff;
}/*导航*/
</style>

</head>
<body style="margin: 0">
	<embed src="C:\Users\Administrator\Music\岑宁儿 - 追光者.mp3" hidden="true"  loop="true">
	<header>

<div class='ribbon' align="left"><img src="图片/f5.jpg" width="50" alt="">
	<a href=""><span>网站首页</span></a>
	<a href=""><span>背景音乐</span></a>
	<a href=""><span>背景图片</span></a>
	<a href=""><span>漂浮道具</span></a>
</div>
	</header>


<section>

</section>
	<footer>
		<p align="center">
		</p>
	</footer>
	<div id="snowzone">
	</div>

</body>
<script>
/*漂浮道具图片*/(function() {
    function snow(left, height, src) {
        var div = document.createElement("div");
        var img = document.createElement("img");
        div.appendChild(img);
        img.className = "roll";
        img.src = src;
        div.style.left = left + "px";
        div.style.height = height + "px";
        div.className = "div";
        document.getElementById("snowzone").appendChild(div);
        setTimeout(function() {
            document.getElementById("snowzone").removeChild(div);
            // console.log(window.innerHeight);
        }, 5000);
    }
    setInterval(function() {
        var left = Math.random() * window.innerWidth;
        var height = Math.random() * window.innerHeight;
        var src = "s" + Math.floor(Math.random() * 2 + 1) + ".png"; //两张图片分别为"s1.png"、"s2.png"
        snow(left, height, src);
    }, 500);
})();/*漂浮道具图片*/
</script>

</html>