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

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

原创

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

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #html

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

<!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);
            }
            oDiv.onmouseout = function () {
                move(30);