【Summary】——>Web组·Week8

2017年5月28日，在Web组的第八周正式结束，这周主要任务为CSS3的学习，刚开始在慕课网上找的有关CSS3的教程，这周完成的任务是利用hover实现图片动态效果、设置animation动画、利用CSS3和JS的结合实现图片卡片式翻转。

利用hover实现动态效果：

1.运用到HTML5标签figure、figcaption实现图文并茂效果（图片、标题[、简单描述]）：

figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

2.利用位移移动与过渡时间实现动画的效果(+hover);

3.利用伪类选择器对相同标签不同位置的部分实现动画延迟，使得效果更舒适

Codes:

 

figure{
	position: relative;
	width: 450px;
	overflow: hidden;
	height: 480px;
	display: inline-block;
	float: left;
}
figure img{
	opacity: 0.8;transition: all 0.35s;
	width: 100%;
}
figure figcaption p,h2{transition: all 0.35s}
.test1 figcaption p{
font-size: 15px;
color: white;
background-color: black;
font-weight: bold;
margin:6px;
text-align: center;
transform: translate(-180px,0px);
}
.test1 figcaption p:nth-of-type(1){/*第一个p标签*/
	transition-delay: 0.05s;
	position: absolute;
	top: 230px;
}
.test1 figcaption p:nth-of-type(2){
	transition-delay: 0.1s;
	position: absolute;
	top:320px;
	left: 15px;
}
.test1 figcaption p:nth-of-type(3){
	transition-delay: 0.15s;
	position: absolute;
	top: 80px;
	left: 0;
}
.test1 figcaption p:nth-of-type(4){
	transition-delay: 0.25s;
	position: absolute;
	left: 55px;
	top: 40px;
}
.test1 figcaption{padding: 20px;}
.test1:hover figcaption p{transform: translate(0px,0px);}
.test1:hover img{transform: translate(-30px,0px);opacity: 0.5}

设置animation动画：

 

1.通过animation设置动画的属性，通过百分比可以实现元素的在不同时间段的位置。

Codes：

 

.pic{
	width: 300px;
	height: 200px;
	animation: anim 20s;
	-webkit-animation:anim 20s infinite alternate;
	position: relative;
	display: inline-block;
}
@keyframes anim{
	0%{right:0;bottom: 0 }
	100%{right:600px;bottom:0; }
}

图片卡片式翻转效果：

 

1.div层的设置比较复杂，弄清楚层次以及层次的作用是实现此动画效果的首要要求：

每张图片以photo转载，photo有前后两面（photo_front和photo_back），通过onclick时间引入JS函数，实现对photo的css样式（前、后面）的转换，接着设一层photo-wrap，实现对“卡片”翻面的视觉效果，再就是side层次（side-front和side-back），分别存放前后面的显示的内容，

2.注意点：需要支持3d效果，翻面时另一面的内容应该隐藏；

3.JS部分：从字符串的角度获取CSS样式名，并用string相关对象对样式进行修改。

Codes：

 

<div class="number">
	<div class="photo  photo_front" onClick="turn(this)">
		<!--phtot-wrap负责翻转-->
		<div class="photo-wrap">
			<div class="side side-front">
				<p class="image"><img src="img/a2.jpg"></p>
				<p class="caption">Fatima Sana Shaikh</p>
			</div>
			<div class="side side-back">
				<p class="desc">caption</p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
//1.翻面控制
	function turn(elem){
		var cls=elem.className;
		if (/photo_front/.test(cls)) {
			cls=cls.replace(/photo_front/,'photo_back')
		}else{
			cls=cls.replace(/photo_back/,'photo_front')
		}
		return elem.className=cls;
	}
</script>	<!--phtot-wrap负责翻转-->
		<div class="photo-wrap">
			<div class="side side-front">
				<p class="image"><img src="img/a2.jpg"></p>
				<p class="caption">Fatima Sana Shaikh</p>
			</div>
			<div class="side side-back">
				<p class="desc">caption</p>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
//1.翻面控制
	function turn(elem){
		var cls=elem.className;
		if (/photo_front/.test(cls)) {
			cls=cls.replace(/photo_front/,'photo_back')
		}else{
			cls=cls.replace(/photo_back/,'photo_front')
		}
		return elem.className=cls;
	}
</script>

不足部分：虽然实现了各个效果，但是部分知识点还只是零碎式运用，需要抽取时间对其系统了解，并且在学习后并不能独立的再次编写，还需重复练习与学习，加油啦！