图片的翻转
一个大的div,2个子div
HTML部分
<div class="courseLogo">
<div class="courseBefore" style="background-image: url(images/occasion-1.jpg);"></div>
<div class="courseAfter"><img src="images/occasion-2.jpg" alt="" width="100px" height="100px"></div>
</div>
CSS 3部分
.courseLogo{
width: 120px;
height: 132px;
margin-top: 1px;
position: relative;
box-sizing: border-box;
perspective: 800px;
}
.courseBefore{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
background-repeat: no-repeat;
background-position: center center;
backface-visibility: hidden;
transition: 1s;
}
.courseAfter{
width: 100%;
height: 100%;
position: absolute;
top:0;
left: 0;
color: #fff;
background-color: dodgerblue；
transform: rotateY(-180deg);
backface-visibility: hidden;
transition: 1s;
}
.courseLogo:hover .courseBefore{
transform: rotateY(180deg);
}
.courseLogo:hover .courseAfter{
transform: rotateY(0deg);
}
其中：
backface-visibility: hidden; /*不可见*/
用于将backface-visibility 属性定义当元素不面向屏幕时是否可见。
2.点击动画特效的CSS3单选框和复选框。
复选框
<input type="checkbox" checked>
<input class="indeterminate" type="checkbox">
<input type="checkbox">
感悟:制作网页最重要的细心，且有耐心，再写网页的一个过程中，或许一个随意的动作，就有可能有代码错误，而无法显示出来，在这网页，过程中我就是这样，一个类名，一个选择器就让找了一个晚上，现在想起来还记忆犹新。结果固然重要，但是最重要的是过程。敲代码是一个过程，在这期间要多踩坑，牢记教训，不要在一个地方跌倒2次。在抬头看路的时候，不要忘记自己脚下还走路要走。
这一段时间一直在写网页，但是忘记了初心。现在回想开学这2个月，真有点后悔。刚开学是有一点忙，也不知道网页怎么写，进度缓慢，也就算了。但是10月份上旬，知道了方向，并且按目标执行。写了2 3个网页，以至于后面有点小傲娇。到了下旬至今日，进度一直都没有什么进展还是最初的样子，所以我说忘记了初心。在这段没有赶进度的时间，进度就不说了，同样也没在课外书的世界里留下足迹，买的名著也没翻过几页。哎……就这样还在感叹时间都去哪？自己感觉惭愧。本该在这个年纪做的事，都没有去尝试，更别说全身心的投入了。总之，这样的生活平淡无奇，失去本来的色彩与趣味。不仅浪费了时间，也辜负了自己最好的年华。
再过了一段时间就是考研笔试了，看着他们认真复习确实辛苦，但是他们有没有想过比他们优秀的人一直都在路上奔跑。哈佛凌晨两点半依然灯火通明，有优秀的人想比，绝对不是比拼爹，比背景而是行动力与自控力。他们有目标，有行动，爱思考，比任何人都知道自己想要的是多少。而我们呢，光说不练假把式，总是在自欺欺人。试问，结果会骗人吗？No pain,no gain.与其面对结果愧疚，还不如现在明确目标，迈出那毫不起眼而又关键的一步呢？
反思:没有目标的人最可怕。自己前一段时间浪费了，希望今后能惜时，爱时，知道自己的目标。迷茫时，赶紧找同学与老师，解决自己存在的问题・_・
近期小目标:学好本专业的课，这边的计算机也不要落下，紧跟学习进度，适当拓展一下计算机知识，下定决心，全力以赴学好计算机。
网友评论