前端重学笔记-CSS篇-11

MarisolHu

于 2024-08-09 13:55:06 发布

阅读量1.1k

点赞数 27

分类专栏：前端学习文章标签：笔记 css 前端

本文链接：https://blog.csdn.net/Yvonne_hjj/article/details/140674405

版权

前端学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

2D转换

transform

转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果。

转换可以理解为变形。2D转换是改变标签在二维平面上的位置和形状的一种技术

移动:translate
旋转:rotate
缩放:scale

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

transform:translate(x,y);或者分开写:
transform:translateX(n);
transform:translateY(n);

定义 2D 转换中的移动，沿着X和Y轴移动元素
translate最大的优点:不会影响到其他元素的位置
translate中的百分比单位是相对于自身元素的translate:(50%,50%)
对行内标签没有效果

旋转 rotate

transform:rotate(度数)

rotate里面跟度数，单位是deg 比如rotate(45deg）
角度为正时，顺时针，负时，为逆时针
默认旋转的中心点是元素的中心点

案例：当鼠标经过这个地方就可以使得三角朝上旋转

    <style>
        div {
            position: relative;
            width: 249px;I
            height: 35px;
            border:1px solid □#000;
        }
        div::after {
            content:"";
            position: absolute;
            top: 8px;
            right: 15px;
            width: 10px;
            height: 10px;
            border-right:1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(45deg);
            transition: all 0.2s;
        }
        /*鼠标经过div里面的三角旋转 */
        div:hover::after{
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
    <div></div>
</body>

中心点 transform-origin

我们可以设置元素转换的中心点
语法

transform-origin:x

重点

注意后面的参数 x和y用空格隔开
xy默认转换的中心点是元素的中心点(50% 50%)
还可以给xy设置像素或者方位名词(top bottom left right center)

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto;
        transition: all 1s;
        /*1.可以跟方位名词 */
        /* transform-origin: left bottom; */
        /*2.默认的是 5% 50% 等价于 centercenter */
        /* 3.可以是px 像素 */
        transform-origin: 50px 50px;
    }
    div:hover {
        transform: rotate(360deg);
    }

案例：

<style>
    div {
        overflow: hidden;
        width: 200px;
        height: 200px;
        border: 1px sdlid pink;
        margin: 100px auto;
    }
    div::before {
        content:"黑马";
        display: block;
        width: 100%;
        height: 100%;
        background-color:hotpink;
        transform: rotate(180deg);
        transform-origin: left bottom;
        transition: all 0.4s;
    }    
    div:hover::before {
        transform: rotate(0deg);
    }
</style>
<body>
    <div></div>
</body>

缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。
语法

transform:scale(x,y);

注意

注意其中的x和y用逗号分隔
transform:scale(1,1):宽和高都放大一倍，相对于没有放大
transform:scale(2,2):宽和高都放大了2倍
transform:scale(2):只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
transform:scale(0.5,0.5):缩小
sacle缩放最大的优势:可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 100px auto;
        }
        div:hover {
        /*1.里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍 */
        /* transform:scale(x，y);*/
        /*transform:scale(2，2);*/
        /*2.修改了宽度为原来的2倍 高度不变*/
        /*transform:scale(2，1);*/
        /*等比例缩放 同时修改宽度和高度，有简单的写法 以下是宽度修改了2倍，高度默认和第一个参数一模一样*/
        /*transform:scale(2);*/
        /*4.我们可以进行缩小 小于1 就是缩放 */
        /*transform:scale(0.5，0.5);*/
        /*transform:scale(0.5);*/
        /*scale 的优势之处: 不会影响其他的盒子 而且可以设置缩放的中心点*/
        transform:scale(2);
        
    </style>
</head>
<body>
    <div></div>
</body>

2D转换综合写法

注意:

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

动画

动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用

制作动画分为两步:

1.先定义动画2.再使用(调用)动画

1.用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称{
    0%{/*开始状态*/
        width:100px;
    }
    100%{/*结束状态*/
        width:200px;
    }
}

动画序列

0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。
在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数
请用百分比来规定变化发生的时间，或用关键词"from"和"to",等同于0%和 100%.

2.元素使用动画

div {
        width:200px;
        height:200px;
        background-color:aqua;
        margin:100px auto;
        /*调用动画 */
        animation-name:动画名称;
        /*持续时间 */
        animation-duration:持续时间;
    }

动画常见属性

div{
    width: 100px;
    height: 100px;
    background-color:口pink;
    /*动画名称 */
    animation-name: move;
    /*持续时间 */
    /*animation-duration:2s;*/
    /*运动曲线 */
    /*animation-timing-function:ease;*/
    /*何时开始 */
    /*animation-delay:1s;*/
    /*重复次数 iteration重复的 conut 次数 infinite 无限 */
    /*animation-iteration-count:infinite;*/
    /*是否反方向播放 默认的是 normal 如果想要反方向 就写 alternate */
    /*animation-direction:alternate;*/
    /*动画结束后的状态 默认的是 backwards 回到起始状态 我们可以让他停留在结束状态 forwards */
    /*animation-fi11-mode:forwards;*/
    /*简写属性1*/
    /*animation: move 2s linear 0s 1 alternate forwards;*/
    /*简写属性2：前面2个属性 name duration一定要写 */
    animation:move 2s linear alternate forwards;*/
}

动画简写属性

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

animation:myfirst 5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state
暂停动画:animation-play-state:puased;经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来:animation-direction:alternate
盒子动画结束后，停在结束位置:animation-fill-mode:forwards

速度曲线细节

animation-timing-function:规定动画的速度曲线，默认是“ease

    <style>
        div{
            overflow: hidden;
            font-size: 20px;
            width: @;height: 30px;
            background-color:pink;
            /*让我们的文字强制一行内显示 */
            white-space: nowrap;
            /*steps 就是分几步来完成我们的动画 有了steps 就不要在写 ease 或者1inear 了 */
            animation:w 4s steps(10)forwards;
        }
        @keyframes w {
            0% {
                width: 0;
            }
        100% {
            width: 200px;
        }
    }
</style>
</head>
<body>
    <div>世纪佳缘我在这里等你<div>
</body>