HTML5+CSS3实现春节贺卡_技术问答

慕圣7103443

这个用火狐浏览器运行的结果是怎么样的？？: http://www.imooc.com/activity/project1 可以拿项目地址试下，一样的; 2018-05-30 1回答·1128浏览

我的名字你的姓

page2的三个圈不显示出来

已采纳慕用3281809 的回答

你在运行程序的时候按下F12，看看报什么错，把错误日志发上来；

我估计你是没有往image目录下上传那几张图片吧，所以才不显示三个圈；

2018-01-12 2回答·1591浏览

JS菌

四个圈怎么写？: 再创建空的DIV标签写样式吧（一个标签前后应该都分别只有一个:before， :after可以写，没见过 div:before:before 这样，估计不行，，）; 2017-08-30 1回答·1569浏览

慕雪7515468

三个背景画面重叠: 三个背景重叠; 2017-05-20 3回答·1227浏览

慕粉0103296064

标签中的 content:"" 是啥意思？有啥作用？: 如果使用了：before选择器或：after选择器，那么一定要配合content属性使用，表示要插入的内容，""表示插入的内容为空，并且content属性只能与伪类选择器一起使用。; 2017-04-16 1回答·1434浏览

6HaHa

为什么我中间的文字“2016”没有出来，我是把“2016”换成“2017”，图片我也改了。: 图片没有写后缀 .png; 2017-01-25 3回答·788浏览

角落的学生

为什么我的p2_circle_outer旋转的时候会使整个背景变小: 2016-12-16 1回答·738浏览

角落的学生

有BUG啊，救命啊= =: 为什么我的p2_circle_outer旋转的时候会使整个背景变小; 2016-12-16 1回答·624浏览

Do0_0

好神奇的居中方法，到底是什么原理呢: 可以了解一下弹性布局，他还是很方便的; 2016-10-31 4回答·873浏览

慕粉4291128

用什么工具来编写代码的: Sublime Text; 2016-10-26 1回答·676浏览

小何3804283

浏览器前缀: 已采纳无言丶独上青天_03899818 的回答; html5的属性要加前缀， HTML4 的不要; 2016-09-09 2回答·934浏览

慕粉3384089

明明是iphone6模式，为什么innerWidth是981？: 看看你自己的查询语句; 2016-09-04 1回答·847浏览

zero沐白

css中父类下面的子类中间一定要加“>”咩。。: 已采纳慕工程2957023 的回答; 加>表示子元素，不加表示后代元素。一个是儿子，一个是儿子、孙子。。。。。; 2016-08-30 3回答·585浏览

Alongire

为什么页面重叠在了一起: 2016-06-11 2回答·1078浏览

心语3380848

Html5中新婚贺卡案例居中问题: 都可以，你的那种需要知道确切的宽高值才能设置，老师这种的话好像存在兼容性（可以自适应）; 2016-06-10 1回答·979浏览

大海qq

大牛没有源代码吗？

<!DOCTYPE html>
<html>
<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>html5</title>
<link rel="stylesheet" href="./style/style.css">
<script type="text/javascript" src="script/script.js"></script> 
</head>
<body>
<div>
<img src="./images/music_pointer.png">
<img id="music" src="./images/music_disc.png">
</div>
<div id="page1">
<div></div>
<div>点击屏幕<br>开启好运2016</div>
<div>2016by123</div>
</div>
<div id="page2">
<div></div>
<div></div>
<div></div>
</div>
<div id="page3">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<audio autoplay="true">
<source src="./audio/music.mp3" type="audio/mpeg">
</audio>
</body>
</html>

