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