首页 > 其他分享> 文章详细

【CSS实例】

2022-02-21 13:32:12 阅读：152 来源： 互联网

标签：50% transform height width 实例 let CSS css

学习目标：

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

标签：50%,transform,height,width,实例,let,CSS,css
来源： https://blog.csdn.net/qll123/article/details/123042923

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

【CSS实例】

学习目标：

学习内容：

一、css画时钟

1、涉及到的css技术

2、思路

3、实现

1、页面基本布局

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

3、画刻度

4、指针和中心点的制作

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

4、全部代码