桃子桃花背景"/>
带背景音乐的css3桃子桃花背景
带背景音乐的css3桃子桃花背景
在html 内放入音频链接：
输入网址=924680166.mp3（切记按回车），
不要点回车键，然后再进入网易云页面（/）
点开一首音乐，复制上面的ID（id=1966854323）网址，把前一个网址ID替换掉，然后下载就可以了，然后在 html中引入
代码如下：
<title>带背景音乐的css3桃子桃花背景</title><style>*{margin: 0;padding: 0;}@keyframes translate{0%{transform: translate(0px, 0px);}25%{transform: translate(5px, -5px);}50%{transform: translate(0px, 0px);}75%{transform: translate(-5px, -5px);}100%{transform: translate(0px, 0px);}}.header{height: 100px;}.header p{text-align: center;margin: 20px;font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;line-height: 100px;color: coral;font-size: 2em;text-shadow: grey 1px 2px 3px;animation: translate 1.5s linear infinite;}.header p:hover{color: cornflowerblue;}audio{display: none;}@font-face{font-family: fs;src: url();}body{background: url(./img/back\ .jpeg);background-repeat: no-repeat;background-size: 100%;/* height: 100%; */}.back{background: url(./img/hua.gif);}@keyframes rotate{0%{transform: rotate(0deg);}25%{transform: rotate(10deg);}50%{transform: rotate(0deg);}75%{transform: rotate(-10deg);}100%{transform: rotate(0deg);}}.mod_style p{font-family: "fs";text-shadow: gray 2px 3px 4px;font-size: 60px;position: absolute;top: -100px;left: 0;color: coral;margin: 10px auto;animation: rotate .7s running infinite;background-image: linear-gradient(135deg, coral, rgba(74, 155, 187));background-clip: text;-webkit-background-clip: text;color: transparent;}.act_wrapper{position: relative;z-index: 1;min-width: 1000px;margin: 0 auto;overflow: hidden;}.act_wrapper .act_bg{position: absolute;left: 50%;top: 0;z-index: 1;width: 1920px;margin-left: -1359px;}.act_wrapper .act_content{position: relative;z-index: 2;width: 1000px;height: 1200px;margin: 0 auto;margin-top: -569px;}.act_bg{background: url(./img/bg.jpg) 100% 0 no-repeat;height: 750px;}.mod_style{position: absolute;top: 716px;left: 200px;width: 870px;height: 560px;}.peach{position: absolute;top: 0;left: 0;width: 90px;height: 100px;display: block;background: url(./img/peach.png) no-repeat 0 0;}.peach1{background-position: 0 0;top: 100px;left: 72px;}.peach2{background-position: 0 -115px;top: 39px;left: 242px;}.peach3{background-position: 0 -215px;top: 71px;left: 452px;}.peach4{background-position: 0 -328px;top: 156px;left: 261px;}.peach5{background-position: 0 -435px;top: 256px;left: 412px;}.peach6{background-position: 0 -545px;top: 247px;left: 575px;}.peach:hover{-webkit-animation-duration: .2s;}.shake1{-webkit-animation-duration: 2s;}.shake2,.shake6{-webkit-animation-duration: 3s;}.shake3{-webkit-animation-duration: 1s;}.shake4{-webkit-animation-duration: 24s;}.shake5{-webkit-animation-duration: 3s;}.shake1,.shake2,.shake3,.shake4,.shake5,.shake6{/*动画被播放的次数：无限次播放*/-webkit-animation-iteration-count: infinite;/*动画名称：摇晃*/-webkit-animation-name: shake;/*动画的速度曲线：以低速开始和结束*/-webkit-animation-timing-function: ease-in-out;}@-webkit-keyframes shake{0%{-webkit-transform: rotate(2deg);-webkit-transform-origin: 50% 0;}20%{-webkit-transform: rotate(10deg);-webkit-transform-origin: 50% 0;}40%{-webkit-transform: rotate(0deg);-webkit-transform-origin: 50% 0;}60%{-webkit-transform: rotate(-2deg);-webkit-transform-origin: 50% 0;}80%{-webkit-transform: rotate(-10deg);-webkit-transform-origin: 50% 0;}100%{-webkit-transform: rotate(0deg);-webkit-transform-origin: 50% 0;}}</style>
</head>
<body><div class="back"><div class="header"><p>【点击页面任意位置播放背景音乐】</p></div><audio id="touchstart" autoplay controls loop src="./music/月光少女.mp3"></audio><div class="act_wrapper"><div class="act_content"><div class="mod_style"><p>摇晃的桃子</p><span class="peach peach1 shake1"></span><span class="peach peach2 shake2"></span><span class="peach peach3 shake3"></span><span class="peach peach4 shake4"></span><span class="peach peach5 shake5"></span><span class="peach peach6 shake6"></span></div></div><div class="act_bg"></div></div></div><script>function toggleSound(){undefinedvar music = document.getElementById("touchstart")if(music .paused) {music.paused = false;music.play();}}setInterval("toggleSound()", 1);</script>
预览效果:
更多推荐
带背景音乐的css3桃子桃花背景
发布评论