CSS动画

最新推荐文章于 2022-12-15 14:38:50 发布

Leemin_ios

最新推荐文章于 2022-12-15 14:38:50 发布

阅读量902

点赞数

分类专栏： CSS 基础教程学习笔记

本文链接：https://blog.csdn.net/Leemin_ios/article/details/52224975

版权

CSS 基础教程学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

2D、3D转换

过渡

动画

多列

1，2D、3D转换

一，通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

二，2D转换方法：

translate()

/*平移*/
.div2{
    transform: translate(200px,100px);
    /*safari  chrome*/
    -webkit-transform: translate(200px,100px);
    /*IE*/
    -ms-transform: translate(200px,100px);
    /*opera*/
    -o-transform: translate(200px,100px);
    /*Firefox*/
    -moz-transform: translate(200px,100px);
}

rotate()

/*旋转*/
.div2{
    transform: rotate(200deg);
    /*safari  chrome*/
    -webkit-transform: rotate(200deg);
    /*IE*/
    -ms-transform: rotate(200deg);
    /*opera*/
    -o-transform: rotate(200deg);
    /*Firefox*/
    -moz-transform: rotate(200deg);
}

scale()

/*缩放 宽2倍，高1倍不变*/
.div2{
    transform: scale(2,1);
    /*safari  chrome*/
    -webkit-transform: scale(2,1);
    /*IE*/
    -ms-transform: scale(2,1);
    /*opera*/
    -o-transform: scale(2,1);
    /*Firefox*/
    -moz-transform: scale(2,1);
}

skew()

/*倾斜*/
.div2{
    transform: skew(50deg,50deg);
    /*safari  chrome*/
    -webkit-transform: skew(50deg,50deg);
    /*IE*/
    -ms-transform: skew(50deg,50deg);
    /*opera*/
    -o-transform: skew(50deg,50deg);
    /*Firefox*/
    -moz-transform: skew(50deg,50deg);
}

matrix()

三，3D转换方法：

rotateX()

rotateY()

/*3D rotateX*/
.div2{
    transform: rotateX(50deg);
    /*safari  chrome*/
    -webkit-transform: rotateX(50deg);
    /*IE*/
    -ms-transform: rotateX(50deg);
    /*opera*/
    -o-transform: rotateX(50deg);
    /*Firefox*/
    -moz-transform: rotateX(50deg);
}

2，过渡

一，通过使用CSS3，可以给元素添加一些效果。

二，CSS3过渡是元素从一种样式转换成另一种样式

动画效果的CSS

动画执行的时间

三，属性

.html

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

</body>
</html>

.css

div{
    width: 100px;
    height: 100px;
    background-color: blueviolet;
    -webkit-transition: width 2s,height 2s,-webkit-transform 2s;
    transition: width 2s,height 2s,transform 2s;
    /*延时执行2秒动画*/
    transition-delay: 2s;
}
div:hover{
    width: 200px;
    height: 200px;
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

在浏览器展示效果：

3，动画

一，通过CSS3，也可以进行创建动画了。

二，CSS3的动画需要遵循@keyframes规则

规定动画的时长

规定动画的名称

.html

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

.CSS

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    /*一直执行*/
    animation: anim 5s infinite alternate;
    -webkit-animation: anim 5s infinite alternate;
    /*
    执行一次
    animation: anim 5s;
    -webkit-animation: anim 5s;
    */

}
@keyframes anim {
    0%{background: red;left: 0px;top: 0px}
    25%{background: blue;left:200px;top: 0px}
    50%{background: green;left: 200px;top: 200px}
    75%{background: orange;left: 0px;top: 200px}
    100%{background: red;left: 0px;top:0px}
}
@-webkit-keyframes anim {
            0%{background: red;left: 0px;top: 0px}
            25%{background: blue;left:200px;top: 0px}
            50%{background: green;left: 200px;top: 200px}
            75%{background: orange;left: 0px;top: 200px}
            100%{background: red;left: 0px;top:0px}

}

在浏览器展示效果：

4，多列

一，在CSS3中，可以创建多列来对文本或者区域进行布局

二，属性：

column-count 分列的数量

column-gap 每一列之间所间隔的距离

column-rule 每一列之间间隔的线，样式

.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="columnstyle.css" />
</head>
<body>
<div class="div1">
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
    hello everyone!
</div>
</body>
</html>

.CSS

.div1{
    column-count: 4;
    -webkit-column-count: 4;
    -webkit-column-gap:30px;
    /*-moz-column-gap: 50px;*/
    column-gap: 30px;
    column-rule: 5px outset #FF0000;
    -webkit-column-rule: 5px outset red;
}