css3动画

CSS3动画

过渡、线性渐变、径向渐变

1.过渡
transition过渡,两种方式,一种是分开写每项属性、一种是合写。

方式一:分开写四个属性
1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部
2.transition-duration 设置过渡时间 单位s
3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速
4.transition-delay 设置过渡延时 单位s

方式二:合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序
transition: all 1s linear 0.2s; //过渡全部属性、执行1秒钟、匀速执行、延迟0.2秒钟

2.线性渐变
linear-gradient线性渐变主要是围绕三步来做,1. 需要渐变方向; 2. 渐变颜色; 3. 渐变范围;
background-image: linear-gradient(方向, 颜色 范围, 颜色 范围…);

方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转;

to right === 90deg to bottom === 180deg 默认 180deg to bottom;

方式一:角度,颜色 范围,颜色 范围,颜色 范围,颜色 范围

右方向,0%-20%之间是red颜色、50%-100%之间是blue颜色、其它是渐变颜色

background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%);

方式二:角度,颜色 范围,颜色 范围 ,开始和结尾默认0% 100%

右方向,开始和结尾默认0% 100%

background-image: linear-gradient(to right,red 20%,blue 50%);

方式三:颜色 范围,颜色 范围 ,不写角度,角度默认180deg

background-image: linear-gradient(red 20%, blue 50%);

3.径向渐变
radial-gradient径向渐变主要是围绕着半径 、 圆心位置X Y, 颜色 范围, 颜色 范围…来设置值的;

方式一:半径 at 圆心位置X Y, 颜色 范围, 颜色 范围

半径100px、 圆心坐标100px 100px、50%是red颜色、50%是yellow颜色,超出渐变范围的用最外面的颜色填充(也就是yellow)
background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%);

方式二:半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 …

不写范围, 平均分配范围

background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);

4.案例
过渡渐变案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .clearfix {
            clear: both;
        }

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: block;
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }
        .box,
        .box1,
        .box2 {
            width: 200px;
            height: 200px;
            margin: 10px 30px;
            border: 1px solid #000;
            float: left;
        }


        /* 过渡CSS */
        .box {
            opacity: 0.5;
            color: white;
            background-color: blue;
            /* 方式一:分开写四个属性 */
            /* 1.transition-property 设置过渡属性 可以单写属性 也可以用all代替全部 */
            /* transition-property: width,height; */
            transition-property: all;
            /* 2.transition-duration 设置过渡时间 单位s */
            transition-duration: 2s;
            /* 3.transition-timing-function 设置过渡动画效果 ease:先慢后快再慢 linear:匀速 */
            transition-timing-function: ease;
            /* 4.transition-delay 设置过渡延时 单位s */
            transition-delay: 0.5s;

            /* 方式二:合写 只需要注意, 延迟时间写在执行时间后面就可以了其它顺序无序 */
            transition: all 1s linear 0.2s;
        }

        .box:hover {
            width: 250px;
            height: 250px;
            opacity: 1;
            background-color: red;
        }

        /* 线性渐变 */
        .box1 {
            /* 三步骤:1. 需要渐变方向 2. 渐变颜色 3. 渐变范围 */
            /* background-image: linear-gradient(方向, 颜色 范围, 颜色 范围...) */
            /* 方向 角度: 0deg 记忆方式, 时钟方向, 向上0deg, 顺时针旋转 */
            /*  to right === 90deg  to bottom === 180deg  默认 180deg to bottom */

            /* 方式一:角度,颜色 范围,颜色 范围,颜色 范围,颜色 范围 */
            /* background-image: linear-gradient(90deg,red 0%,red 20%,blue 50%,blue 100%); */
            /* 方式二:角度,颜色 范围,颜色范围  开始和结尾默认0% 100%*/
            /* background-image: linear-gradient(to right,red 20%,blue 50%); */
            /* 方式三:角度默认180deg */
            background-image: linear-gradient(red 20%, blue 50%);
        }

        /* 径向渐变 */
        .box2 {
            /* 步骤: 半径, 圆心,颜色, 颜色范围  */
            /* 1. 半径 at 圆心位置X Y, 颜色 范围, 颜色 范围 ..... */
            /* 2. 超出渐变范围的用最外面的颜色填充 */
            /* background-image: radial-gradient(100px at 100px 100px ,red 50%,yellow 50%); */
            /* 3.如果不写范围, 平均分配 */
            background-image: radial-gradient(100px at 100px 100px, red, yellow, pink);
        }

        .sbox {
            width: 600px;
            height: 360px;
            margin: 10px 50px;
            position: relative;
            overflow: hidden;
        }

        .sbox img {
            width: 600px;
            height: 360px;
        }

        .sbox:hover::before{
            /* transform只能设置一次 后面的会把前面的覆盖掉 */
            /* 鼠标移到图片 斜切平移 */
            transform: translateX(1000px) skew(-45deg);
            transition: all 1s;
        }
        .sbox:hover::after{
              /* 鼠标移到图片 延迟0.2s斜切平移 */
            transform: translateX(1000px) skew(-45deg);
            transition: all 1s 0.2s;
        }
        
        .sbox::before , .sbox::after{
            content: "";
            width: 20px;
            height: 360px;
            position: absolute;
            top: 0px;
            left: -210px;

            /*设置斜切 */
            transform: skew(-45deg);

            /* 设置线性渐变 */
            background-image: linear-gradient(90deg,
                    rgba(255, 255, 255, 0),
                    rgba(255, 255, 255, 1),
                    rgba(255, 255, 255, 0));
        }

    </style>
