今天分享“鼠标移上去图片变成文字”的网站小案例，我们还是通过css实现当鼠标移上去，内容图片飞走后新内容显示，实现效果如例：这次案例我们用到的属性还是animation和transform属性。下面我们一来看看。首先要先定义个样式文件main.css，然后样式为：

.nf-media {
position: relative;
overflow: hidden;
}

.nf-absolute {position: absolute !important;}

.nf-pos-full{
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.nf-bc-black-70 { background-color: rgba(0,0,0,0.7) !important;}

.animate-fadein-bottom {transform:translateY(100%); opacity:0;}


@keyframes animate-fadein-bottom {
    from { transform:translateY(100%); opacity:0; }
    to { transform:translateY(0); opacity:1; }
}

.animate-fadeout-top {
    transform:translateY(0); opacity:1;
}

@keyframes animate-fadeout-top {
    from { transform:translateY(0); opacity:1; }
    to { transform:translateY(-100%); opacity:0; }
}

    然后在网页中调用以上样式,下面为网页中代码。

    <div class="nf-media" data-animate="hover">
        <div class="animate-fadeout-top" style="animation-duration: 0.5s; transition-duration: 0.5s;">
            <img src="/template/city86/uploads/bird2.jpg" class=""  alt="">
        </div>
        <div class="nf-absolute nf-pos-full nf-bc-black-70 animate-fadein-bottom" style="animation-duration: 0.5s; transition-duration: 0.5s;">
            <div class="nf-absolute nf-pos-cc nf-pd-15 nf-fc-white">
                <h4>展示案例名称</h4>
                <p>展示案例内容为city86专业网站建设12年，响应式企业网站建设请联系我们。</p>

            </div>
        </div>
    </div>

    第一层div中nf-media样式是定义一个容器，然后我们定义一个data-animate="hover"，意思是鼠标划过才会触发下面的动作。

    第二层中第一个Div，我们给他定义属性为：animate-fadeout-top是从顶端飞出，样式中translateY为垂直移动，另外再定义一个style样式：animation-duration: 0.5s; transition-duration: 0.5s;意思是动画在0.5秒内完成，transition-duration 属性规定完成过渡效果需要花费的时间为0.5秒。

    第二层第二个div，我们定义一个样式为：nf-absolute、nf-pos-full、nf-bc-black-70，定义这层div为一个绝对，背景色为黑色透明，宽高都设置100%，animate-fadein-bottom从底部飞入，然后也是定义动画为0.5秒，过渡为0.5秒的这么个层。
。
    关于如何使用css样式做一个图片变文字的动态网站小案例我们就分享到这里。这个案例还是主要用到animation属性和transform属性，希望以上内容可以对大家有一定的帮助，可以学到更多知识。本文city86网站原创作品，转载请注明出处。也可以把它分享出去让更多的人看到。

本文地址：http://www.city86.com/news_view_270/