css动画之补间动画

来源：互联网发布：php redis session 编辑：程序博客网时间：2024/06/14 08:27

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>       /* box的补间动画*/        .box{            width: 300px;            height: 200px;            background-color: pink;            transition: all 2s ease;            margin: 200px auto;        }        .box:hover{            width: 500px;            transform: rotate(45deg);        }        /*box2的补间动画*/        .box2{            width: 200px;            height:200px;            text-align: center;            line-height: 200px;            background: blue;            color: #fff;            margin: 10px auto;            font-size: 30px;            transition: all 2s ease;        }        span{            display: inline-block;        }        .box2:hover{            background: #fff;            border: 1px solid blue;            color: blue;            transform: rotate(45deg);        }        .box2:hover span{            font-size: 35px;            transform: rotate(-45deg);        }    </style></head><body></body><div class="box"></div><div class="box2">    <span>AA</span></div></html>

阅读全文

0 0