第三阶段总结

于 2022-09-13 12:26:42 发布
阅读量195 收藏
点赞数 1
文章标签： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_65345949/article/details/126779513
版权

1.动画

  1. transform: translate平移(100px) rotate旋转(45deg) 缩放scale(0.5) skew倾斜(30deg)

  2. 原点transform-origin: center center;（默认为元素左上角）

  4. transition过渡动画

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

       指定css属性能够产生过度动画 

                transition-property: left, transform;

                 transition-property 还有两个待选项

                             none: 无

                             all: 所有属性都能播放过渡动画

         动画播放的时长

               transition-duration: 2s;

          动画播放的速度曲线

                    linear: 匀速直线运动

                    ease-in: 慢进

                    ease-out: 慢出

                    ease-in-out: 慢进慢出

                    cubic-bezier: 曲线函数

        动画播放延迟

                transition-delay: 3s;

         合成属性

             语法: transition: property duration timing-function delay;

    案例：钟表综合应用

    <!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>
        div.box {
            width: 500px;
            height: 500px;
            background-color: black;
            border: 15px solid rgb(128, 128, 128);
            border-radius: 50%;
            position: relative;
            background-image: url(../img/钟表背景图片.jpeg);
            background-position: -43px -139px;
        }

        .mini {
            width: 20px;
            height: 20px;
            background-color: white;
            border-radius: 20px;
            position: absolute;
            top: 5px;
            left: 240px;
            transform-origin: center 245px;
        }


        .h {
            width: 10px;
            height: 180px;
            background-color: black;
            position: absolute;
            top: 150px;
            left: 268px;
            transform: rotate(210deg);
            transform-origin: center 120px;
        }

        .m {
            width: 10px;
            height: 200px;
            background-color: chartreuse;
            position: absolute;
            top: 130px;
            left: 268px;
            transform: rotate(236deg);
            transform-origin: center 140px;
        }

        .s {
            width: 10px;
            height: 220px;
            background-color: #FCA896;
            position: absolute;
            top: 110px;
            left: 267px;
            transform: rotate(90deg);
            transform-origin: center 160px;
        }

        .point {
            width: 50px;
            height: 50px;
            background-color: #FCA896;
            border-radius: 30px;
            position: absolute;
            top: 248px;
            left: 250px;
            /* display: none; */
        }

        .h-3 {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent black transparent;
            position: absolute;
            top: -41px;
            left: -15px;
        }

        .m-3 {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent chartreuse transparent;
            position: absolute;
            top: -41px;
            left: -15px;
        }

        .s-3 {
            width: 0;
            height: 0;
            border-width: 20px;
            border-style: solid;
            border-color: transparent transparent #FCA896 transparent;
            position: absolute;
            top: -41px;
            left: -15px;

        }
    </style>
</head>

<body>
    <div class="box"></div>

    <div class="h">
        <div class="h-3"></div>
    </div>
    <div class="m">
        <div class="m-3"></div>
    </div>
    <div class="s">
        <div class="s-3"></div>
    </div>
    <div class="point"></div>
    <script>
        let box = document.querySelector('.box')
        let deg = -6

        for (let i = 0; i < 60; i++) {
            let div = document.createElement('div')
            div.className = 'mini'
            deg += 6
            div.style.transform = `rotate(${deg}deg)`
            box.appendChild(div)
            if (i % 5 == 0) {
                div.style.height = '40px'
            }
        }
        let hour = document.querySelector('.h')
        let minute = document.querySelector('.m')
        let second = document.querySelector('.s')
        let a = new Date()
        let h = a.getHours();
        let m = a.getMinutes()
        let s = a.getSeconds()
        console.log(a);
        console.log(h, m, s);
        //圈数
        let hround = 0
        let mround = 0
        let sround = 0
        function clock() {
            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();
        setInterval(() => {
            s++
            if (s >= 60) {
                m++
                sround++
                s = 0
            }
            if (m >= 60) {

                h++
                mround++
                m = 0
            }
            if (h >= 12) {
                h = 0
                hround++
            }
            clock()
        }, 1000)
    </script>
</body>

</html>
    钟表
    效果图 

 2.3D变换

 3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-style

    总结：

    要使用3d变换需要依序执行以下步骤：

    1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

    2. 在父元素上设置透视距离：perspective: 100px;

    3. 给场景添加演员，给场景元素添加子元素

    4. 在子元素上使用3d变换

例如：

<!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>
        body {
            margin: 0;
        }

        .scene {
            height: 100vh;
            transform-style: preserve-3d;
            perspective: 300px;
            perspective-origin: center center;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .face {
            width: 200px;
            height: 200px;
            background-color: #f00;
            opacity: 0.2;

            position: absolute;

            color: #fff;
            font-size: 32px;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .left {
            transform-origin: left center;
            transform: rotateY(90deg);
            background-color: #ff0;
        }

        .right {
            transform-origin: right center;
            transform: rotateY(-90deg);
            background-color: #0f0;
        }

        .top {
            transform-origin: center top;
            transform: rotateX(-90deg);
            background-color: #00f;
        }

        .bottom {
            transform-origin: center bottom;
            transform: rotateX(90deg);
            background-color: #0ff;
        }

        .back {
            transform: translateZ(-200px);
            background-color: #f0f;
        }
    </style>
</head>

<body>
    <div class="scene">
        <div class="face">前</div>
        <div class="face back">后</div>
        <div class="face left">左</div>
        <div class="face right">右</div>
        <div class="face top">上</div>
        <div class="face bottom">下</div>
    </div>
</body>

</html>

效果图：

 属性选择器补充：

 伪类选择器补充：

 渐变色

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient

 线性渐变

            语法: linear-gradient(direction, color1, color2, color3 ... )

                direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to top

                color1 color2 ...: 渐变的颜色序列

线性渐变

  background-image: linear-gradient(30deg, #f00, #0f0, #00f);

效果图：

  /* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */

            background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);

效果图：

 

 /* 重复线性渐变 */

            background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);

效果图：

 

 /* 径向渐变 */

            background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);

            background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);

