1_用html/css/js写贺卡

来源：互联网发布：手机神奇软件编辑：程序博客网时间：2024/05/21 10:36

最近学院布置了个软件工程小项目课:写一个贺卡.

现在mooc学了个非常好的课程,老师讲的非常仔细,自己一天就跟着写出来所以就把代码帖出来,虽然还有些功能没符合老师的要求,比如

1.选择背景:列出可选背景图片
2.选择标题
3.输入文字
4.选择音乐
5.储存贺卡

现在是做了个大概的模板,功能自己添加,到时候再改吧,先写个模板,至少不会挂科.看了一天一夜,自己改一改,差不多就到这里了,

2017-4-30 03:19:42 这可是2017年的五一节啊.

图片我就不发出来了,http://www.imooc.com/video/11036在这个地址去取切片图片吧.

1.html : index.html

<!DOCTYPE html><html lang="Zh-cn"><head><meta 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,maximum-scale=1,user-scalable=no"><meta name="format-detection" content="telephone=no"><title>软工作业贺卡</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/script.js"></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>开启好运2017</div><div class="p1_imooc"></div><div class="p1_words">2017慕课网新年特献</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/G.E.M.邓紫棋 - 后会无期.mp3" type="audio/mpeg"></audio><!--搭建结构层完毕--></body></html>

2.css: style.css

/* all tag*/*{margin: 0;padding: 0;border: none;font-size: 1.5625vw;font-family: "Microsoft Yahei";}html,body{height: 100%;overflow: hidden;}/* music*/.music{position: fixed;top: 3vh;right: 4vw;z-index: 5;width: 15vw;height: 15vw;border: 4px solid #ef1639;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{position: absolute;top:0;right: 0;bottom: 0;left: 0;z-index: 0;margin:auto;width: 79%;}.music>img.play{-webkit-animation:music_disc 4s linear infinite;animation:music_disc 4s linear infinite;}@-webkit-keyframes music_disc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes music_disc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}/* page bg*/.page{position: absolute;width: 100%;height: 100%;}.page>.bg{position: absolute;z-index: -1;width: 100%;height: 100%;}/*page1*/#page1 {display: block;}#page1>.bg{background: url("../images/p1_bg.jpg") no-repeat center center;background-size: 100%;}#page1>.p1_lantern{position: absolute;top: -3.4%;right: 0;left: 0;margin: auto;background: url("../images/p1_lantern.png") no-repeat center bottom;background-size: 100%;width: 45vw;height: 71.2vh;font-size: 3.506rem;padding-top: 31vh;text-align: center;color: #fff;-webkit-box-sizing: border-box;box-sizing: border-box;}#page1 > .p1_lantern:before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: -1;content: "";margin: auto;width: 30vw;height: 30vw;background: #d60b3b;opacity: .5;border-radius: 50%;-webkit-box-shadow: 0 0 10vw 10vw #d60b3b;   -moz-box-shadow: 0 0 10vw 10vw #d60b3b;-ms-box-shadow: 0 0 10vw 10vw #d60b3b; -o-box-shadow: 0 0 10vw 10vw #d60b3b; box-shadow: 0 0 10vw 10vw #d60b3b;-webkit-animation: p1_lantern .5s infinite alternate;animation: p1_lantern .5s infinite alternate;}@-webkit-keyframes p1_lantern{0%{opacity: .5;-webkit-transform: scale(.8,.8);transform: scale(.8,.8);}100%{opacity: 1;}}@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;bottom: 9vh;left: 0;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*/#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;}@-webkit-keyframes p2_bg_loading{0%{opacity: 1;}100%{opacity: 0;}}@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;bottom: 0;left: 0;margin: auto;border-radius: 50%;background: url("../images/p2_circle_outer.png") no-repeat center center;background-size: 100%;width: 59.375vw;height: 59.375vw;-webkit-animation: p2_circle_outer 1s linear 3s infinite;animation: p2_circle_outer 1s linear 3s infinite; }@-webkit-keyframes p2_circle_outer{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@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;bottom: 0;left: 0;margin: auto;border-radius: 50%;content: "";background: url("../images/p2_circle_middle.png") no-repeat center center;background-size: 100%;width: 45.625vw;height: 45.625vw;-webkit-animation: p2_circle_middle 1s linear 2s infinite;animation: p2_circle_middle 1s linear 2s infinite; }@-webkit-keyframes p2_circle_middle{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(720deg);transform: rotate(720deg);}}@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;bottom: 0;left: 0;margin: auto;border-radius: 50%;content: "";background: url("../images/p2_circle_inner.png") no-repeat center center;background-size: 100%;width: 39.9375vw;height: 39.9375vw;-webkit-animation: p2_circle_inner 1s linear 1s infinite;animation: p2_circle_inner 1s linear 1s infinite; }@-webkit-keyframes p2_circle_inner{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(-1080deg);transform: rotate(-1080deg);}}@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;bottom: 0;left: 0;margin: auto;background: url("../images/p2_2016.png") no-repeat center center;background-size: 100%;width: 27.5vw;height: 6.24vh;}/*page3*/#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.625vh;position: absolute;top: 25.48vh;left: 3.75vw;background: url("../images/p3_couplet_second.png") no-repeat center center;}#page3>.p3_first{width: 22.8125vw;height: 41.625vh;position: absolute;top: 25.48vh;right: 3.75vw;background: url("../images/p3_couplet_first.png") no-repeat center center;}#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%;-webkit-animation: p3_blessing 2s linear infinite;animation: p3_blessing 2s linear infinite;}@-webkit-keyframes p3_blessing{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes p3_blessing{0%{-webkit-transform: rotate(0deg);transform: rotate(0deg);}100%{-webkit-transform: rotate(360deg);transform: rotate(360deg);}}

3.js: script.js

window.onload=function(){//获取元素var music=document.getElementById("music");var audio=document.getElementsByTagName("audio")[0];//当音乐播放停止时候,自动停止光盘旋转效果audio.addEventListener("ended",function(event){music.setAttribute("class","");//music.style.animationPlayState},false);//点击音乐图标,控制音乐播放效果// music.onclick=function(){// if(audio.paused){// audio.play();// this.setAttribute("class","play");// //this.style.animationPlayState="running";// }else{// audio.pause();// this.setAttribute("class","");// //this.style.animationPlayState="paused";// };// };music.addEventListener("touchstart",function(event){if(audio.paused){audio.play();this.setAttribute("class","play");//this.style.animationPlayState="running";}else{audio.pause();this.setAttribute("class","");//this.style.animationPlayState="paused";};},false);//点击屏幕 开始好运2017page1.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);};

0 0