css3过渡动画 transition

时间 2019-11-13

标签 css3 css 过渡动画 transition 栏目 CSS 繁體版

原文原文链接

transition

CSS3 过渡是元素从一种样式逐渐改变为另外一种的效果。

要实现这一点，必须规定两项内容：css

指定要添加效果的CSS属性

指定效果的持续时间

例如

这是下面代码的预览界面预览界面html

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                height: 200px;
                width: 100px;
                background-color: #cccccc;
                margin: 20px auto;
                transition: all 2s;/*先用transition指定时间*/
            }
            /* 制定div的hover，也就是鼠标放在div上时div的变化 */
            div:hover{
                background-color: aliceblue;
                transform: scale(0.8) rotate(360deg);
                /* 这里指定一些须要transform的东西，好比scale、rotate、translate等 */
            }
        </style>
    </head>
    <body>
        <div><p>点击发生变化</p></div>
    </body>
</html>

学习连接

CSS3 经常使用四个动画（旋转、放大、旋转放大、移动）

css3过渡教程

 CSS 简单的鼠标悬浮过渡效果

 github连接
 11.html的预览界面css3