html hover透明度与js透明度动画

最新推荐文章于 2024-04-26 19:17:54 发布

清何以解忧

最新推荐文章于 2024-04-26 19:17:54 发布

阅读量353

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_41159720/article/details/105102805

版权

本文探讨了如何在HTML元素上应用hover效果以改变透明度，并利用JavaScript实现平滑的透明度动画过渡，结合CSS实现更丰富的交互体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js透明度两种方法</title>
<style type="text/css">
    body,div,span {
        margin: 0;
        padding: 0;
    }
    #div1 {
        width: 400px;
        height: 400px;
        background: red;
        filter:alpha(opacity=30);
        opacity: 0.3;
    }
    /* #div1{
        opacity:0.4;
        filter:alpha(opacity=40); 
        background: red;
        width: 400px;
        height: 400px;
        transition: 1s;
    }
    #div1:hover{
        opacity:1.0;
        filter:alpha(opacity=100);
        transition: 1s; 
    }     */
</style>
</head>
<body>
    <script type="text/javascript">
        window.onload = function () {
            var oDiv = document.getElementById("div1");
            oDiv.onmouseover = function () {
                move(100);
            }

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

清何以解忧

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html hover透明度与js透明度动画

<!DOCTYPE html><html><head><meta charset="utf-8"><title>js透明度两种方法</title><style type="text/css"> body,div,span { margin: 0; padding:...
复制链接

扫一扫