web前端基础案例-鼠标悬停图文切换效果

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点: html/css布局思维，定位，浮动详解，css3动画详解，css3选择器详解, 通用样式与封装，企业布局思维运用，开发标准。

👇html代码：

<div class="content">
            <div class="view view-frist">
                <img src="images/1.jpg" alt="" width="" height="" />
                <div class="info">
                    <h2>HTML5 + CSS3</h2>
                    <p>创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。</p>
                    <a href="">Read More</a>
                </div>
            </div>
            <div class="view view-frist">
                <img src="images/2.jpg" alt="" width="" height="" />
                <div class="info">
                    <h2>HTML5 + CSS3</h2>
                    <p>创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。</p>
                    <a href="">Read More</a>
                </div>
            </div>
            <div class="view view-frist">
                <img src="images/3.jpg" alt="" width="" height="" />
                <div class="info">
                    <h2>HTML5 + CSS3</h2>
                    <p>创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。</p>
                    <a href="">Read More</a>
                </div>
            </div>
            <div class="view view-frist">
                <img src="images/4.jpg" alt="" width="" height="" />
                <div class="info">
                    <h2>HTML5 + CSS3</h2>
                    <p>创建HTML5文档，实战HTML5表单，实战HTML5绘画，HTML5音频与视频，Web存储，离线应用，Workers多线程处理，Geolocation地理位置等技术。</p>
                    <a href="">Read More</a>
                </div>
            </div>
        </div>

👇css代码：

    <style type="text/css">
            *{/*通配符 所有元素*/
                margin:0;
                padding:0;
            }
            a{
                text-decoration:none;
            }
            .content{
                width:680px;
                margin:20px auto 0;/*上右下左 上 左右 下 上下 左右 auto自动*/
            }
            .view{
                width:300px;
                height:200px;
                border:10px solid #fff;
                position:relative;
                overflow:hidden;
                float:left;
                margin:10px;
            }
            .view .info{
                width:300px;
                height:200px;
                background:rgba(219,127,8, 0.7);
                position:absolute;
                top:0;
                left:0;
                text-align:center;
            }
            .view .info h2{
                font-size:16px;
                background:rgba(0,0,0,0.8);
                padding:10px;
                color:#fff;
                text-align:center;
                margin-top:20px;
            }
            .view .info p{
                font-size:12px;
                padding:10px 20px;
                line-height:18px;
                text-align:left;
                color:#fff;
            }
            .view .info a{
                color:#fff;
                font-size:12px;
                background:#000;
                padding:5px 15px;
                display:inline-block;
            }
            .view-frist .info{
                opacity:0;
                transition:all 0.4s linear;
            }
            .view-frist .info h2{
                transform:translateY(-100px);
                opacity:0;
                transition:all 0.2s linear;/*过渡 all  时间 linear 速度 匀速 ease*/
            }
            .view-frist .info p{
                transform:translateY(100px);
                opacity:0;
                transition:all 0.2s linear;
            }
            .view-frist .info a{
                transform:translateX(-200px);
                opacity:0;
                transition:all 0.2s linear;
            }
            /*数字 关键（odd even） 公式*/
            .view-frist:nth-child(2n) .info a{
                transform:translateX(200px);
                opacity:0;
                transition:all 0.2s linear;
            }
            .view-frist:hover .info{
                opacity:1;
            }
            .view-frist:hover .info h2,.view-frist:hover .info p{
                opacity:1;
                transform:translateY(0);/*倾斜 旋转 比例缩放 位移*/
            }
            .view-frist:hover .info p{
                transition-delay:0.2s;/*延时*/
            }
            .view-frist:hover .info a{
                opacity:1;
                transform:translateX(0);
                transition-delay:0.3s;
            }
            
        </style>