「兔了个兔」玉兔踏青，纯CSS实现瑞兔日历（附源码）

已于 2023-03-21 08:42:09 修改
阅读量7.1k 收藏 111
点赞数 111
分类专栏： 「兔了个兔」 《前端风景线》 文章标签： css html 前端 瑞兔日历 兔了个兔
于 2023-02-26 07:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59480481/article/details/129221318
版权

image.png

💂作者简介： THUNDER王，一名热爱财税和SAP ABAP编程以及热爱分享的博主。目前于江西师范大学会计学专业大二本科在读，同时任汉硕云（广东）科技有限公司ABAP开发顾问。在学习工作中，我通常使用偏后端的开发语言ABAP，SQL进行任务的完成，对SAP企业管理系统，SAP ABAP开发和数据库具有较深入的研究。

💅文章概要： 各位小伙伴们大家好呀！今天给大家带来的是一款可爱兔兔的纯CSS日历，希望大家喜欢！让我们一起用日历记录下今天的日子！

🤟每日一言： 永远年轻，永远热泪盈眶！

目录

前言

在这里插入图片描述

各位小伙伴们大家好呀！今天给大家带来的是一款可爱兔兔的纯CSS日历，希望大家喜欢！让我们一起用日历记录下今天的日子！

效果演示

  下面为大家展示的是瑞兔日历的预览图：

image.png

实现思路

  看完效果图后，各位小伙伴们肯定很想知道实现的思路，接下来我将分步骤逐一进行讲解，如果想要获取源码的小伙伴可以跳过该部分，直接前往最后的完整源码章节！在分步讲解中我会将HTML，CSS两个部分全部放在同一个文件中，方便各位小伙伴们获取!

  我将实现思路分成了如下四个部分，列举如下：

  • 背景设计
  • 日历框设计
  • 日历左侧日期设计
  • 日历右侧瑞兔图片设计

  背景设计

  通过使用HTML和CSS可以完成整个日历背景的设置，背景颜色采取了橘橙色的设计，具有一种高级感和亲切感！

image.png

   HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>

</body>
</html>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

body{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    display: flex; /*盒模型*/
    justify-content: center; /*主轴居中*/
    align-items: center; /*项目居中*/
    height: 100vh; /*高度*/
    background-color: #ff8c6b; /*背景颜色*/
    font-family: sans-serif; /*字体*/
}

  日历框设计

   日历框设计对四个角落采取了圆角化处理，并且设计了底部阴影模糊处理，使得整个日历框呈现一种三维立体的感觉！

  • 圆角化处理使用CSS中的border-radius对象选择器
  • 底部阴影模糊处理使用CSS中的border-radius对象选择器

image.png

   HTML代码

   将下面代码复制粘贴至<body></body>之间

<div class="calendar">
</div>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

.calendar{
    position: relative;
    background-color: #fff;
    width: 800px;
    height: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 15px solid #fff; /*边框*/
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    border-radius: 2rem;
}

  日历左侧日期设计

  左侧黑色高亮的日期可以自己进行修改，代表当天的日期。根据月份的不同，需要对当月的日期进行重新设计！

image.png

   HTML代码

   将下面代码复制粘贴至<div class="calendar"></div>之间

       <div class="date">
            <h3>January</h3>
            <div class="days">
                <div class="day">S</div>
                <div class="day">M</div>
                <div class="day">T</div>
                <div class="day">W</div>
                <div class="day">T</div>
                <div class="day">F</div>
                <div class="day">S</div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number">1</div>
                <div class="number">2</div>
                <div class="number">3</div>
                <div class="number">4</div>
                <div class="number">5</div>
                <div class="number">6</div>
                <div class="number">7</div>
                <div class="number">8</div>
                <div class="number">9</div>
                <div class="number">10</div>
                <div class="number">11</div>
                <div class="number">12</div>
                <div class="number">13</div>
                <div class="number">14</div>
                <div class="number">15</div>
                <div class="number">16</div>
                <div class="number">17</div>
                <div class="number">18</div>
                <div class="number">19</div>
                <div class="number">20</div>
                <div class="number">21</div>
                <div class="number">22</div>
                <div class="number">23</div>
                <div class="number">24</div>
                <div class="number active">25</div>
                <div class="number">26</div>
                <div class="number">27</div>
                <div class="number">28</div>
                <div class="number">29</div>
                <div class="number">30</div>
                <div class="number">31</div>
            </div>
        </div>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

