css3 转换效果

最新推荐文章于 2023-06-02 17:44:04 发布

scralet-moon

最新推荐文章于 2023-06-02 17:44:04 发布

阅读量210

点赞数

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

本文链接：https://blog.csdn.net/weixin_43682329/article/details/84645842

版权

HTML 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。

transform:
    平移:translate(50px,100px) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
    旋转:rotate(30deg)  顺时针旋转的元素
    缩放:scale(2,3)     转变宽度为原来的大小的2倍，和其原始大小3倍的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>转换</title>
    <style>
        div{
            width: 200px;
            height:200px;
            background-color: pink;


        }
        .a1:hover{

            transform: translate(300px,300px)

        }
        .a2:hover{
            transform: rotate(40deg);

        }
        .a3:hover{
            transform: scale(2,3);
        }
    </style>
</head>
<body>
    <div class="a1"></div>
    <div class="a2"></div>
    <div class="a3" style="position: fixed; top:300px; left: 100px;"></div>

</body>
</html>

css3 过渡 transition

transition 简写属性，用于在一个属性中设置四个过渡属性。

transition-property    规定应用过渡的 CSS 属性的名称。    
transition-duration    定义过渡效果花费的时间。默认是 0。    
transition-timing-function    规定过渡效果的时间曲线。默认是 "ease"。    
        linear    规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
        ease    规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
        ease-in    规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
        ease-out    规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
        ease-in-out    规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
        cubic-bezier(n,n,n,n)    在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay    规定过渡效果何时开始。默认是 0。
        time    规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。

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

规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            transition: width 2s,height 2s,transform 2s;

            background-color: red;
        }
        div:hover{
            transform: rotate(30deg) ;
            width: 200px;
            height: 200px;
        }

    </style>
</head>

<body>
    <div>
    </div>
</body>
</html>

css3动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。 0% 是动画的开始，100% 是动画的完成。为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定义动画的名称。

@keyframes 创建动画

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

执行动画

div{
    animation: myfirst 5s;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>

    @keyframes donghua {
        0% { background-color: red;
            transform: rotate(30deg) ;
            }
        23%{background-color: green;}
        45%{background-color: pink;}
        100% {background-color: yellow; }
    }

    div{
        width: 100px;
        height: 100px;
        animation: donghua 1s;


    }
    </style>
</head>

<body>
    <div>
    </div>
</body>
</html>

scralet-moon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 转换效果

CSS3 转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。transform: 平移:translate(50px,100px) 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。旋转:rotate(30deg) 顺时针旋转的元素缩放:scale(2,3) 转变宽度为原来的大小的2倍，和其原始大小3倍的高度&lt;!DOCTYP...
复制链接

扫一扫