【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>

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