大家好,欢迎来到IT知识分享网。
1.新建一个Dynamic Web Project项目,里面新建一个css文件和一个js文件,还有一个jsp文件,将所要的图片资源和音乐资源放在文件夹下。整体的框架的结构如下图所示:
2.index.jsp里面的代码如下所示:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxmum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="js/script.js" defer="defer"></script>
</head>
<body>
<div class="music">
<img src="images/music_pointer.png">
<img class="play" id="music" src="images/music_disc.png">
</div>
<div class="page" id="page1">
<div class="bg"></div>
<div class="p1_lantern">点击屏幕<br>开启好运2016</div>
<div class="p1_imooc"></div>
<div class="p1_words">2016年慕课网新年特献</div>
</div>
<div class="page" id="page2">
<div class="bg p2_bg_loading"></div>
<div class="bg"></div>
<div class="p2_circle"></div>
<div class="p2_2016"></div>
</div>
<div class="page" id="page3">
<div class="bg"></div>
<div class="p3_logo"></div>
<div class="p3_title"></div>
<div class="p3_second"></div>
<div class="p3_first"></div>
<div class="p3_blessing"></div>
</div>
<audio autoplay="true">
<source src="audio/music.mp3" type="audio/mpeg"/>
</audio>
</body>
</html>
3.script.js里面的代码如下所示:
window.onload = function() {
// console.log(document.body.clientWidth);
var music = document.getElementById("music");
var audio = document.getElementsByTagName("audio")[0];
// 音乐播放完之后自动停止光盘转动
audio.addEventListener("ended", function(event) {
music.setAttribute("class", "");
}, false);
// 点击音乐图标改变音乐的状态
music.onclick = function() {
if (audio.paused) {
audio.play();
this.setAttribute("class", "play");
// this.style.animationPlayState = "running";
// this.style.webkitAnimationPlayState = "running";
} else {
audio.pause();
this.setAttribute("class", "");
// this.style.animationPlayState = "paused";
// this.style.webkitAnimationPlayState = "paused";
}
}
/*
// 触摸屏幕图标改变音乐状态
music.addEventListener("touchstart", function(event) {
if (audio.paused) {
audio.play();
this.setAttribute("class", "play");
} else {
audio.pause();
this.setAttribute("class", "");
}
}, false);
*/
// 点击屏幕开启好运2018
page1.onclick = function() {
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){
page2.setAttribute("class", "page fadeOut");
page3.setAttribute("class", "page fadeIn");
}, 5500);
}
/*
// 触摸屏幕屏幕开启好运2018
page1.addEventListener("touchstart", function(event){
page1.style.display="none";
page2.style.display="block";
page3.style.display="block";
page3.style.top="100%";
setTimeout(function(){
page2.setAttribute("class", "page fadeOut");
page3.setAttribute("class", "page fadeIn");
}, 5500);
}, false);
*/
}
4.style.css里面的代码如下所示:
@CHARSET "UTF-8";
/*所有的样式*/
* {
margin: 0;
padding: 0;
border: none;
font-size: 1.5625vw;
font-family: "Microsoft Yahei";
}
html, body {
height: 100%;
overflow: hidden;
}
/*音乐的样式*/
.music {
width: 15vw;
height: 15vw;
border: 4px solid #ef1639;
position: fixed;
top: 3vh;
right: 4vw;
z-index: 5;
border-radius: 50%;
background: #fff;
}
.music>img:first-of-type {
position: absolute;
top: 24%;
right: 2.5%;
z-index:1;
width: 28.421%;
}
.music>img:last-of-type {
width: 79%;
position: absolute;
top: 0;
right: 0;
z-index:0;
bottom: 0;
left: 0;
margin: auto;
}
.music>img.play{
-webkit-animation:music_disc 4s linear infinite;
animation:music_disc 4s linear infinite;
}
@keyframes music_disc{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@-webkit-keyframes music_disc{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
/*背景的样式*/
.page {
height: 100%;
width: 100%;
position: absolute;
}
.page>.bg {
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
/*第一页的样式*/
#page1 {
display: block;
}
#page1>.bg {
background: url("../images/p1_bg.jpg") no-repeat center center;
background-size: 100%;
}
#page1>.p1_lantern {
width: 45vw;
height: 71.2vh;
font-size: 3.506rem;
position: absolute;
top: -3.4%;
right: 0;
left: 0;
color: #fff;
margin: auto;
background: url("../images/p1_lantern.png") no-repeat center bottom;
background-size: 100%;
padding-top: 31vh;
box-sizing: border-box;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
#page1>.p1_lantern:before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
content: "";
margin: auto;
border-radius: 50%;
width: 30vw;
height: 30vw;
background: #d60b3d;
opacity: .5;
-webkit-box-shadow: 0 0 10vw 10vw #d60b3d;
-moz-box-sizing: 0 0 10vw 10vw #d60b3d;
-ms-box-sizing: 0 0 10vw 10vw #d60b3d;
-o-box-sizing: 0 0 10vw 10vw #d60b3d;
box-sizing: 0 0 10vw 10vw #d60b3d;
margin: auto;
width: 30vw;
-webkit-animation: p1_lantern .5s infinite alternate;
animation: p1_lantern .5s infinite alternate;
}
@keyframes p1_lantern{
0% {
opacity: .5;
-webkit-transform:scale(.8,.8);
transform:scale(.8,.8);
}
100% {
opacity: 1;
}
}
@-webkit-keyframes p1_lantern{
0% {
opacity: .5;
-webkit-transform:scale(.8,.8);
transform:scale(.8,.8);
}
100% {
opacity: 1;
}
}
#page1>.p1_imooc {
position: absolute;
right: 0;
left: 0;
bottom: 9vh;
background: url("../images/p1_imooc.png") no-repeat center center;
background-size: 100%;
width: 27.656vw;
height: 18.63vh;
margin: auto;
}
#page1>.p1_words {
font-size: 2.134rem;
position: absolute;
right: 0;
bottom: 48px;
left: 0;
text-align: center;
color: #231815;
}
/*第二页的样式*/
#page2 {
display: none;
-webkit-transition: .5s;
transition: .5s;
}
#page2.fadeOut {
opacity: .3;
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#page2>.p2_bg_loading{
z-index: 4;
background: #ef1639;
-webkit-animation: p2_bg_loading 1s linear forwards;
animation: p2_bg_loading 1s linear forwards;
}
@keyframes p2_bg_loading{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@-webkit-keyframes p2_bg_loading{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
#page2>.bg {
background: url("../images/p2_bg.jpg") no-repeat center center;
background-size: 100%;
}
#page2>.p2_circle {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: url("../images/p2_circle_outer.png") no-repeat center center;
background-size: 100%;
width: 59.375vw;
height: 59.375vw;
border-radius: 50%;
-webkit-animation:p2_circle_outer 1s linear 3s infinite;
animation:p2_circle_outer 1s linear 3s infinite;
}
@keyframes p2_circle_outer{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
@-webkit-keyframes p2_circle_outer{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg);
}
}
#page2>.p2_circle:before {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
content: "";
background: url("../images/p2_circle_middle.png") no-repeat center center;
background-size: 100%;
width: 45.625vw;
height: 45.625vw;
border-radius: 50%;
-webkit-animation:p2_circle_middle 1s linear 2s infinite;
animation:p2_circle_middle 1s linear 2s infinite;
}
@keyframes p2_circle_middle{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}
}
@-webkit-keyframes p2_circle_middle{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(720deg);
transform:rotate(720deg);
}
}
#page2>.p2_circle:after {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
content: "";
background: url("../images/p2_circle_inner.png") no-repeat center center;
background-size: 100%;
width: 39.9375vw;
height: 39.9375vw;
border-radius: 50%;
-webkit-animation:p2_circle_inner 1s linear 1s infinite;
animation:p2_circle_inner 1s linear 1s infinite;
}
@keyframes p2_circle_inner{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}
@-webkit-keyframes p2_circle_inner{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(-1080deg);
transform:rotate(-1080deg);
}
}
#page2>.p2_2016 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
background: url("../images/p2_2016.png") no-repeat center center;
background-size: 100%;
width: 27.5vw;
height: 6.24vh;
}
/*第三页的样式*/
#page3 {
display: none;
-webkit-transition: .5s;
transition: .5s;
}
#page3.fadeIn{
-webkit-transform: translate(0, -100%);
transform: translate(0, -100%);
}
#page3>.bg {
background: url("../images/p3_bg.jpg") no-repeat center center;
background-size: 100%;
}
#page3>.p3_logo {
width: 34.6875vw;
height: 6.327vh;
position: absolute;
top: 7.82vh;
right: 0;
left: 0;
margin: auto;
background: url("../images/p3_logo.png") no-repeat center center;
background-size: 100%;
}
#page3>.p3_title {
width: 48.125vw;
height: 50vh;
position: absolute;
top: 21vh;
right: 0;
left: 0;
margin: auto;
background: url("../images/p3_title.png") no-repeat center center;
background-size: 100%;
}
#page3>.p3_second {
width: 22.8125vw;
height: 41.652vh;
position: absolute;
top: 25.48vh;
left: 3.75vh;
background: url("../images/p3_couplet_second.png") no-repeat center center;
background-size: 100%;
}
#page3>.p3_first {
width: 22.8125vw;
height: 41.652vh;
position: absolute;
top: 25.48vh;
right: 3.75vw;
background: url("../images/p3_couplet_first.png") no-repeat center center;
background-size: 100%;
}
#page3>.p3_blessing {
width: 32vw;
height: 32vw;
position: absolute;
right: 0;
bottom: 10vh;
left: 0;
margin: auto;
border-radius: 50%;
background: url("../images/p3_blessing.png") no-repeat center center;
background-size: 100%;
background: url("../images/p3_blessing.png") no-repeat center center;
-webkit-animation:p3_blessing 2s linear infinite;
animation:p3_blessing 2s linear infinite;
}
@keyframes p3_blessing{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
@-webkit-keyframes p3_blessing{
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
5.在浏览器里面输入http://localhost:8080/Demo/index.jsp将浏览器调到适当的大小运行得到一个动态的带有可控音乐的贺卡,代码的下载地址:http://download.csdn.net/download/qq_29656961/10006772。
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/14819.html