.calendar .date{
    width: 400px;
    padding: 30px;
    box-sizing: border-box; /*盒子大小规则*/
}
.calendar .date h3{
    margin: 0 0 20px; 
    padding: 0;
    font-size: 24px; /*字体大小*/
    font-weight: 500; /*字体维度*/
    text-align: center; /*字体居中*/
    user-select: none; /*不可选中*/
    text-transform: capitalize; /*首字母大写*/
}
.calendar .date .days{
    display: flex;
    flex-wrap: wrap; /*可换行*/
}
.calendar .date .days .number.active{
    background-color: #362b48;
    color: #fff;
    cursor: pointer; /*鼠标样式*/
    border-radius: 50%; /*边框圆角*/
}
.calendar .date .days .day,
.calendar .date .days .number{
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1){ /*7个为一组，每组第一个*/
    color: #f44336;
    font-weight: 600;
}

  日历右侧瑞兔图片设计

image.png

   HTML代码

   将下面代码复制粘贴至最后一个</div>之上

 <div class="img">
       <img src="https://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg" alt="Error" >
 </div>

   CSS代码

   将下面代码复制粘贴至<style></style>之间

.calendar .img{
    position: relative; /*定位*/
    top:0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #000;
    user-select: none;
    border-radius: 3.3rem;
}
.calendar .img img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /*元素内容如何适应屏幕*/
    border-radius: 3.3rem;
}

完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    body{
    margin: 0; /*外边距*/
    padding: 0; /*内边距*/
    display: flex; /*盒模型*/
    justify-content: center; /*主轴居中*/
    align-items: center; /*项目居中*/
    height: 100vh; /*高度*/
    background-color: #ff8c6b; /*背景颜色*/
    font-family: sans-serif; /*字体*/
}
.calendar{
    position: relative;
    background-color: #fff;
    width: 800px;
    height: 450px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 15px solid #fff; /*边框*/
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    border-radius: 2rem;
}
.calendar .date{
    width: 400px;
    padding: 30px;
    box-sizing: border-box; /*盒子大小规则*/
}
.calendar .date h3{
    margin: 0 0 20px; 
    padding: 0;
    font-size: 24px; /*字体大小*/
    font-weight: 500; /*字体维度*/
    text-align: center; /*字体居中*/
    user-select: none; /*不可选中*/
    text-transform: capitalize; /*首字母大写*/
}
.calendar .date .days{
    display: flex;
    flex-wrap: wrap; /*可换行*/
}
.calendar .date .days .number.active{
    background-color: #362b48;
    color: #fff;
    cursor: pointer; /*鼠标样式*/
    border-radius: 50%; /*边框圆角*/
}
.calendar .date .days .day,
.calendar .date .days .number{
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
}
.calendar .date .days .day:first-child,
.calendar .date .days .number:nth-child(7n+1){ /*7个为一组，每组第一个*/
    color: #f44336;
    font-weight: 600;
}
.calendar .img{
    position: relative; /*定位*/
    top:0;
    right: 0;
    width: 400px;
    height: 100%;
    background-color: #000;
    user-select: none;
    border-radius: 3.3rem;
}
.calendar .img img{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /*元素内容如何适应屏幕*/
    border-radius: 3.3rem;
}

    </style>
