【CSS实例】

2023-10-16 11:28:40

学习目标：

css样式学习、总结，知识巩固

学习内容：

在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。

目的就是巩固css的基础知识，防止遗忘

2、css画出圆形作为表盘，页面上显示一个圆形

一、css画时钟

1、涉及到的css技术

利用css绘制圆形

.circle{
   border-radius: 50%;// 将一个div变为圆形
}

画线并将线按照中心点旋转

{
  transform:rotate(6deg);//旋转角度
  transform-origin: center 150px;//改变旋转中心点
}

2、思路

1、在页面上绘制一个div，长宽相等，css加圆角；

2、绘制表盘刻度及数字，使用旋转；利用js循环画出所有刻度和数字；

3、绘制时分秒指针；

4、利用setInterval让指针动起来。

3、实现

1、页面基本布局

<--外部圆形————表盘--> 
<div class="time-clock"> 
        <!-- 表盘 刻度 数字 -->
        <ul>
         
        </ul>
        <!-- 时针 -->
        <div id="hour" class="hour"></div>
        <!-- 分针 -->
        <div id="minute" class="minute"></div>
        <!-- 秒针 -->
        <div id="second" class="second"></div>
        <!-- 中心点 -->
        <div class="ball"></div>
  </div>

2、css画出圆形作为表盘，页面上显示一个圆形

.time-clock {
    margin: 50px;
    width: 300px;
    height: 300px;
    border: 3px solid black;
    border-radius: 50%;
    position: relative;
}

3、画刻度

html元素中的 ul下加<li><span>数字</span></li>实现刻度和数字的画法。

我们画了一个300px*300px的表盘，要再这个圆里面画出刻度线并把这个圆等分；

分析：刻度：12*5=60；表盘上的刻度总共有60个刻度。

度数：360/60=6deg；每个刻度占的度数；

偏移量：i*6 i 为表盘上的刻度6为偏移度数，得出每个刻度的偏移度

旋转中心：150px；我们画了一个直径300的圆，那它的中心点在150px处

接下来我们利用css角度偏移控制，刻度线的位置，利用js循环画出所有刻度线

先看css

.time-clock {
    margin: 50px;
    width: 300px;
    height: 300px;
    border: 3px solid black;
    border-radius: 50%;
    position: relative;
    ul {
        list-style: none;
        position: relative;
        width: 100%;
        height: 100%;

        li {
            width: 2px;
            height: 8px;
            position: absolute;
            background: black;
            left: 50%; 
            transform-origin: center 150px;

            span {
                position: absolute;
                top: 15px;
                left: -5px;
            }
        }
    }
}

js画出所有线和数字

    let ul = document.querySelector("ul");
    let num = 0;
    for(let i=0;i<60;i++){
        let li = document.createElement('li');
        li.style.transform = `rotate(${i*6}deg)`;
        if(i%5 == 0){
            li.style.height='16px'// 一个大格的线要长一些
            let span = document.createElement('span');
            let clockNum = i==0 ? 12 : num;
            span.innerText = clockNum +'';
            span.style.transform = `rotate(-${i*6}deg)`;
            num++
            li.appendChild(span);
        }
        ul.appendChild(li);
    }

结果如下：

4、指针和中心点的制作

表盘画完了，我们开始画指针，这里指针就是三个div设置宽度和长度。中心点是一个小圆画法同第一步，主要是确认中心点。指针上不要使用transform，因为一会儿要写脚本通过transfrom改变指针的角度，让指针动起来，css中使用的transform会被脚本中的所替代。

