CSS3 动画简单的应用_css3动画简单应用-优快云博客

本文链接：https://blog.youkuaiyun.com/csdn_meng/article/details/105375757

本文介绍了一个使用CSS动画实现的表格展示效果，通过hover效果改变行背景颜色，同时利用JavaScript实现表格行点击后的子表格显示与隐藏功能。文章详细展示了如何设置元素定位、动画效果及事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>animal frame</title>
    <style>
        .container {
            height: auto;
            width: 100%;
            height: 600px;
            position: absolute;
            top: 0px;
            left: 0px;
            border: 1px solid red;
        }

        .super {
            width: 800px;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 1;
        }

        .sub {
            width: 1600px;
            position: absolute;
            right: 0px;
            top: 0px;
            border: 1px solid darkblue;
            background-color: rgba(88, 88, 88, 0.9);
            z-index: 100;
            color: aliceblue;
            animation: myShow 0.5s infinite ease;
            animation-iteration-count: 1;
            animation-direction: alternate;
            -webkit-animation: myShow 0.5s infinite ease-in;
            -webkit-animation-iteration-count: 1;
            -webkit-animation-direction: alternate;
        }

        tr:hover {
            cursor: pointer;
            background-color: azure;
        }

        @keyframes myShow {
            from {
                right: -1600px;
                opacity: 0;
            }
            to {
                right: 0px;
                opacity: 1;
            }
        }

        @-webkit-keyframes myShow {
            from {
                right: -1600px
            }
            to {
                right: 0px
            }
        }
    </style>
</head>
<body>
<div class="container">
    <table id="superTable" border="1" cellpadding="0" cellspacing="0" class="super">
        <thead>
        <th>sub col 1</th>
        <th>sub col 2</th>
        <th>sub col 3</th>
        </thead>
        <tbody>
        <tr>
            <td>row 1 col 1</td>
            <td>row 1 col 2</td>
            <td>row 1 col 3</td>
        </tr>
        <tr>
            <td>row 2 col 1</td>
            <td>row 2 col 2</td>
            <td>row 2 col 3</td>
        </tr>
        <tr>
            <td>row 3 col 1</td>
            <td>row 3 col 2</td>
            <td>row 3 col 3</td>
        </tr>
        </tbody>
    </table>
    <div id="sub" class="sub">
        <table width="100%" border="1" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th>col 1</th>
                <th>col 2</th>
                <th>col 3</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>row 1 col 1</td>
                <td>row 1 col 2</td>
                <td>row 1 col 3</td>
            </tr>
            <tr>
                <td>row 2 col 1</td>
                <td>row 2 col 2</td>
                <td>row 2 col 3</td>
            </tr>
            <tr>
                <td>row 3 col 1</td>
                <td>row 3 col 2</td>
                <td>row 3 col 3</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<script>
    let sub = document.querySelector("#sub");
    sub.style.display = 'none';
    let s = document.querySelector("#super");
    let st = document.querySelector("#superTable");
    let dataRows = st.querySelector("tbody").querySelectorAll("tr");
    dataRows.forEach(row => {
        row.onclick = e => {
            let cells = e.target.cells;
            if (cells) {

            } else {
                cells = e.target.parentNode.cells;
            }
            let content = cells[0].innerText
            console.log(content);
            sub.style.display = sub.style.display == 'none' ? 'block' : 'none';
        }
    })
</script>
</body>
</html>