首页前端开发HTMLhtml代码图片淡入淡出

html代码图片淡入淡出

时间2023-11-15 19:04:03发布访客分类HTML浏览578
导读:HTML代码中,可以通过CSS的transition属性实现图片的淡入淡出效果。 <html> <head> <style> .fade-in-out {...

HTML代码中,可以通过CSS的transition属性实现图片的淡入淡出效果。

    html>
        head>
            style>
            .fade-in-out {
                    opacity: 1;
                    transition: opacity 0.5s ease-in-out;
            }
            .fade-in-out:hover {
                    opacity: 0.5;
            }
            /style>
        /head>
        body>
            img class="fade-in-out" src="your-image-source" alt="your-image-description">
        /body>
        /html>
    

上述代码首先定义了一个.fade-in-out的类,给与图片opacity属性初始值为1,transition动画效果的时间为0.5s,timing function为ease-in-out。

当鼠标悬停在图片上时,.fade-in-out:hover类将图片的opacity属性改为0.5,实现了图片的淡出效果。

通过CSS的transition属性,我们可以轻松实现HTML代码中的图片淡入淡出效果,让页面更具动感。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: html代码图片淡入淡出
本文地址: https://pptw.com/jishu/540671.html
html代码图片有空隙 html代码图片居中显示

游客 回复需填写必要信息