.time-clock {
    margin: 50px;
    width: 300px;
    height: 300px;
    border: 3px solid black;
    border-radius: 50%;
    position: relative;
    .hour,.minute,.second{
        position: absolute;
        left:50%;
        top:50%;
        background:black;
        transform-origin: center bottom;
    }
    .hour{
        width:6px;
        height:50px;
        // 时针设置到中心点 
        margin: -50px 0 0 -3px;
    }
    .minute{
        width:4px;
        height:80px;
        // 时针设置到中心点 
        margin: -80px 0 0 -3px;
    }
    .second{
        width:2px;
        height: 120px;
        margin: -120px 0 0 -3px;
    }
    .ball{
        width:20px;
        height:20px;
        position: absolute;
        background: black;
        border-radius: 50%;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

    ul {
        list-style: none;
        position: relative;
        width: 100%;
        height: 100%;

        li {
            width: 2px;
            height: 8px;
            position: absolute;
            background: black;
            left: 50%; 
            transform-origin: center 150px;

            span {
                position: absolute;
                top: 15px;
                left: -5px;
            }
        }
    }
}

5、css完成，利用js使指针动起来

 let hour = document.querySelector('#hour');
    let minute = document.querySelector('#minute');
    let second = document.querySelector('#second');
    // hour.style.transform=`rotate(${5*30}deg)`;
    setInterval(()=>{
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        hour.style.transform=`rotate(${h*30+m/2}deg)`;
        minute.style.transform=`rotate(${m*6}deg)`;
        second.style.transform=`rotate(${s*6}deg)`;

    },1000)

4、全部代码

这里的css使用less写的，生成的css放到了 css文件夹下；

<!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>
    <link rel="stylesheet" href="./css/time.css">
</head>
<body>
    <div class="time-clock">
        <!-- 表盘 刻度 数字 -->
        <ul>
         
        </ul>
        <!-- 时针 -->
        <div id="hour" class="hour"></div>
        <!-- 分针 -->
        <div id="minute" class="minute"></div>
        <!-- 秒针 -->
        <div id="second" class="second"></div>
        <!-- 中心点 -->
        <div class="ball"></div>
    </div>
</body>
<script>
    let ul = document.querySelector("ul");
    let num = 0;
    for(let i=0;i<60;i++){
        let li = document.createElement('li');
        li.style.transform = `rotate(${i*6}deg)`;
        if(i%5 == 0){
            li.style.height='16px'// 一个大格的线要长一些
            let span = document.createElement('span');
            let clockNum = i==0 ? 12 : num;
            span.innerText = clockNum +'';
            span.style.transform = `rotate(-${i*6}deg)`;
            num++
            li.appendChild(span);
        }
        ul.appendChild(li);
    }
    let hour = document.querySelector('#hour');
    let minute = document.querySelector('#minute');
    let second = document.querySelector('#second');
    setInterval(()=>{
        let date = new Date();
        let h = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();
        hour.style.transform=`rotate(${h*30+m/2}deg)`;
        minute.style.transform=`rotate(${m*6}deg)`;
        second.style.transform=`rotate(${s*6}deg)`;

    },1000)
</script>
</html>

// out: ../css/
* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100%;
}

.time-clock {
    margin: 50px;
    width: 300px;
    height: 300px;
    border: 3px solid black;
    border-radius: 50%;
    position: relative;
    .hour,.minute,.second{
        position: absolute;
        left:50%;
        top:50%;
        background:black;
        transform-origin: center bottom;
    }
    .hour{
        width:6px;
        height:50px;
        // 时针设置到中心点 
        margin: -50px 0 0 -3px;
    }
    .minute{
        width:4px;
        height:80px;
        // 时针设置到中心点 
        margin: -80px 0 0 -3px;
    }
    .second{
        width:2px;
        height: 120px;
        margin: -120px 0 0 -3px;
    }
    .ball{
        width:20px;
        height:20px;
        position: absolute;
        background: black;
        border-radius: 50%;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }

    ul {
        list-style: none;
        position: relative;
        width: 100%;
        height: 100%;

        li {
            width: 2px;
            height: 8px;
            position: absolute;
            background: black;
            left: 50%; 
            transform-origin: center 150px;

            span {
                position: absolute;
                top: 15px;
                left: -5px;
            }
        }
    }
}

码农公寓

学习目标：

学习内容：

一、css画时钟

1、涉及到的css技术

2、思路

3、实现

1、页面基本布局

2、css画出圆形作为表盘，页面上显示一个圆形

3、画刻度

4、指针和中心点的制作

5、css完成，利用js使指针动起来

4、全部代码

相关文章