前端学习第五天

一、鼠标经过一个图片时显示的透明图片案例：

用到方法：

相对定位position:relative;

绝对定位position:absolute;

记忆:两个图片中，left和top是图片一相对于图片二中经常用到的，达到重叠的效果

页面结构

<div class="box">
        <a href="javascript:">
            <img src="./images/tudou.jpg" alt="">
            <div class="mask">这是一个相对定位经常用到的方法</div>
        </a>
        <a href="javascript:">
            <img src="./images/tudou.jpg" alt="">
            <div class="mask">这是一个相对定位经常用到的方法</div>
        </a>
    </div>

样式修饰

    <style>
        .box {
            width: 800px;
            height: 700px;
            border: 1px solid red;
            margin: 100px auto;
        }
        /* a为行级元素 必须转化为块级元素 */
        .box a {
            display: block;
            width: 448px;
            height: 252px;
            margin: 50px auto;
            position: relative;
        }
        .box .mask{
            width: 448px;
            height: 252px;
            position: absolute;
            top: 0;
            left: 0;
            /* 鼠标没经过时隐藏元素 */
            display: none;         
            text-align: center;
            font-size: 20px;
            color: red;
            /* 不平铺且水平居中 */
            background: rgba(0, 0, 0, 0.6) url(images/arr.png) no-repeat center;
        }
        .box a:hover .mask{
            display: block;
        }
    </style>

溢出隐藏转为滚动	overflow: scroll; /*scroll 滚动条 */
溢出隐藏自动换行	**overflow: auto; /auto 自动 /
垂直居中	height: 100px;line-height: 100px;
水平居中	text-align: center;

二、backface-visibility翻转盒子案例

backface-visibility 属性定义当元素不面向屏幕时是否可见。

div {
			width: 224px;
			height: 224px;
			margin: 100px auto;
			position: relative;
		}
		div img {
			position: absolute;
			top: 0;
			left: 0;
			transition: all 1s; 
		}
		div img:first-child {
			z-index: 1;
			backface-visibility: hidden; /* 不是正面对象屏幕，就隐藏 */
		}
		div:hover img {
			transform: rotateY(180deg);
}

三、**animation动画案例

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

@keyframes 动画名称 {
from{ 开始位置 } 0%
to{ 结束 } 100%
}

body {
  background: pink;
}
img {
  width: 400px;
}
.animation {
  animation-name: goback;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}
@keyframes goback {
  0%{}
  49%{
    transform: translateX(1000px);
  }
  55%{
    transform: translateX(1000px) rotateY(180deg);
  }
  95%{
    transform: translateX(0) rotateY(180deg);
  }
  100%{
    transform: translateX(0) rotateY(0deg);
  }
}