效果图：

 

/* 重复径向渐变 */

            background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);

效果图：

 

 分栏布局

 

响应式布局

当屏幕大小为600-900px时，背景颜色改为橙色

 @media screen and (min-width: 600px) and (max-width: 900px) {

            .box {

                background-color: orange 

            }

        }

canvas

 使用canvas的步骤

    1. 创建canvas标签

    2. 给canvas标签设置 width height 属性

           <canvas width="400" height="300"></canvas>

    3. 通过js 获取canvas标签

            const canvas = document.querySelector('canvas')

    4. 通过canvas标签获取context画布上下文（画布对象）

           const ctx = canvas.getContext('2d')

    5. 通过context绘制画布

              例如： 绘制一个实心矩形

                ctx.fillRect(100, 50, 100, 100)

                ctx.fillRect(x, y, w, h)

                           x: 水平坐标

                            y: 竖直坐标

                            坐标原点在canvas左上角

                            w: 宽度

                             h: 高度

    // 清空矩形, 用于清空画布

    ctx.clearRect(0, 0, 800, 600)

     绘制实心文字

     语法：ctx.fillText(text, x, y, max-width)

     text: 要渲染的文本

      x,y: 文本渲染的坐标位置

      max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度

      ctx.fillText('祖国万岁!!', 200, 100, 100)

划线：

<!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>
        canvas {
            border: 3px solid #000;
        }
    </style>
</head>

<body>
    <canvas width="800" height="600"></canvas>
</body>

<script>
    const canvas = document.querySelector('canvas')
    const ctx = canvas.getContext('2d')


    // 设置颜色和线宽
    ctx.strokeStyle = '#ff0'
    ctx.lineWidth = 15

    // 画线分两个步骤:
    // 1. 描点（设置路径）
    // 2. 画线（将所描的点连接起来）

    // 步骤一
    // 使用 beginPath 开启路径
    ctx.beginPath()
    // 移动笔头但不会记录路径上的线条
    ctx.moveTo(400, 100)
    // 用线绘制到下一个点
    ctx.lineTo(200, 200)
    ctx.lineTo(600, 200)
    ctx.lineTo(400, 100)

    // 将路径封闭
    ctx.closePath()

    // 注意：beginPath在画新的路径的时候必须调用，closePath选择性调用


    // 步骤二
    // 为了显示图形需要调用以下函数
    // 将路径所包围的图形用纯色来填充
    // ctx.fill()
    // 将路径用镂空线条进行绘制
    ctx.stroke()


    ctx.strokeStyle = '#f00'

    ctx.beginPath()

    ctx.moveTo(400, 400)
    ctx.lineTo(500, 400)

    // 角度转弧度的公式: rad = (PI / 180) * deg
    // 弧线
    // ctx.arc(x, y, r, start, end)
    // x: 圆心横坐标
    // y: 圆心纵坐标
    // r: 圆半径
    // start: 起始弧度 0度时的方向为水平向右 顺时针为正方向
    // end: 结束弧度
    ctx.arc(400, 400, 100, 0, Math.PI / 180 * 30)
    ctx.closePath()

    ctx.fill()
    // ctx.stroke()
</script>

</html>

效果图：

 注意：

fillStyle 可以修改所有使用fill的函数所填充的颜色

strokeStyle 可以修改所有stroke函数的描边颜色

补充的额外方法

 assign（）方法                  assign（b,a）将a对象添加到b对象中去，返回值为b

芊芊儿591
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值