</head>

<body style="background-color: black;">

    <div class="pbox clearfix">
        <!-- transition:过渡 当前元素只要有“属性”发生变化时,可以平滑的进行过渡。并不仅仅局限于hover状态,也可以通过修改class -->
        <div class="box">过渡属性讲解</div>

        <!-- linear-gradient:线性渐变 -->
        <div class="box1">线性渐变</div>

        <!-- radial-gradient: 径向渐变 -->
        <div class="box2">径向渐变</div>
    </div>
    </body>
</html>

2D动画
转换是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放,配合过渡和动画知识,可以取代大量之前只能靠Flash才可以实现的效果。

1.移动 translate(x, y)

1.移动 translate(x, y) 可以改变元素的位置,x、y可为负值,
transform: translate(300px,300px);
2.除了可以像素值,也可以是百分比,相对于自身的宽度或高度,
transform: translate(100%, 100%);
3.常用到居中使用,
transform: translate(-50%,-50%);

2.缩放 scale(x, y)

1.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数,
transform: scale(1,2);
2.一般情况下x y值都是一样的值,
transform: scale(2);

3.旋转 rotate(deg)

旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针,
transform: rotate(45deg);

4.斜切 skew(x, y)

斜切 skew(x, y) 单位deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果,
transform: skew(20deg,20deg);

5.案例
移动、缩放、旋转、斜切动画

2D转换
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 140px;
            height: 140px;
            line-height: 140px;
            background-color: blue;
            transition: all 2s;
            margin: 20px 50px;
            color: white;
            text-align: center;
        }

        .tl:hover {
            /* 移动 translate(x, y) 可以改变元素的位置,x、y可为负值 */
            /* transform: translate(300px,300px); */
            /* transform: translate(-100px,-100px); */

            /* 除了可以像素值,也可以是百分比,相对于自身的宽度或高度 */
            transform: translate(100%, 100%);
            /* transform: translate(-50%,-50%); 常用到居中使用 */
        }

        .se:hover {
            /* 缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x、y的取值可为小数; */
            transform: scale(1.5);
            /* transform: scale(1,2); */
        }

        .rt:hover {
            /* 旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针 */
            /* transform: rotate(45deg); */
            transform: rotate(-60deg);
        }

        .sk:hover {
            /* 斜切 skew(x, y)deg 传角度, 可以让盒子变倾斜, skewX 是纵向拍扁的效果, skewY 是横向拍扁的效果 */
            transform: skew(20deg, 20deg);
        }

        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        /* 给 body 添加径向渐变 */
        body {
            background-image: radial-gradient(200px at right top, red 10%, yellow 20%, white, skyblue);
        }

        img {
            position: absolute;
            left: 0px;
            bottom: -190px;
        }

        body:hover img {
            transition: all 4s;
            transform: translate(1400px, -800px) scale(0) rotate(45deg);
        }
    </style>
</head>
<body>
    <!-- 平移 translate 移动位置相当于从自身原来位置 -->
    <div class="tl">平移 translate</div>

    <!-- 缩放 scale -->
    <div class="se">缩放 scale</div>

    <!-- 旋转 rotate -->
    <div class="rt">旋转 rotate</div>

    <!-- 斜切 skew -->
    <div class="sk">斜切 skew</div>

    <!-- 飞机飞向太阳案例 -->
    <img src="../img/rocket.png" alt="">

</body>

