css3（二）

格物致知0919

已于 2023-05-18 22:25:33 修改

阅读量84

点赞数

文章标签： css3 前端 css

于 2023-05-07 18:39:15 首次发布

本文链接：https://blog.csdn.net/weixin_73838148/article/details/130493609

版权

1.2D转换tranform

1.1移动translate

不影响其他元素的位置。
对行内元素无效。
括号里面可以是以px为单位，也可以是百分数。

tranform:translate(x,y)
tranform:translateX(n)
tranform:translateY(n)
//tranform:translateY(50%)表示沿y轴向下移动盒子高度的50%

1.2旋转rotate

正数表示顺时针，反之。

transform:rotate(5deg);

1.3设置转换中心点

默认转换中心点是元素的中心点（50% 50%）
还可以给x y设置像素或者方位名词（top right bottom left)

transform-origin:x y;

案例：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转案例</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid pink;
            overflow: hidden;
        }

        div::after {
            transition: all .4s;
            display: block;
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            content: "黑马";
            transform: rotate(180deg);
            transform-origin: left bottom;
        }

        div:hover::after {
            transform: rotate(0deg);
        }
    </style>
</head>

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

</html>

1.4缩放scale

优势：不会影响其他盒子；可以设置缩放的中心点，默认以中心点缩放。

transform:scale(x,y);
//x y不带单位，指的是倍数
transform:scale(x);
//意思是y和x一样，等比例缩放

1.5综合写法

格式为transform:translate（） rotate（） scale（） ...等（中间用空格隔开）
其顺序会影转换的效果。(先旋转会改变坐标方向)
当我们同时有位移和其他属性的时候，记得要将位移放到最前

2.动画

2.1属性总结

属性	描述
@keyframes	规定动画模式。
animation	设置所有动画属性的简写属性。
animation-delay	规定动画开始的延迟。
animation-direction	规定动画是向前播放、向后播放还是交替播放。
animation-duration	规定动画完成一个周期应花费的时间。
animation-fill-mode	规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。
animation-iteration-count	规定动画应播放的次数。
animation-name	规定 @keyframes 动画的名称。
animation-play-state	规定动画是运行还是暂停。
animation-timing-function	规定动画的速度曲线。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        @keyframes move {
            0% {
                transform: translateX(0px);
            }

            50% {
                transform: translateX(1000px);
            }

            100% {
                transform: translateX(500px);
            }
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* name必需 */
            animation-name: move;
            /* 持续时间必需 */
            animation-duration: 2s;
            animation-iteration-count: 2;
            animation-direction: reverse;
            animation-fill-mode: forwards;
        }
    </style>
</head>

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

</html>

2.2animation-duration

如果未指定该属性，则动画不会发生，因为默认值是 0s（0秒）。
可以使用关键字 "from" 和 "to"（代表 0％（开始）和 100％（完成））。

2.3animation-delay延迟动画

负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒。
默认是0

2.4animation-iteration-count

默认是1

animation-iteration-count: infinite;
//动画永久持续
animation-iteration-count: 3;
//动画持续3次

2.5animation-direction指定是向前播放、向后播放还是交替播放动画

该属性可接受以下值：

normal—— 动画正常播放（向前）。默认值
reverse——动画以反方向播放（向后）
alternate——动画先向前播放，然后向后
alternate-reverse——动画先向后播放，然后向前

2.6animation-timing-function规定动画的速度曲线

该属性可接受以下值：

ease——指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear——规定从开始到结束的速度相同的动画
ease-in——规定慢速开始的动画
ease-out——规定慢速结束的动画
ease-in-out——指定开始和结束较慢的动画
cubic-bezier(n,n,n,n)——运行您在三次贝塞尔函数中定义自己的值
step(n)——表示将总过程分为n步进行

2.7animation-fill-mode规定动画的填充模式

该属性可接受以下值：

none——默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards——元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards——元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both——动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。

2.8animation-play-state规定动画是运行还是暂停

默认是running，还有paused。

2.9animation简写

不包括animation-play-state属性，要写的话应该专门另外写。

animation: 动画名称(必) 持续时间(必) 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

2.10案例

格物致知0919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3（二）

属性描述@keyframes规定动画模式。animation设置所有动画属性的简写属性。规定动画开始的延迟。定动画是向前播放、向后播放还是交替播放。规定动画完成一个周期应花费的时间。规定元素在不播放动画时的样式（在开始前、结束后，或两者同时）。规定动画应播放的次数。规定 @keyframes 动画的名称。规定动画是运行还是暂停。规定动画的速度曲线。
复制链接

扫一扫