CSS动画-过渡

最新推荐文章于 2023-02-26 10:04:24 发布

一叶舟轻-dly

最新推荐文章于 2023-02-26 10:04:24 发布

阅读量219

点赞数

分类专栏： HTML 文章标签： html5

本文链接：https://blog.csdn.net/xinzhelantian/article/details/60599940

版权

HTML 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div>效果展示</div>
</body>
</html>

div{
    width:100px;
    height:100px;
    background-color:darkorchid;
    /*旋转代码*/
    -webkit-transition:width 2s,height 2s,-webkit-transform 2s;
    transition:width 2s,height 2s,transform 2s;
    /*延迟*/
    transition-delay: 2s;
}
/*鼠标放上去的效果*/
div:hover{
    width:200px;
    height:200px;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}