CSS基础（五）个人笔记

最新推荐文章于 2024-07-22 09:42:47 发布

jredu1996

最新推荐文章于 2024-07-22 09:42:47 发布

阅读量205

点赞数 2

分类专栏： html5 新手文章标签： css 动画

本文链接：https://blog.csdn.net/jredu1996/article/details/76615213

版权

新手同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

html5

13 篇文章 0 订阅

订阅专栏

变形

平移：元素平移：x方向 y方向
缩放：scale(1.5) 缩放1.5倍。
二维旋转：rotate(180deg) 旋转180°
以x,y轴的旋转：rotatex(180deg)rotatey(180deg)
倾斜：skew(18deg) 倾斜18°
以x,y轴的倾斜：skewx(18deg) skewy(18deg)
过渡动画效果：1:什么属性 2.过渡时间 3.过渡效果
transition: all 1s ease;
实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div{
            width: 158px;
            height: 183px;
            margin: 0 auto;
            margin-top: 100px;
            border: 1px solid red;
            overflow: hidden;
        }
        img{
            /*过渡动画效果 1:什么属性 2.过渡时间 3.过渡效果*/
            transition: all 1s ease;
        }
        img:hover{
            /*元素平移：x方向   y方向*/
            /*transform: translate(100px,100px);*/

            /*元素缩放*/
            /*transform: scale(1.5);*/

            /*元素二维旋转*/
            /*transform: rotate(180deg);*/

            /*元素y轴旋转*/
            /*transform: rotatey(180deg);*/
            /*元素x轴旋转*/
            /*transform: rotatex(180deg);*/
            /*倾斜*/
            /*transform: skew(18deg);*/
            /*倾斜y轴*/
            /*transform: skewy(18deg);*/
            /*倾斜*/
            /*transform: skew(18deg);*/
            /*倾斜x轴*/
            transform: skewx(180deg);

        }
    </style>
    <title>变形效果</title>
</head>
<body>
<div>
    <img src="../img/f3_Android1.png" alt="">
</div>
</body>
</html>

动画

@keyframes 名称{
0%{}
·
·
·
100%{}
}
相关属性：
animation-name: colorChange;/使用动画名称/
animation-duration: 2s;/动画持续时间/
animation-timing-function: ease;/动画速度曲线/
animation-delay: 2s;/动画延迟时间/
animation-iteration-count: 1;/动画循环次数 infinite 无限次/
animation-direction: alternate;/动画在下一次是否逆向播放/
实例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        @keyframes colorChange {
            0%{
                background: url("../img/f3_Android1.png");
                background-repeat: no-repeat;
            }
            20%{
                background: url("../img/f3_Android2.png");
                background-repeat: no-repeat;
            }
            50%{
                background: url("../img/f3_Android3.png");
                background-repeat: no-repeat;
            }
            50%{
                background: url("../img/f3_Android4.png");
                background-repeat: no-repeat;
            }
            80%{
                background: url("../img/f3_Android5.png");
                background-repeat: no-repeat;
            }
            100%{
                background: url("../img/f3_Android1.png");
                background-repeat: no-repeat;
            }

        }
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            animation-name: colorChange;/*使用动画名称*/
            animation-duration: 2s;/*动画持续时间*/
            animation-timing-function: ease;/*动画速度曲线*/
            animation-delay: 2s;/*动画延迟时间*/
            animation-iteration-count: 1;/*动画循环次数 infinite 无限次*/
            animation-direction: alternate;/*动画在下一次是否逆向播放*/
            animation-fill-mode: backwards;/*forwards 动画停留在最后一个
                                            backwards 动画停留在第一个*/
        }
    </style>
    <title>动画</title>
</head>
<body>
<div></div>
</body>
</html>

jredu1996

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS基础（五）个人笔记

变形平移：元素平移：x方向 y方向缩放：scale(1.5) 缩放1.5倍。二维旋转：rotate(180deg) 旋转180° 以x,y轴的旋转：rotatex(180deg)rotatey(180deg)倾斜：skew(18deg) 倾斜18° 以x,y轴的倾斜：skewx(18deg) skewy(18deg) 过渡动画效果：1:什么属性 2.过渡时间 3.过渡效果
复制链接

扫一扫