HTML5&CSS3:Day03 2D动画 3D动画 CSS3过渡

最新推荐文章于 2021-06-28 20:45:50 发布

'"<>{{7*7}}

最新推荐文章于 2021-06-28 20:45:50 发布

阅读量478

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/weixin_43415644/article/details/104149840

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

0x00 2D动画

transform属性下的函数：

transform:translate(x,y); //平移
transform:scale(x,y);//缩放
transform:rotate();//旋转
transform:skew();//倾斜

默认情况下，以上变形都以元素的中心为原点进行变形的。

通过transform-origin: x轴 y轴可以修改以上变形操作的原点：

以元素的中心为原点建立xy坐标系

50%表示x或者y轴的原点中心位置 =center

100%表示x或者y轴正方向的最顶端=x的left 、y的 top

0%表示x或者y轴负方向的最顶端。=x的right 、y的bottom

对于scale缩放操作来说，原点既是“放大”的起始点，也是"缩小"的回归点。

1.translate(x,y)平移

x为x轴上的平移，y为y轴上的平移。

如果是百分比表示法，x参照的是自身的宽度，y参照的是自身的高度

例如：

如果该元素的长宽分别为100px ，50px，且transform:translate(50%,50%)那么该元素就会向右边移动50px，向下移动25px

如果transform:translate(-50%,-50%)那么该元素就会向左边移动50px，向上边移动25px。

后一种方式可以用来实现元素相对于父元素的居中，即

div{
position:fixed;
top:50%; //以父元素的长为参照
width:50%;//以父元素的宽为参照
transform:translate(-50%,-50%);
width:100px;
height:40px;
}

另外两种方法：

1.translateX(x)元素仅在水平方向位移

2.translateY(y)元素仅在垂直方向位移

这两种方法不能同时使用，一方会覆盖另一方

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        width:200px;
        height:300px;
        /* transform:translate(200px,300px); */
        transform:translateX(200px);
        transform:translateY(300px);
    }

    </style>
</head>
<body>
<div>
月溅星河，长路漫漫，风烟残尽，独影阑珊；谁叫我身手不凡，谁让我爱恨两难，到后来，肝肠寸断。幻世当空，恩怨休怀，舍悟离迷，六尘不改；且怒且悲且狂哉，是人是鬼是妖怪，不过是，心有魔债。叫一声佛祖，回头无岸，跪一人为师，生死无关；善恶浮世真假界,尘缘散聚不分明，难断！我要这铁棒有何用，我有这变化又如何；还是不安，还是氐惆，金箍当头，欲说还休。我要这铁棒醉舞魔，我有这变化乱迷浊；踏碎灵霄，放肆桀骜，世恶道险，终究难逃。梦醒太晚！这一棒，早已灰飞烟灭…...
</div>
</body>
</html>

2.rotate（angle）旋转

正度数表示顺时针旋转，负值则相反。

3.scale（x轴上的倍数，y轴上的倍数）缩放

scale方法可以将元素根据中心原点进行缩放

width = 原来的width * x轴上的倍数

height = 原来的height * y轴上的倍数

另外两种方法：

1.scaleX(x)元素仅在水平方向上缩放

2.scaleY(y)元素在垂直方向上缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    body,html{
        position:relative;
        width:100%;
        height:100%;
    }
    div{
        /* 居中 */
        position:absolute;
        top:50%;
        left:50%;
        margin-top:-50px;
        margin-left:-50px;
        /* 经典三角形 */
        width:0px;
        height:0px;
        border-top:100px solid grey;
        border-left:100px solid transparent;
        border-right:100px solid transparent;
        border-bottom:0px;
        /* 旋转 */
        /* transform:rotate(90deg); */
        /* 平移 */
        /* transform:translate(100px,100px); */
        /* 缩放 */
        transform:scale(1,1);
    }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

实现：当鼠标移动到图片上，图片放大的效果：

.ms-item-lk:hover .ms-item-img{
    transform:scale(1.1);
    transition:0.5s;
}

4.skew()倾斜

transfrom:skew(angle,angle)

包含两个参数，分别表示x轴和y轴倾斜的角度，如果第二个参数为空，则默认是0，参数为负表示向相反方向倾斜

skewX()表示只在X轴倾斜

skewY()表示只在Y轴倾斜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    div{  
        width:100px;
        height:100px;
        margin:100px auto;
        background:red;
        transform:skew(30deg,10deg)
    }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

0x03 3D动画

1.translate3d(x,y,z)

定义3d平移

x表示x轴上的平移，y表示y轴上的平移，z表示z轴上的平移

translateZ(z)在z轴上的平移，z轴为面向屏幕的方向

