Web前端学习笔记4（scale的应用（分页按钮），tranform的综合使用，动画）

最新推荐文章于 2024-04-20 14:10:04 发布

rootting

最新推荐文章于 2024-04-20 14:10:04 发布

阅读量737

点赞数

分类专栏： web前端文章标签：前端学习 html

本文链接：https://blog.csdn.net/m0_60531106/article/details/126025348

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

scale的应用（分页按钮）

实现当鼠标碰到按钮时，按钮放大且不会影响其他盒子，用scale可以不影响其他盒子

li{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid pink;
            text-align: center;
            line-height: 30px;
            list-style: none;
            margin: 10px;
            border-radius: 50%;
            transition: all .4s;
            cursor: pointer;
        }
        li:hover{
            transform: scale(1.1);
        }

tranform的综合使用

当transform同时有位移和其他属性时，将位移属性放在最前面

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 0.5s;
        }
        div:hover{
            /* 我们同时位移和其他属性，要把位移放在最前面 */
            transform: translate(50px,50px) rotate(180deg) scale(1.2);
        }

动画

动画制作分为两步：

1、定义动画，from = 0%, to = 100%

/* 我们想页面一打开就有一个盒子从左边到右边 */
        /* 定义动画 */
        @keyframes move{
            /* 开始状态 */
            /* from 和 to与 0% 和 100% 对应 */
            from{
                transform: translate(0, 0);
            }
            /* 0% {
                transform: translateX(0px);
            } */
            /* 结束状态 */
            to{
                transform: translate(1000px, 0);
            }
            /* 100% {
                transform: translateX(1000px);
            } */
        }

2、调用动画，一定要写上动画名称，动画持续时间

div{
            width: 200px;
            height: 200px;
            background-color: pink;
            /* 调用动画 */
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 2s;
        }

动画序列

可以做多个状态的变化 keyframe关键帧

里面的百分数要是整数

里面的百分比就是总的时间的划分

<style>
        @keyframes move{
            0% {
                transform: translate(0, 0);
            }
            25% {
                transform: translate(1000px, 0);
            }
            50% {
                transform: translate(1000px, 500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0, 0);
            }
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 3s;
        }

动画的属性

@keyframes move{
            0%{
                transform: translate(0, 0);
            }
            100% {
                transform: translate(1000px, 0);
            }
        }
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            animation-name: move;
            animation-duration: 2s;
            /* 动画的运动方式 */
            /* animation-timing-function: ease; */
            /* 动画开始的时间 */
            /* animation-delay: 2s; */
            /* 是否要重复播放动画，infinite为一直循环 */
            /* animation-iteration-count: infinite; */
            /* 是否在一次播放结束就倒过来播放 */
            /* animation-direction: alternate; */
            /* 最后动画停止的地方 */
            /* animation-fill-mode: forwards; */
        }
        div:hover {
            /* 鼠标放上去就停止 */
            animation-play-state: paused;
        }