master

分支 (1)

管理

管理

master

css
/
过渡和动画.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡和动画</title>
    <style>
        .outer {
            width: 1500px;
            height: 400px;
            border: 2px solid black;
        }

        .inner1 {
            width: 200px;
            height: 200px;
            background: green;
            transition: 2s linear;
        }

        .inner2 {
            width: 200px;
            height: 200px;
            background: tomato;
        }

        .outer:hover .inner1 {
            transform: translate(1300px);
        }

        .outer:hover .inner2 {
            animation: gg 1.5s linear forwards;
        }

        @keyframes gg {
            0% {}

            50% {
                border-radius: 50%;
            }

            100% {
                transform: translate(1300px) rotate(360deg);
            }
        }
    </style>
</head>

<body>

    <div class="outer">
        <div class="inner1"></div>
        <div class="inner2"></div>
    </div>

</body>

</html>