</head>
<body>
    <div class="calendar">
        <div class="date">
            <h3>January</h3>
            <div class="days">
                <div class="day">S</div>
                <div class="day">M</div>
                <div class="day">T</div>
                <div class="day">W</div>
                <div class="day">T</div>
                <div class="day">F</div>
                <div class="day">S</div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number"></div>
                <div class="number">1</div>
                <div class="number">2</div>
                <div class="number">3</div>
                <div class="number">4</div>
                <div class="number">5</div>
                <div class="number">6</div>
                <div class="number">7</div>
                <div class="number">8</div>
                <div class="number">9</div>
                <div class="number">10</div>
                <div class="number">11</div>
                <div class="number">12</div>
                <div class="number">13</div>
                <div class="number">14</div>
                <div class="number">15</div>
                <div class="number">16</div>
                <div class="number">17</div>
                <div class="number">18</div>
                <div class="number">19</div>
                <div class="number">20</div>
                <div class="number">21</div>
                <div class="number">22</div>
                <div class="number">23</div>
                <div class="number">24</div>
                <div class="number active">25</div>
                <div class="number">26</div>
                <div class="number">27</div>
                <div class="number">28</div>
                <div class="number">29</div>
                <div class="number">30</div>
                <div class="number">31</div>
            </div>
        </div>
        <div class="img">
            <img src="https://wyz-math.cn/usr/uploads/2023/01/3088778204.jpg" alt="Error" >
        </div>
    </div>
</body>
</html>

写在最后的话

  本文花费大量时间介绍了如何创建一个精美的瑞兔日历，希望能帮助到各位小伙伴，码文不易，还望各位大佬们多多支持哦，你们的支持是我最大的动力！

在这里插入图片描述

✨ 原 创 不 易 ， 还 希 望 各 位 大 佬 支 持 一 下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下

👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！ \textcolor{9c81c1}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！ \textcolor{ed7976}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！ \textcolor{98c091}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

ThundersArk
关注
  • 111
    点赞
  • 踩
  • 111
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 87
    评论