</html>
3D动画

transform:不仅可以2D转换,还可以进行3D转换。
用X、Y、Z分别表示空间的3个维度,三条轴互相垂直。注意+Y是向下的。

三维坐标轴
1.translate平移
1.transform: translateX(100px), x轴移动100px,可以为负值;
2.transform: translateY(100px),y轴移动100培训,可以为负值;
3.transform: translateZ(50px),z轴移动50px,可以为负值;
4.transform: translate3d(x, y, z) xyz是三轴移动的距离

/*沿着X轴的正方向移动45px*/
transform: translateX(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateY(45px);
/*沿着Y轴的正方向移动45px*/
transform: translateZ(45px);
/*xyz是三轴移动的距离*/
transform: translate3d(100px, 100px, 100px);

2.rotate旋转

值可以是正值或负值 可以连写多个旋转角度;
1.translateX() 伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向;
2.translateY() 伸出左手,大拇指指朝下正方向,手指卷曲的方向, 就是旋转的正方向;
3.rotateZ(*) 伸出左手,大拇指指脸正方向,手指卷曲的方向, 就是旋转的正方向;
4.transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度;

/* 值可以是正值或负值 可以连写多个旋转角度 /
/
1.transform: rotateX(deg);让元素在平面2D中旋转 /
/
心中自有3个轴 /
/
transform: rotate(45deg); /
/
1.伸出左手, 大拇指指向轴的正方向, 手指卷曲的方向, 就是旋转的正方向 /
/
transform: rotateX(45deg); /
/
2.伸出左手,大拇指指朝下正方向,手指卷曲的方向, 就是旋转的正方向 /
/
transform: rotateY(45deg); /
/
3.伸出左手,大拇指指脸正方向,手指卷曲的方向, 就是旋转的正方向
/
/* transform: rotateZ(45deg); /
/
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg); /
/
transform: rotate3d(x,y,z,adeg) x y z 为0时不旋转、为1时旋转、a是角度*/
transform: rotate3d(1,0,0,45deg);

3.transform-style

preserve-3d:给父盒子添加,让子元素3D的空间布局,说白了,只有设置了preserve-3d,这个元素才能被称之为3d元素。
一个3d元素可以没有perspective,但是不能没有transform-style

  body {
            transform-style: preserve-3d;
        }

4.案例

用 transform-style: preserve-3d;来展示3d效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            /* 一般设置给整个3d整体的父级 */
            /* perspective: 1000px; */
            transform-style: preserve-3d;
        }

        .father {
            width: 120px;
            height: 200px;
            border: 1px solid #000;
            margin: 10px auto;
            position: relative;
            /* 父元素Y轴偏移一点 否则看不出效果 */
            transform: rotateY(26deg);

            /* perspective 只是使子盒子拥有近大远小的视觉效果 */
            /* perspective: 1000px; */

            /* 真正实现3d transform-style: preserve-3d 实现的 */
            /* 默认值 flat 表示平面布局 */
            /* preserve-3d 是我们真正使得子盒子按三维立体进行布局, 一定要加给父元素 */
            transform-style: preserve-3d;
        }

        .son1,
        .son2 {
            position: absolute;
            top: 0;
            left: 0;
            width: 120px;
            height: 200px;
        }

        .son1 {
            background-color: blue;
        }

        .son2 {
            background-color: red;
            transform: rotateX(45deg);
        }


        .lt {
            width: 180px;
            height: 180px;
            border: 1px solid #000;
            margin: 60px auto;
            position: relative;
            transition: all 5s;
            transform-style: preserve-3d;
        }

        .lt:hover {
            /* XYZ都旋转 */
            transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        }

        .lt li {
            position: absolute;
            top: 0;
            left: 0;
            width: 180px;
            height: 180px;
        }

        .lt li:nth-child(1) {
            background-color: blue;
            transform: translateZ(90px);
        }

        .lt li:nth-child(2) {
            background-color: blueviolet;
            transform: rotateX(90deg) translateZ(90px);
        }

        .lt li:nth-child(3) {
            background-color: brown;
            transform: rotateX(180deg) translateZ(90px);
        }

        .lt li:nth-child(4) {
            background-color: chartreuse;
            transform: rotateX(270deg) translateZ(90px);
        }

        .lt li:nth-child(5) {
            background-color: pink;
            transform: rotateY(-90deg) translateZ(90px);
        }

        .lt li:nth-child(6) {
            background-color: purple;
            transform: rotateY(90deg) translateZ(90px);
        }

        .fg {
            width: 600px;
            height: 50px;
            border: 1px solid black;
            margin: 20px auto;
        }

        .fg li {
            width: 100px;
            height: 50px;
            float: left;
            position: relative;
            transition: all 1s;
            /* 真正实现 3d 效果, 不一定需要加上 perspective */
            /* 由于是span做的3d变换, 所以 transform-style: preserve-3d; 加给父盒子li*/
            transform-style: preserve-3d;
        }

        .fg li:hover {
            transform: rotateX(-90deg);
        }

        .fg li span {
            width: 100px;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            text-align: center;
        }

        .fg li span:nth-child(1) {
            background-color: blue;
            transform: translateZ(25px);
        }

        .fg li span:nth-child(2) {
            background-color: pink;
            transform: rotateX(90deg) translateZ(25px);
        }
    </style>