* {margin: 0;padding: 0;font-size: 1.5625vw;font-family: "微软雅黑";
}
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%;width: 28.421%;z-index: 1;}
.music > img:last-of-type {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;width: 79%;z-index: 0;}
.music > .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);
	}
}
/* 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%;right: 0;left: 0;margin: auto;background: url(../images/p1_lantern.png) no-repeat center center;background-size: 100%;width: 45vw;height: 71.2vh;font-size: 3.5rem;padding-top: 31vh;text-align: center;-webkit-box-sizing:border-box;   -moz-box-sizing:border-box;    -ms-box-sizing:border-box;     -o-box-sizing:border-box;color: #fff;
}
#page1 > .p1_lantern:before{position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: -1;content: "";width: 30vw;height: 30vw;background: #d60b3b;opacity: 0.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;
	-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-transform: scale(1,1);
		        transform: scale(1,1);
	}
}
#page1 > .p1_words {position: absolute;left: 0;right: 0;bottom: 48px;font-size: 3rem;text-align: center;

}
/* page2 */
#page2 {display: none;
	transition: .5s;
}
#page2 > .p2_bg_loading {
	z-index: 4; background: #ef1639;
	-webkit-animation: p2_bg_loading 2s linear forwards;
	        animation: p2_bg_loading 2s linear forwards;
}
@keyframes p2_bg_loading {
	0%   {opacity: 1;}
	100% {opacity: 0;}
}
#page2.fadeOut {
	opacity: .3;
	-webkit-transform: translate(0,-100%);
	        transform: translate(0,-100%);
}
#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;background: url(../images/p2_circle_outer.png) no-repeat center center;background-size:100%;width: 59vw;height: 59vw;
	-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);
	}
}
#page2 > .p2_circle:before {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;content: "";background: url(../images/p2_circle_middle.png) no-repeat center center;background-size:100%;width: 45vw;height: 45vw
	-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);
	}
}
#page2 > .p2_circle:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;content: "";background: url(../images/p2_circle_inner.png) no-repeat center center;background-size:100%;width: 39vw;height: 39vw;
	-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);
	}
}
#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: 27vw;height: 27vw
}
/* page3 */
#page3 {display: none;
	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_second {width: 23vw;height: 41vh;position: absolute;top: 24vh;left: 4vw;background: url(../images/p3_couplet_second.png) no-repeat center center;background-size: 100%;
}
#page3 > .p3_first {width: 23vw;height: 41vh;position: absolute;top: 24vh;right: 4vw;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;left: 0;bottom: 10vh;margin: auto;border-radius:50%;;background: url(../images/p3_blessing.png) no-repeat center center;-webkit-background-size: 100%;background-size: 100%;
	-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);
	}
}

window.onload = function(){
	var music = document.getElementById('music');
	var audio = document.getElementsByTagName('audio')[0];
	var page1 = document.getElementById('page1');
	var page2 = document.getElementById('page2');
	var page3 = document.getElementById('page3');
	//音乐停止 动画停止
	audio.addEventListener("ended",function(event){
		music.setAttribute("class","");
	},false)
	//点击停止和播放 音乐 动画
	music.addEventListener("touchstart",function(event) {
		if (audio.paused) {
			audio.play();
			this.setAttribute("class","play");
		} else {
			audio.pause();
			this.setAttribute("class","");
		}
	},false)
	//切换页面
	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)
	
}

有些地方的东西省略了，大体是一样的

2016-05-24 1回答·1097浏览

qq_慕九州6119357

这两个的图片死活不出来不知道为什么: 我加了也米有用？; 2016-05-24 2回答·691浏览

qq_小白_7

vw,vh能用在pc端的开发中吗: vw vh 是以当前浏览器的窗口大小为准,分为100份50vw 就是占宽度的一半,高度同理.; 2016-05-09 1回答·4336浏览

允少

page2我把circle定义为内圆，before为中圆，afer为外圆，导致外圆不居中，什么原因？: 请问这个问题解决了么，我也遇到了; 2016-03-24 2回答·722浏览

哆啦A喵

关于像素计算问题: 10px/640px*177px/10px; 2016-03-24 1回答·669浏览

qq_只因为你_0

求解释什么东西啊？: http://www.zhangxinxu.com/wordpress/2012/09/new-viewport-relative-units-vw-vh-vm-vmin/ 可以看下张老师这篇文章; 2016-03-18 1回答·631浏览

旗旗

中间那个白圈图片不出来，

已采纳打酱油的军军的回答

这是伪类,要加上content: "";

还有background-size: 100%;,没有少吧!定位也没错吧!

2016-03-11 1回答·867浏览

因扎吉

为什么用befor和after 不直接用div写在结构？: 2016-02-23 2回答·1068浏览

SMG2

为什么page2样式后面要加个content:"": 因为:before和:after伪类是没有目标对象的，不像直接用class是有作用对象，content属性就是用css的方法增加目标对象，也就是html结构元素。content的值一般是文字。也可以用js获取增加其他内容。; 2016-02-04 2回答·669浏览