5、透明度渐变 - HTML5&CSS3.0基础部分-xyphf

最新推荐文章于 2024-09-23 02:01:58 发布

xyphf_和派孔明

最新推荐文章于 2024-09-23 02:01:58 发布

阅读量1.8k

点赞数

分类专栏： HTML5 文章标签： html5

本文链接：https://blog.csdn.net/xyphf/article/details/74372670

版权

HTML5 专栏收录该内容

52 篇文章 0 订阅

订阅专栏

1.rgba 鼠标移上透明度变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{width:200px;height:200px;background:red;transition:1s all ease;
border:10px solid green;}
#div1:hover{background:rgba(255,0,0,0.3);
            border-color: rgba(39,109,39,0.3);
}

</style>
</head>
<body>
    <div id="div1"><span>徐玉朋</span></div>
</body>
</html>

1.鼠标以上显示提示词

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
<style>
#div1{ position:relative;width:300px; height:200px; overflow:hidden; margin:100px auto;}
#div1 img{width:100%; height:100%;}

#div2{ position:absolute;left:0;bottom:-81px; width:100%; height:80px; background:#000; border-top:1px solid #fff; color:#fff;
    transition:0.7s all ease;
}
#div1:hover #div2{bottom:0; background:rgba(0,0,0,0.3);}

</style>
</head>
<body>
    <div id="div1">
        <img src="f.jpg" alt="">
        <div id="div2">3D picture ring   一个js+html5的小效果</div>
    </div>
</body>
</html>