建站百科

NEWS

鼠标移上去图片变成文字的网站小案例让你的网站动起来

2022/5/5 13:09:33 阅读()



  今天分享“鼠标移上去图片变成文字”的网站小案例,我们还是通过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/

    服务热线

    24小时咨询:

    15054251826

    业务咨询:

    15966820013(微信同号)

    官方微信

    关注公众号

    扫一扫加微信

    Copyright © 2011-2022 青岛诚企网络 city86.com
    青岛诚企网络专业企业网站建设-企业快速建站-成品网站制作-网站定制-网站设计-专业网站建设公司.

    在线客服

    Online Service