引入

当提到为心爱的人做一些小惊喜时，其中一种简单而又温暖的方式就是送上一份特别的礼物。在这篇文章中，我们将探讨如何利用编程技能制作一个特别的时钟，为女朋友带来一份别具心意的小惊喜。在现代科技发展的时代，我们有幸拥有许多创造性的工具和资源，可以用来表达我们的爱意。其中，编程技能为我们提供了一种全新的方式来创造令人惊喜的礼物。这个特别的时钟就是一个充满创意和浪漫的例子，它将为女朋友带来一份意想不到的惊喜和温暖。

制作过程

在制作DIY时钟前，我们需要先了解一下定位布局的使用。 CSS总共有三种定位，静态定位，相对定位，绝对定位。

静态定位（Static） ：
- 默认的定位方式。
- 元素按照它们在 HTML 中的顺序进行布局，即遵循文档流。
- 无法通过 top、right、bottom、left 属性来调整元素的位置，这些属性不起作用。
相对定位（Relative） ：
- 相对于元素自身在文档流中的位置进行定位。
- 使用 top、right、bottom、left 属性可以将元素相对于其正常位置进行移动，但不会影响其他元素的位置。
- 元素仍然占据文档流中的位置，移动后的位置仍然会保留给其他元素。
绝对定位（Absolute） ：
- 相对于其最近的已定位祖先元素（指定了position属性为relative、absolute或fixed的元素）进行定位。
- 如果没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）进行定位。
- 使用 top、right、bottom、left 属性可以确定元素相对于其定位的容器的位置。
- 元素不再占据文档流中的位置，移动后不会影响其他元素的位置，因此可能会重叠其他元素。

在制作DIY时钟时我们主要用到的有相对定位和绝对定位。

时钟制作

<div class="clock">：表示整个时钟的容器。
<div class="outer-clock-face">：表示外部钟面的容器，用于放置时钟刻度。
- <div class="marking marking-one"></div>
- <div class="marking marking-two"></div>
- <div class="marking marking-three"></div>
- <div class="marking marking-four"></div>：表示钟面刻度。
<div class="inner-clock-face">：表示内部钟面的容器，用于放置时、分、秒三个指针。
- <div class="hand hour-hand"></div>：表示时针。
- <div class="hand min-hand"></div>：表示分针。
- <div class="hand second-hand"></div>：表示秒针。

接下来让我们看看css部分的代码

css 复制代码

```.clock{
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 7px solid #ffebdb;
    background-image: url('./1.jpg');
    background-size:  140%;
    padding: 20px;
}
.outer-clock-face{
    width: 100%;
    height: 100%;
    border-radius: 100%;
    position: relative;   
}
.outer-clock-face::before,
.outer-clock-face::after{
    content: '';
    width: 10px;
    height: 100%;
    background-color: blueviolet;
    display: block;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}
.outer-clock-face::after{
    transform: rotateZ(90deg);
    transform-origin: center center;
}
.marking{
    width: 3px;
    height: 100%;
    background: blueviolet;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    transform-origin: center center;
}
.marking-one{
    transform: rotateZ(30deg);
}
.marking-two{
    transform: rotateZ(60deg);
}
.marking-three{
    transform: rotateZ(120deg);
}
.marking-four{
    transform: rotateZ(150deg);
}


.inner-clock-face{
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background-color: #ffebdb;
    background-image: url('./1.jpg');
    background-size:  140%;
    position: relative;
    top: -50%;
    left: 50%;
    transform: translate(-50% ,-50%);
    z-index: 1;
}
.hand{
    width: 50%;
    height: 6px;
    background-color: red;
    border-radius: 6px;
    position: absolute;
    top: 50%;
    right: 50%;
    transform: rotateY(-50%) rotateZ(90deg);
    transform-origin: 100% center;
}
.hour-hand{
    width: 30%;
}
.min-hand{
    width: 40%;
    height: 3px;
    background-color: green;
}
.second-hand{
    width: 45%;
    height: 2px;
    background-color: yellow;
}

-   `.clock`：表示整个时钟的样式。

    -   设置了宽度、高度和边框圆角，创建了一个圆形的外观。
    -   设置了边框样式和背景图片。
    -   设置了内边距，以便指针在钟面上有足够的空间移动。

-   `.outer-clock-face`：表示外部钟面的样式。

    -   设置了宽度、高度和圆角，创建了一个圆形的外观。
    -   使用伪元素 `::before` 和 `::after` 创建了两条垂直的线，用于标识钟面的12点和3点方向。

-   `.marking`：表示钟面上的刻度样式。

    -   设置了宽度、高度、背景颜色和位置，使刻度位于钟面的中心。
    -   使用 `transform` 属性对刻度进行旋转，分别设置了不同角度的旋转，用于标识不同的刻度位置。

-   `.inner-clock-face`：表示内部钟面的样式。

    -   设置了宽度、高度、圆角和背景颜色，创建了一个圆形的内部钟面。
    -   使用 `position: relative` 和 `transform` 属性将内部钟面相对于外部钟面进行定位，使其居中显示在外部钟面中间。

-   `.hand`：表示时、分、秒指针的样式。

    -   设置了宽度、高度、背景颜色和圆角，创建了指针的外观。
    -   使用 `position: absolute` 进行绝对定位，使指针可以在钟面上移动。
    -   使用 `transform` 属性对指针进行旋转，使其指向正确的时间位置。

如果大家需要更换背景图片的话只需要修改.clock和.inner-clock-face中的background-image: url('./1.jpg');就可以啦！

时钟样式

现在时钟的大体框架就搭建好啦，关于如何让指针动起来，这个我们在下篇的js部分的代码中再讲解。这个特别的时钟不仅仅是一个简单的时间显示工具，它还包含了一些特色功能，让女朋友感受到更多的关爱和温暖。比如，我们可以添加一个心形的指针，每到特定的时间点，指针会指向一个特别的数字或标识，代表着我们的爱意和祝福。另外，我们还可以在时钟界面上添加一些浪漫的背景音乐或动画效果，为女朋友营造一个浪漫而温馨的氛围。

DIY时钟：给女朋友的小惊喜（上篇）

引入

制作过程

时钟制作

时钟样式