移动互联应用阶段总结

最新推荐文章于 2024-09-06 22:20:29 发布

m0_69217859

最新推荐文章于 2024-09-06 22:20:29 发布

阅读量114

点赞数 1

文章标签： web 前端

本文链接：https://blog.csdn.net/m0_69217859/article/details/126831277

版权

1、CSS动画

1、元素2D变换transform

            /* 1、平移：translate(水平平移量，竖直平移量) */
            transform: translate(100px,200px);

            /* 2、旋转：rotate(角度值deg)，顺时针为正方向 */
            /* 默认旋转函数是沿着z轴进行旋转的 */
            transform: rotate(45deg);

            /* 3、缩放：scale(比率) */
            transform: scale(2);

            /* 4、skew(角度值deg) */
            transform: skew(45deg);

2、transition过渡动画

            /* 定义初始状态 */
            transform: translateX(0px);

            /* transition: all 1s ease-in; */

            /* 播放过度动画至少包含 transition-property transition-duration */

            /* 指定css属性能够产生过度动画 */
            transition-property: left, transform;

            /* transition-property 还有两个待选项
                none: 无
                all: 所有属性都能播放过渡动画
            */
            transition-property: all;

            /* 动画播放的时长 */
            transition-duration: 2s;

            /* 动画播放的速度曲线 */
            /* 待选项
                linear: 匀速直线运动
                ease-in: 慢进
                ease-out: 慢出
                ease-in-out: 慢进慢出
                cubic-bezier: 曲线函数
            */
            transition-timing-function: linear;

            /* 动画播放延迟 */
            transition-delay: 3s;

            /* 合成属性 
                语法:
                transition: property duration timing-function delay;
            */
            transition: all 3s linear 3s;

3、应用

在学习了CSS动画相关知识点之后，并在老师的帮助下用JavaScript代码实现了时钟的效果，完成的过程分为几个步骤：

（1）首先进行表盘的构造，创建刻度的html模板；寻找旋转中心并进行验证；通过 js 代码循环渲染刻度。

（2）给表盘添加指针和动画，让指针能正确的转动。

代码如下所示：

<!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>Document</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
            border-radius: 50%;
            background-color: #000;
            border: 15px solid #808080;
        }

        .spot {
            width: 12px;
            height: 12px;
            position: absolute;
            left: 194px;
            /*calc(50%-6px)*/
            top: 5px;
            background-color: #fff;
            border-radius: 6px;
            transform-origin: center 195px;
            transform: rotate(0deg);
        }

        .spot-container {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 0;
            left: 0;
        }

        .hour {
            width: 30px;
            height: 100px;
            background-color: #575757;

            position: absolute;
            left: calc(50% - 15px);
            top: 100px;

            transform-origin: center bottom;
            transform: rotate(0deg);
            transition: all 0.5s liner;
        }

        .hour::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 15px;
            border-color: transparent transparent #575757 transparent;
            position: absolute;
            top: -30px;
        }

        .minute {
            width: 18px;
            height: 150px;
            background-color: #fff;

            position: absolute;
            left: calc(50% - 9px);
            top: 50px;

            transform-origin: center bottom;
            transform: rotate(0deg);
            transition: all 0.5s liner;
        }

        .minute::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 9px;
            border-color: transparent transparent #fff transparent;
            position: absolute;
            top: -18px;
        }

        .second {
            width: 10px;
            height: 180px;
            background-color: #f00;

            position: absolute;
            left: calc(50% - 5px);
            top: 20px;

            transform-origin: center bottom;
            transform: rotate(0deg);
            transition: all 0.5s liner;
        }

        .second::before {
            content: '';
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px;
            border-color: transparent transparent #f00 transparent;
            position: absolute;
            top: -10px;
        }

        .cover {
            width: 50px;
            height: 50px;
            background-color: #f00;
            border-radius: 50%;

            position: absolute;
            left: calc(50% - 25px);
            top: calc(50% - 25px);
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- html模板 -->
        <!-- <div class="spot"></div> -->
        <div class="spot-container"></div>
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
        <div class="cover"></div>
    </div>
    <script>
        let box = document.querySelector('.box')
        let spotContainer = document.querySelector('.spot-container')
        let hour = document.querySelector('.hour')
        let minute = document.querySelector('.minute')
        let second = document.querySelector('.second')
        let deg = 0
        function clock() {
            for (let i = 0; i < 60; i++) {
                let div = document.createElement('div')
                div.className = 'spot'
                spotContainer.appendChild(div)
                deg += 6
                div.style.transform = `rotate(${deg}deg)`
                if ((i + 1) % 5 == 0) {
                    div.style.height = '24px'
                }
            }
        }
        // 设置时钟的变量，就是初始时间
        let h = 2
        let m = 48
        let s = 10
        // 指针旋转的圈数
        let hRound = 0
        let mRound = 0
        let sRound = 0
        // 设置指针的旋转角度
        function pointer() {
            hour.style.transform = `rotate(${hRound * 360 + h * 30}deg)`
            minute.style.transform = `rotate(${mRound * 360 + m * 6}deg)`
            second.style.transform = `rotate(${sRound * 360 + s * 6}deg)`
        }
        clock();
        pointer();
        setInterval(() => {
            // 先执行指针旋转逻辑
            s++
            // 进行进位判断
            if (s >= 60) {
                m++
                sRound++
                s = 0
                if (m >= 60) {
                    h++
                    mRound++
                    m = 0
                    if (h >= 12) {
                        h = 0
                        hRound++
                    }
                }
            }
            // 设置指针的旋转角度
            pointer()
        }, 1000)
    </script>
</body>

</html>

（3）时钟效果图：