专栏目录
CSS3创意每日计划日历事项特效
07-24
CSS3带图标和占位符的登录表单是一款每日计划事项日历提示，日历事项ui网格布局特效。
JS+CSS实现漂亮的日历特效（仿win10系统日历）
热门推荐
我爱吃豆芽呀
12-12 1万+
初衷：无意见发现win10的系统日鼠标悬浮的特效非常好看，想尝试一下用CSS和JS实现一下。 先上一下目前实现的效果图： 难点是这种间隔效果和鼠标移动效果的实现，如下图 间隔效果的实现我采用了 background-clip: content-box; padding: 2px; background-color: gray; border: 1px solid gray; 样...
用html和css画一个高级可爱的兔子用作兔年表白直接可以运行的
weixin_35755640的博客
12-31 301
好的，我们可以使用 HTML 和 CSS 来绘制一个高级可爱的兔子。 首先，我们可以使用 HTML 的 div 元素来创建一个包含兔子的容器。然后，我们可以使用 CSS 的圆形和颜色属性来绘制兔子的身体和脸。 例如，我们可以使用以下代码来创建一个红色的圆形作为兔子的身体： .body { width: 200px; height: 200px; border-radius: 50%; ...
纯css3画小兔子代码
ICode联盟
09-02 988
下载地址仅仅使用css3代码画出的快乐小兔子，没有动画效果。可以尝试加一些兔子动画效果，比如眼睛跟随动画。 dd:
html5 CSS3卡巴拉日历动画特效.zip
07-11
代码片段： dashArray[0] = i;     dashArray[1] = (100 - i);     dashOffset = i * 2;          if (this.localName === 'path') {       $(this)         .attr('stroke', 'rgba(' color.join(',') ')')         .attr('stroke-dasharray', dashArray.join(','))         .attr('stroke-dashoffset', dashOffset);     } else {       $(this)         .attr('stroke', 'rgba(255,255,255,' color[3] ')')         .attr('stroke-dasharray', dashArray.join(','))         .attr('stroke-dashoffset', dashOffset);     }
那些炫酷的CSS文字效果之诗词《兔》
南城
01-09 603
不知不觉已经迈入2023年了，本次分享10种不同的有关文字方面的特效，让我们一边欣赏有关《兔》相关的古诗词的同时一边走进CSS的世界。
【日常点滴018】Python画兔年生肖，用arcade游戏库画会动的兔子
weixin_43521165的博客
01-18 1124
【视频课文档】使用python游戏库arcade绘制兔年生肖，并带大家进一步了解arcade游戏设计
学习CSS3，使用双旋转实现福到了的迎春喜庆特效
xingyu_qie的专栏
01-13 2613
我利用css3的旋转做了一个福到了的特效，而且是双旋转哦！预祝大家在新的一年里，玉兔吉祥，步步高升。
十张玉兔PPT素材
07-16
十张玉兔PPT素材：玉兔PPT素材，小兔子PPT素材。适合用于制作中秋节PPT。.PPTX格式；
HTML5翻页特效（日历）
11-13
　　一款使用jQuery++制作的翻页特效示例，适用于制作像小册子（如日历、电子书等）这类应用的翻页浏览功能场景。 　　感兴趣的开发者可以下载源码，解压后导入MM开发环境进行修改优化，可跨平台导出apk（Android）和ipa（iOS）包，安装到手机上玩；也可以将该游戏工程文件部署到MM应用引擎，在浏览器查看效果。 　　MM应用引擎部署效果： 　　http://bookblock.mmapp.cn/client/www/app.html 　　更多示例代码请进入MM开发环境官网查看下载： 　　http://dev.10086.cn/ude/index.do
《浮生为卿歌》玉兔兔攻略.docx
09-26
《浮生为卿歌》玉兔兔攻略.docx
html5贪吃兔子大吃月饼移动端游戏.rar
07-10
HTML5兔子吃月饼大战，移动端游戏源码范例，在手机上操作很方便，手指滑动控制兔子左右移动，接到掉下来的月饼即可，不过这里提醒下，好像不能吃太多，吃太多兔子就撑死了，可以邀请请小伙伴吃月饼，最短时间内吃的...
可爱卡通玉兔吃月饼背景的中秋节活动策划PPT模板
07-16
可爱卡通玉兔吃月饼背景的，中秋节活动策划PPT模板，共24页； PPT模板首页，桂花树旁三只玉兔正在月下品尝甜美的月饼。月亮中间填写中秋节活动策划PPT标题文字。界面卡通可爱，背景元素与中秋节PPT主题搭配。 ...
可爱卡通玉兔月亮背景的中秋佳节PPT模板
07-16
可爱卡通玉兔月亮背景的中秋佳节PPT模板，共16页； PPT模板使用了紫色作为背景色。首页使用了圆圆的月亮，和一只睡在月亮上的小白兔背景图片。左侧填写中秋佳节PPT标题。界面卡通可爱。 PowerPoint模板内容页，使用...
纯css实现一只敲可爱的兔子
我是一只蘑菇17的博客
12-08 702
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ backgroun...
案例9—css3实现卡通小白兔效果（附源码）
风中追风
03-10 477
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个css3实现一个卡通小白兔效果，赶紧学起来吧，跟着本专栏尝试用css3做一些有意思的动画效果，提高兴趣的同时学到一些css技巧。 今天给大家分享一个html+css卡通小白兔效果。 2.CSS编写 总结 以上就是今天要讲的内容啦，给大家分享了一个css3实现一个卡通小白兔效果，谢谢观看，如果觉得对您有帮助的话，可否给博主一
云间玉兔,自出机抒,从零开始制作Web插件网页特效小兔子组件(小挂件widget),基于原生CSS/NPM
刘悦的技术博客
01-12 897
著意登楼瞻玉兔，何人张幕遮银阙？又到了一年一度的网页小挂件环节，以往我们都是集成别人开源的组件，但所谓熟读唐诗三百首，不会做诗也会吟，熟读了别人的东西，做几首打油诗也是可以的，但若不能自出机抒，却也成不了大事，所以本次我们从零开始制作属于自己的网页小挂件，博君一晒。
CSS学习笔记之高级教程（一）
最新发布
wz_1992的博客
05-22 874
1、圆角：border-radius border-radius 属性可以接受一到四个值。规则如下： 四个值 - border-radius: 15px 50px 30px 5px;（依次分别用于：左上角、右上角、右下角、左下角） 三个值 - border-radius: 15px 50px 30px;（第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角） 两个值 - border-radius: 15px 50px;（第一个值用于左上角和右下角，第二个值用于右上角和左下角）
用c语言写一个冒泡排序算法
09-14
### 回答1： 我可以给你一个冒泡排序算法的示例代码： int n, a[100], i, j, temp; printf("Enter the number of elements: "); scanf("%d",&n); printf("Enter the elements: "); for(i=0;i<n;++i) scanf("%d",&a[i]); //sorting begins for(i=1;i<n;i++) { for(j=0;j<(n-i);++j) if(a[j]>a[j+1]) { temp=a[j]; a[j]=a[j+1]; a[j+1]=temp; } } printf("The list after sorting is: "); for(i=0;i<n;++i) printf("%d ",a[i]); 这是一个冒泡排序的算法，可以使用C语言来实现。 ### 回答2： 冒泡排序是一种简单的排序算法，它的基本思想是通过不断交换相邻的元素，将较大的元素逐渐“冒泡”到数列的末尾。以下是使用C语言实现冒泡排序算法的代码： ```c #include <stdio.h> void bubbleSort(int arr[], int n) { for (int i = 0; i < n-1; i++) { for (int j = 0; j < n-1-i; j++) { if (arr[j] > arr[j+1]) { // 交换相邻元素 int temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } } int main() { int arr[] = {5, 2, 8, 1, 3}; int n = sizeof(arr)/sizeof(arr[0]); printf("排序前的数组："); for (int i = 0; i < n; i++) { printf("%d ", arr[i]); } printf("\n"); bubbleSort(arr, n); printf("排序后的数组："); for (int i = 0; i < n; i++) { printf("%d ", arr[i]); } printf("\n"); return 0; } ``` 该代码首先定义了一个`bubbleSort`函数，该函数接受一个整数数组和数组的长度作为参数，然后通过两层嵌套循环实现冒泡排序。在排序过程中，如果相邻元素的顺序不正确，就交换它们的位置。 在`main`函数中，定义了一个整数数组`arr`，并计算了数组的长度。然后打印出排序前的数组，调用`bubbleSort`函数对数组进行排序，最后打印出排序后的数组。 以上的实现只是其中一种方式，冒泡排序还有其他的实现方式，可以根据具体需求进行调整和优化。 ### 回答3： 冒泡排序是一种简单的排序算法，也是最基础的算法之一。下面是用C语言实现冒泡排序算法的代码： ```c #include <stdio.h> void bubbleSort(int arr[], int n) { int i, j; for (i = 0; i < n-1; i++) { for (j = 0; j < n-i-1; j++) { if (arr[j] > arr[j+1]) { // 交换arr[j]和arr[j+1] int temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } } int main() { int arr[] = {64, 34, 25, 12, 22, 11, 90}; int n = sizeof(arr) / sizeof(arr[0]); bubbleSort(arr, n); printf("排序后的数组：\n"); for (int i=0; i < n; i++) { printf("%d ", arr[i]); } return 0; } ``` 上述代码中的`bubbleSort`函数实现了冒泡排序算法。首先，外层循环`i`用于控制比较的轮数，需要进行`n-1`轮比较。内层循环`j`用于比较相邻的两个数，如果前一个数大于后一个数，则交换它们的位置。通过这样的比较和交换，每一轮都能确保最大的数被移到最右侧。 在`main`函数中，首先声明一个整型数组`arr`，并初始化它。然后通过`sizeof`操作获取数组的长度，也就是元素个数，赋给变量`n`。之后，调用`bubbleSort`函数对数组进行排序。最后，通过循环遍历数组，依次打印出排序后的结果。 以上就是用C语言实现冒泡排序算法的代码和说明。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 87
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ThundersArk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值