欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

css动画过渡属性transition使用讲解（代码实例）

程序员文章站 2022-07-07 15:49:07
过渡属性为transition，是属于css3的属性，所以在处理不同浏览器的兼容性问题时，记得加上私有前缀。代码如下： transition表示的是哪些属性执行动画所需要的时间；...

过渡属性为transition，是属于css3的属性，所以在处理不同浏览器的兼容性问题时，记得加上私有前缀。代码如下：

transition表示的是哪些属性执行动画所需要的时间；transform是应用于元素的2D或者3D转换，其中属性值有rotate表示的是旋转多少度，translate表示的是在X和Y轴移动多少，scale表示的是缩放多少倍，skew表示的是需要倾斜的度数。其中动画效果中，还有一个transform-origin属性，表示的是动画执行的基准。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <style type="text/css">  
        p {  
            width: 100px;  
            height: 100px;  
            background-color: red;  
            transition: all 2s;  
        }  
        p:hover {  
            width: 260px;  
            height: 260px;  
            transform: rotate(320deg);  
        }  
    </style>  
</head>  
<body>  
    <p>1</p>  
</body>  
</html>

上一篇： 洛谷 P1086 花生采摘

下一篇： 最大矩形面积

推荐阅读