</head>

<body>

    <!-- transform-style -->
    <!-- transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。注意这个属性也是给父元素添加。 -->
    <!-- 一个3d元素可以没有perspective,但是不能没有transform-style -->
    <div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>

    <!-- 立体案例 -->
    <ul class="lt">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <!-- 翻滚 -->
    <ul class="fg">
        <li>
            <span>吃饭了吗</span>
            <span>1</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>2</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>3</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>4</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>5</span>
        </li>
        <li>
            <span>吃饭了吗</span>
            <span>6</span>
        </li>
    </ul>
</body>
</html>

animation动画
animation是一个复合属性,一共有8个参数;
一般是由@keyframes先定义动画,然后animation使用动画。
1.animation-name:动画名称,由@keyframes定义的
2.animation-duration:动画的持续时间
3.animation-timing-function:动画的过渡类型
4.animation-delay:动画的延迟时间
5.animation-iteration-count:动画的循环次数
6.animation-direction:设置动画在循环中是否反向运动
7.animation-fill-mode:设置动画时间之外的状态
8.animattion-play-state:设置动画的状态。

案例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: #000;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: red;
            box-shadow: 0px 0px 4px 4px #fff;
            /* 使用动画 */
            /* animation: myAnimaiton 2s infinite; */
            /* 1. 动画名称 */
            animation-name: myAnimaiton;
            /* 2. 动画执行时间 */
            animation-duration: 2s;
            /* 3. 动画执行次数 */
            /*animation-iteration-count: 2;*/
            /* infinite 无限次 */
            animation-iteration-count: infinite;
            /* 4. 延迟时间 */
            /*animation-delay: 1s;*/

            /* 5. 动画效果 */
            /* animation-timing-function: linear; */
            /* steps(n) 按照步数执行, 可以用来实现帧动画 */
            /* animation-timing-function: steps(3); */

            /* 6. 动画方向 */
            /* alternate 交替执行, 可以让动画序列来回交替执行 */
            /* animation-direction: alternate; */

            /* 7. 动画最终状态 forwards 停留在最终动画状态 */
            /*animation-fill-mode: forwards;*/

        }

        div:hover {
            /* 8. 动画播放状态 */
            animation-play-state: paused;
        }

        /* 自定义动画 */
        @keyframes myAnimaiton {
            0% {
                transform: scale(1.0)
            }

            100% {
                transform: scale(1.5)
            }
        }
    </style>
</head>

<body>
    <div>hello world!</div>
</body>
</html>

动画库的使用
一个用的比较多的动画库animate.css;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- 1. 引入动画函数库 -->
    <link rel="stylesheet" href="animate.css">
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: blue;
        }

        .box {
            animation: bounceInRight2 2s infinite alternate;
        }

        /* 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 */
        @keyframes bounceInRight2 {

            from,
            60%,
            75%,
            90%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            }

            from {
                opacity: 0;
                transform: translate3d(3000px, 0, 0);
            }

            60% {
                opacity: 1;
                transform: translate3d(-25px, 0, 0);
            }

            75% {
                transform: translate3d(10px, 0, 0);
            }

            90% {
                transform: translate3d(-5px, 0, 0);
            }

            to {
                transform: none;
            }
        }
    </style>

</head>

<body>
    <!-- 2. 直接使用设计好的动画库, 直接加类, animated, 选择想要的动画效果 添加效果类 -->
    <div class="animated bounceInRight">我是引用animate库动画</div>

    <!-- 直接把animate.css中找到bounceInRight动画拷贝过来 可以进行修改 -->
    <div class="box">我是修改animate库动画</div>

</body>

</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值