CSS3 动效实现

无鼠标上移是的效果图

鼠标上移后的样式图

效果：h2下移，p上移，div旋转成x
存在一个遮罩层

一、先分析整体有什么（有什么就先写什么）
注意层级关系

    <li>
        <img src="../素材/动效/lanrenzhijia5.jpg" alt="">
        <h2><span>WILD ROMEO</span></h2>
        <div></div>
        <div></div>
        <p>OMEO NEVER KNOWS WHAT HE WANTS. HE
            SEEMED TO BE VERY CROSS ABOUT SOMETHING.</p>
    </li>

1.先设置通用样式、列表样式、清除列表默认项目

*{
    margin: 0;
    padding: 0;
}
/*设置列表样式*/
ul li{
    list-style-type: none;
    overflow: hidden;
    width: 530px;
    height: 400px;
    position: relative;
}

2.为了使文字能浮于图片上显示，将图片脱离文档流

ul li:nth-child(1) img{
    position: absolute;
    z-index: -2;
    transform: scale(1.1);
    transition: all .3s linear;
}

设置z-index: -2;为负值，其作用是：使图片显示在标准元素下方
鼠标上移后，图片效果

ul li:nth-child(1):hover img{
    transform: scale(1);
}

3.文字样式及其鼠标上移后的效果样式

ul li:nth-child(1) h2{
    color: white;
    font-size: 28px;
    margin-top: 130px;
    text-align: center;
    margin-bottom: 50px;
    transition: all .3s linear;
}
ul li:nth-child(1):hover h2{
    margin-top: 120px;
}
ul li:nth-child(1) p{
    color: white;
    /*font-size: 15px;*/
    text-align: center;
    padding: 50px;
}
ul li:nth-child(1):hover p{
      margin-top: 40px;
}

通过设置鼠标移动前后h2\p的margin -top的值来实现其上移、下移的效果
4.遮罩层
使用after伪类
注意设置content: "";

ul li:nth-child(1):hover:after{
    content: "";
    position: absolute;
    z-index: -1;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    background-color: rgba(66,66,66,.5);
}

5.两个div的样式设置

ul li:nth-child(1) div{
    border-bottom: 1px solid white;
    width: 400px;
    margin: 0 auto;
    transition: all .3s linear;
}
ul li:nth-child(1):hover div:nth-of-type(1){
    transform: rotateZ(45deg);
}
ul li:nth-child(1):hover div:nth-of-type(2) {
    transform: rotateZ(-45deg);
}