【CSS实例】

学习目标:

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


学习内容:

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

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

文章目录

一、css画时钟

1、涉及到的css技术

2、思路

3、实现

      1、页面基本布局

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

      3、画刻度

    4、指针和中心点的制作

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

 4、全部代码



一、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画出圆形作为表盘,页面上显示一个圆形

【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实例】

接下来我们利用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);
    }

结果如下:

【CSS实例】


    4、指针和中心点的制作

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

 【CSS实例】

.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;
            }
        }
    }
}

上一篇:实验五


下一篇:实验5 模板类和多态