逍遥阁

css动画

关键词: css

css动画

```
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<style>
    div {
        background-color: red;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: white;
    }

div:hover {
        animation-name: example;
        animation-duration: 3s;
    }

@keyframes example {
        0% {
            /*可以不写*/
        }
        /*还可以定义其他的关键帧*/
        100% {
            background-color: green;
            width: 200px;
            height: 200px;
            line-height: 200px;
        }
    }
</style>
<div>test</div>
</body>
</html>
```

```
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
</head>
<body>
<style>
    body {
        margin: 300px;
    }

div {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 2s, height 2s, background-color 3s, transform 4s;
    }

div:hover {
        width: 200px;
        height: 200px;
        background-color: green;
        transform: rotate(180deg);
    }
</style>
<div></div>
</body>
</html>
```

admin
2021-12-05 16:45:41
css

文章分类

文章标签

文章归档

友情链接

css动画