perspective方法可以设置镜头到屏幕的距离

父元素上加上transform-style:preserve-3d可修改元素层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
   #tf1{
       width:100px;
       height:100px;
       background:red;
       transform:perspective(200px) translate3d(0px,100px,100px);
       
   }
    </style>
</head>
<body>
<div id="tf1"></div>

</body>
</html>

2.rotateX定义沿着X轴的3d旋转

rotateY定义沿着Y轴的3d旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
   #tf3{
       width:100px;
       height:100px;
       background:yellow;
       /* 设置过渡为2s */
       transition:all 2s;
   }
   #tf3:hover{
    transform:rotateX(180deg);
   }
    </style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>

0x04 CSS3过渡 transition

过渡指元素从一种样式逐渐改变为另一种的效果

语法：

transition:property duration timing-function delay

property:指定CSS属性的名称，多个属性之间用逗号分隔,如果为all表示，所有属性都会有过渡效果

duration:指定过渡时间

timing-function：指定转速曲线，默认值为ease（规定从慢速开始，然后变快，然后变慢），linear匀速，ease-in(慢速开始),ease-out（慢速结束）,ease-in-out（慢速开始慢速结束）

delay:定义多少秒后开始过渡效果

或者可以用transition-delay来单独设置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
   #tf3{
       width:100px;
       height:100px;
       background:yellow;
       word-break:break-all;
       /* 过渡属性为width 过渡时间为1s */
       transition:width 0.5s,height 0.5s;
   }
   #tf3:hover{
    width:300px;
    height:50px;
    /* 如果不设置过渡，这种变化会很突兀 */
   }
    </style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>

0x05 CSS3动画特效技能

@keyframes规则内指定一个css样式和动画逐步从目前的样式更改为新样式。

CSS3过渡需要一个触发事件，而CSS3动画特效并不需要触事件

语法：

定义动画

@keyframes   xxx{
    from{
        xxx:xxx;
    }

    to{
        xxx:xxx;
    }
}

也可以定义多个：
@keyframes   xxx{
    0%{
        xxx:xxx;
    }
    10%{
        xxx:xxx;
    }
    100%{
        xxx:xxx;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    body{
        animation:myAnimation 5s forwards;
    }
   @keyframes myAnimation{
      from{
        background:grey;
        color:black;
      }
      to{   
        background:black;
        color:greenyellow;
      }
   }
    </style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>

使用动画

animation:name duration timing-function delay iteration-count direction fill-mode play-state;

name:之前定义的动画的名字

duration:动画执行时间

timing-function 设置动画如何完成默认值为ease（规定从慢速开始，然后变快，然后变慢），linear匀速，ease-in(慢速开始),ease-out（慢速结束）,ease-in-out（慢速开始慢速结束）

delay:设置动画在启动前的延迟间隔

count：设置动画的播放次数，设置为infinite表示无限播放

direction:定义是否应该反向播放动画(normal默认值，reverse反向播放，alternate奇数次正向偶数次反向，alternate-reverse奇数次反向，偶数次正向) 如果count设置为1次的话，这个属性是不会起作用的。

fill mode 规定当前动画不播放时的元素样式（none默认值，forwards动画结束后，将应用最后的属性，backwords 结束后应用之前的属性,both ）

play-state 指定动画正在运行或是已暂停（pause动画暂停，running动画进行）

车轮滚动效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
    div{
        position:relative;
        width:100px;
        height:100px;
        overflow:hidden;
        word-wrap:break-word;
        text-align:center;
        animation:myAnimation 6s ease 1s infinite alternate;
        border-radius:50%;
        background:radial-gradient(white,grey 50%,black 80%);
    }
   @keyframes myAnimation{
       0%{
        left:0px;
        background:radial-gradient(white,grey 50%,black 80%);
       }
       70%{
        left:2%;
        transform:rotate(1080*5deg);
        background:radial-gradient(yellow,orange 50%,red 80%);
       }
       100%{
        left:97%;
        transform:rotate(10800deg);
        background:radial-gradient(yellow,orange 50%,red 80%);
       }
   }
    </style>
</head>
<body>
<div id="tf3">Talk is cheap,show me the code;</div>
</body>
</html>

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5&CSS3:Day03 2D动画 3D动画 CSS3过渡

目录0x00 2D动画0x03 3D动画0x04 CSS3过渡0x05 CSS3动画特效技能0x06 CSS3 flex弹性布局1.基本概念：2.flex容器（父元素）的六大属性3.flex item子元素的六大属性(1)order属性(2)flex-grow属性(3)flex-shrink(4)flex-basis属性(5)flex属性：(...
复制链接

扫一扫

专栏目录