day42 一个极简动画效果（复习相关属性)

news2024/11/28 10:53:39

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <title>动画页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            margin-top: 100px;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        h1 {
            color: black;
            margin-top: 0;
        }

        .animated-element {
            font-size: 24px;
            color: green;
            opacity: 0;
            transform: translateX(-100%);
            animation: slide-in 1s ease-out forwards;
        }

        @keyframes slide-in {
            0% {
                opacity: 0;
                transform: translateX(-100%);
            }

            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .button {
            display: inline-block;
            padding: 10px 20px;
            margin-top: 20px;
            background-color: plum;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            border: 0px;
        }

        .button:hover {
            background-color: purple;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>动画页面</h1>
        <div class="animated-element">
            这是一个带有动画效果的元素。
        </div>
        <button class="button" onclick="animateElement()">触发动画</button>
    </div>

    <script>
        function animateElement() {
            var animatedElement = document.querySelector('.animated-element');
            animatedElement.style.animation = 'none'; // 先将动画重置为初始状态
            void animatedElement.offsetWidth; // 强制浏览器重新计算布局
            animatedElement.style.animation = 'slide-in 1s ease-out forwards'; // 再重新播放动画
        }
    </script>
</body>

</html>