倾情奉献，纯css（无图，无JS）原创中秋贺卡！！！

news2024/11/18 20:43:48

tutieshi_640x277_5s.gif

🪴 背景故事

中秋节马上就要到了，在这里我提前祝大家生活美满万年长，阖家幸福永平安！🥳
好了进入正题，最近掘金出了一个“中秋创意投稿”活动，我向来对这种可以写一些具有创意性的代码的活动很有兴趣，所以我必须参加，选题我选择做一个 beautiful 的中秋贺卡✊。

最终效果见文章顶部大图

ps：最终实现的效果经过了漫长的调整过程，尤其是调各种参数，一些中秋元素是参考了搜到的中秋相关图片，颜色也是吸的图片的颜色。所以，如果觉的最终效果还不错的，动动小手点个赞，你不会损失什么，我还能得到你的鼓励💞

涉及到的知识点

本文默认你已经掌握了css的基础知识，这里只是罗列一下用到的知识，具体使用方法可以自行查阅学习。

  • 动画：animation
  • 渐变函数：linear-gradient()、repeating-linear-gradient()、radial-gradient()
  • 不规则形状： border-radius设置8个值
  • css变量：var()
  • 自定义属性：@property
  • 混合模式：background-blend-mode、mix-blend-mode

🥷 实现过程

1. 整体分析

image.png

我要实现的目标分为六部分：

  1. 深蓝色的祥云背景；
  2. 黄色发光月亮，并且上面的文字要镂空漏出下面的祥云背景；
  3. 闪光的灯笼；
  4. 运动的祥云；
  5. 趴在月亮上的兔子；
  6. 在月亮上奔跑的兔子

其中的核心难点有以下几个 >>>

  1. 蓝色祥云背景的实现，全网目前应该是没有类似的实现，常见的css实现的纹理背景都是每个图案独立占一个区域，但是祥云不同，需要祥云直接互相“叠罗汉”；

  2. 黄色月亮上的镂空文字。如果文字镂空漏出的是黄色月亮，那非常容易实现，但是如果要漏出更下面一层的祥云背景，就需要多层图层混合，需要考虑清图层的层级关系以及应该使用的混合模式；

  3. 祥云的实现，目前网上也没有参考的案例，考虑了下决定用border-radius实现；

2. 祥云背景（难点二）

Alt

祥云背景参考了网上搜到的上图。观察后可以得出规律，是由“两个扇形的波纹图层错位叠加”形成的祥云效果。

什么是扇形的波纹？看下图，是实现过程中的截图。

Alt

实现原理分为以下几个步骤（当然，实现过程并不是按照这个顺序开发的，这里只是从结果倒推）：

先用radial-gradient()实现半圆波纹图层；
然后用linear-gradient()画两个三角形通过混合模式遮住半圆的两侧，形成扇形波纹；
最后再复制一层扇形波纹图层，背景位置 x,y 方向都错位移动50%即可达到最终效果。

image.png

详细的实现过程我重新整理了一篇文章，感兴趣的自行查阅。这里是文章链接：：🎨 纯css实现祥云纹理背景

3. 文字镂空的月亮（难点一）

文字镂空的发光月亮的实现是最核心也是最难的一个点。因为一般的文字镂空是显示出来下方图像，也就是月亮的黄色，但是我这里要“穿透”两层，显示最底层的蓝色祥云背景。

提到镂空，能联想到的方向有很多：

  • -webkit-text-stroke 、box-shadow文字描边实现镂空文字，但是这些方案只是把文字镂空了，但是无法“穿透”两层显示背景，淘汰；
  • mask-image需要用图片或者渐变函数形成的图像作为遮罩，因为我 主打的就是无图，所以这个方案pass；
  • -webkit-background-clip: text背景裁剪。以文字裁剪之后只会留下文字部分，月亮就没了，pass;
  • 最后就只有blend-mode混合模式了。显然它是最优也是唯一的解决方案，本身它就是解决多个图层层叠后的混合模式场景的👍

最终定下了解决方案： blend-mode混合模式

实现的大致过程如下：

实际实现过程并不像下面这么顺，只是实现之后重新捋出来一个比较顺的逻辑，提高实现此类效果的逻辑思维。

首先我们要思考最底层的祥云背景是深蓝色，属于深色系。而月亮黄色属于亮色系，在融合后要保留月亮，混合模式就得选用lighten变亮或者screen滤色。

那月亮是能保留了，文字怎么镂空呢？很简单，只要文字比背景的深蓝色深不就行了，我直接将文字设置为黑色。这时候得到的效果如下：

Alt

可以看到，效果大致实现了，但其实还差的很远。因为现在月亮整体也会有点透明的效果，能看到底部的祥云背景。

那怎么就能完全遮盖住祥云背景呢，根据screen滤色混合模式叠白得白得特点，可以将月亮设置为白色，就能完全遮盖背景了，如下：

Alt

但是这样又不对了，我们的月亮需要是黄色的呀。OK，有了，再在月亮上面叠加一个黄色背景不就行了。诶，不对，那不是又把文字盖住了🤔

再思考思考，上面盖一层黄色的图层，然后还要把下面的文字显示出来，黄色比目前的白色月亮暗，所以可以用darken变暗混合模式或者multiply正片叠底，然后再利用变暗叠白无效的原理，再在这一层相同位置覆盖”中秋“文字，并设置白色，既可完美实现效果，如下：

#moon_behind{
  background: #fff;
  mix-blend-mode: screen;
  ...
  h1{
    color: #000;
  }
}

#moon_yellow{
  background: linear-gradient(#FF0,#FC0);
  mix-blend-mode: multiply;
  ...
  h1{
    color: #fff;
  }
}

<div id="moon_behind"><h1>中秋</h1></div>
<div id="moon_yellow"><h1>中秋</h1></div>

Alt

4. 闪光灯笼

灯笼的实现就简单多了，一个div就可以搞定了。

灯笼的顶部方块用:before伪元素绘制；

灯笼的“架子”线条用repeating-linear-gradient绘制，灯笼的光源用radial-gradient绘制，这里要注意线条和光源的书写顺序，光源在前，架子在后，不然光源就会被架子遮挡；

灯笼底部的穗子在:after伪元素中用repeating-linear-gradient绘制。

到这里，一个静态的灯笼就绘制好了，要把它以不同大小显示在不同位置，可以利用css变量很方便的设置每个灯笼的大小和位置。

//灯笼主体
.lantern{
  --lanternLine: #d7061f; //灯笼架子颜色
  --lanternWidth: 7vw; //灯笼宽
  --lanternHeight: 12.5vw;  //灯笼高
  //架子和光源
  background: radial-gradient(circle at center,#febb75 0%, transparent var(--radius)),repeating-linear-gradient(to right, transparent 0%, transparent 15%, var(--lanternLine) 15%, var(--lanternLine) 25% );
  ...
}

//穗子
.lantern::after{
  content: '';
  width: 40%;
  height: 150px;
  background: repeating-linear-gradient(to right, var(--lanternLine) 0%, var(--lanternLine) 5%, transparent 5%, transparent 10% );
  ...
}



<!-- 灯笼 -->
<div class="lantern" style="--l: 15%;--t: 7%;--scale: .9"></div>

然后就是实现灯笼的闪光效果了，因为光源是用径向渐变实现的，所以只要修改径向渐变的半径即可。

但是浏览器是不支持渐变色的补间动画的，因为浏览器不知道颜色的变化过程。但是我们可以通过@property自定义属性来定义一个百分比值作为径向渐变的半径，浏览器肯定是可以计算数字的变化过程。这样修改这个自定义属性就能实现动画过程了。

.lantern{
  background: radial-gradient(circle at center,#febb75 0%, transparent var(--radius)),repeating-linear-gradient(to right, transparent 0%, transparent 15%, var(--lanternLine) 15%, var(--lanternLine) 25% );
  animation: lantern 1s linear infinite alternate;
}

@property --radius {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 35%;
}
@keyframes lantern {
  to{
    --radius: 50%;
  }
}

Alt

5. 运动的祥云（难点三）

祥云由很多曲线构成，思考片刻，决定用border实现。只要给border设置弧度，并且border-width有一定宽度，在boder缺口处就会形成线条逐渐变细的笔触，然后通过定位，将很多有缺口的圆拼接到一起，就形成了祥云。

如下是拆解的一部分：

div{
    width: 100px;
    height: 100px;
    border: 7px solid #fff;
    border-radius: 50% 50% 20% 50%;
    border-right: 0;
}

Alt

然后用多个上面的圈通过定位组合，就构成了祥云。

Alt

这里额外说明一下，为了使画面丰富，每个祥云我都设置了不同的颜色（五彩祥云）。但是现在所有的祥云都是在月亮上面飘过的，画面不是很和谐，既然月亮上的文字都镂空了，那如果云彩从月亮后飘过，并且路过文字镂空的区域时，那一定很有趣🤩

Alt

怎么让祥云从月亮背后飘过呢？那肯定是改z-index层级啊，只要让月亮层级比祥云高不就行了，但是你会发现，祥云路过月亮时不会从后面飘过，而是有个变色的效果，如下：

Alt

为什么呢？因为月亮设置了混合模式正片叠底，祥云路过时就会变暗。根据正片叠底叠白无效的特点，只要祥云是白色，在路过月亮时就会完全保留月亮的黄色，最终效果如下：

Alt

6. 趴在月亮上的兔子

兔子的实现就非常简单了。网上找一个卡通的兔子图片，然后将它构图拆解成很多椭圆的拼接，最后通过定位拼图即可。

Alt

7. 在月亮上奔跑的兔子

月亮左下角剩余空间比较小，所以我决定画一个小巧简单可爱的小兔子。既然都追求简单了，用一个div实现它。

创建一个div作为兔子身体。兔子身体是个不规则椭圆，所以用四个值的 border-radius 效果并不是很好，需要设置8个值，调整参数到合适的形状。

.rabbit{
  //兔子身体形状
  border-radius: 41% 59% 41% 41% / 54% 60% 40% 41%;
}

Alt

实现的时候先写出个大概的参数，然后在浏览器控制台微调参数即可。

兔子眼睛用radial-gradient实现，需要用at position语法把眼睛定位要合适的位置。

//眼睛
background-image: radial-gradient(circle at 80% 48%,#000 0%,#000 4%,transparent 4%);

兔子两个耳朵形状一样，所以用before伪元素实现一个耳朵，另一个耳朵用box-shadow复制一个即可，注意模糊距离设置为0。

兔子的jue和尾巴都是圆的，同样用after伪元素实现一个jue，另一个jue和尾巴都用box-shadow复制。

好了，一个div就实现了下面的兔子😄：
Alt

为了给兔子增加点活力，可以加个奔跑动画。实现起来不复杂，但是也需要不断调整参数使动画流畅。为了节省时间，我在网上搜到了一个兔子奔跑的动画，直接参考它的效果简单实现了下。

Alt

🍎 成果体验

jcode

🎁 说在最后

深蓝色祥云背景的实现，我单独写了一篇文章，感兴趣的可以看看传送门

我是归纳总结前端相关知识的前端阿彬，个人创作不易，您的点赞·关注·评论·转发 是我坚持下去的动力😘

请添加图片描述

往期文章：
# 🥳🥳🥳 “钉钉官网首页的炫酷动效” 被我用css新特性轻松破解啦～
# 🐿 CSS魔术师Houdini，用浏览器引擎实现高级CSS效果
# ⛳前端进阶：SEO 全方位解决方案
# 我给自己搭建的前端导航网站，你们都别用🤪
# 2023 最新最细 vite+vue3+ts 多页面项目架构，建议收藏备用！
# 2023 前端性能优化清单

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1019856.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

问题记录：两台Ubuntu之间传输文件（SCP）

问题记录：两台Ubuntu之间传输文件（SCP）

1.查看IP地址 首先查看目标设备的 IP 地址&#xff1a;要把文件传到哪台机器上&#xff0c;就看哪台机器的 IP 地址&#xff0c;有两种方法 1.在终端输入 ifconfig: 2.设置里面看 2. 在自己的PC端 ping 一下目标机器的 IP 地址&#xff0c;看是否可以连接 ping 172.17.160…
阅读更多...
使用ROS与Movelt实现myCobot 280运动轨迹规划和控制

使用ROS与Movelt实现myCobot 280运动轨迹规划和控制

ROS的技术案例 Introduction 今天这篇文章将记录我使用myCobot 280 M5stack 在ROS当中是如何使用的。为什么使用ROS呢&#xff0c;因为提及到机器人都离不开ROS这个操作系统&#xff0c;今天是我们第一次使用ROS这个系统。 今天我将从ROS的介绍&#xff0c;环境的配置以及mycob…
阅读更多...
DPU加速AI应用“遍地开花”，中科驭数亮相2023全球AI芯片峰会

DPU加速AI应用“遍地开花”，中科驭数亮相2023全球AI芯片峰会

9月15日&#xff0c;2023全球AI芯片峰会&#xff08;GACS 2023&#xff09;在深圳举行&#xff0c;聚集了全球AI芯片产业的领军者和中坚力量&#xff0c;共探AI芯片的求新、求变、求索之径。中科驭数高级副总裁张宇应邀在智算中心算力与网络高峰论坛发表题为《基于DPU的高效AI大…
阅读更多...
《2023年中国数字孪生行业报告》丨附下载_三叠云

《2023年中国数字孪生行业报告》丨附下载_三叠云

✦ ✦✦ ✦✦ ✦✦ ✦ 随着近年来人工智能、物联网、虚拟现实等技术的持续发展以及元宇宙概念的兴起&#xff0c;数字孪生概念进一步完善&#xff0c;适用范围不断拓宽。然而非业界人士对数字孪生概念仍缺乏统一认知。对此&#xff0c;本报告介绍数字孪生概念、行业情况、市场…
阅读更多...
java开发之个微机器人的开发

java开发之个微机器人的开发

简要描述&#xff1a; 根据消息回调收到的xml转发文件消息&#xff0c;适用于同内容大批量发送 请求URL&#xff1a; http://域名地址/sendRecvFile 请求方式&#xff1a; POST 请求头Headers&#xff1a; Content-Type&#xff1a;application/jsonAuthorization&#…
阅读更多...
uniapp 使用subNVue原生子窗体显示弹框或悬浮框

uniapp 使用subNVue原生子窗体显示弹框或悬浮框

效果展示 在uniapp中&#xff0c;我们可以使用subNVue原生子窗体来解决web-view等原生页面中弹框无法显示的问题。 subNVue原生子窗体是uniapp提供的一种原生组件&#xff0c;可以在uniapp中嵌入原生页面&#xff0c;并且可以与uniapp页面进行通信。我们可以在原生页面中使用…
阅读更多...
web浏览器公网远程访问jupyter notebook【内网穿透】

web浏览器公网远程访问jupyter notebook【内网穿透】

文章目录 前言1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 前言 Jupyter Notebook&#xff0c;它是一个交互式的数据科学和计算环境&#xff0c;支持多种编程语言&#xff0c;如…
阅读更多...
leetcode 102.二叉树的层序遍历

leetcode 102.二叉树的层序遍历

⭐️ 二叉树的层序遍历I 题目描述 &#x1f31f; leetcode链接&#xff1a;二叉树的层序遍历I 思路&#xff1a; 使用一个辅助队列来层序遍历二叉树&#xff0c;不同的是需要使用一个二维数组来存放每个节点&#xff0c;而每一层的所有节点又需要是一个一维数组。 而最重要的问…
阅读更多...
DNS解析流程

DNS解析流程

DNS 层次结构如下&#xff1a; 根 DNS 服务器 &#xff1a;返回顶级域 DNS 服务器的 IP 地址顶级域 DNS 服务器&#xff1a;返回权威 DNS 服务器的 IP 地址权威 DNS 服务器 &#xff1a;返回相应主机的 IP 地址 为了提高 DNS 的解析性能&#xff0c;很多网络都会就近部署 DNS …
阅读更多...
如何在idea中新建第一个java小程序

如何在idea中新建第一个java小程序

如何在idea中新建第一个java小程序 1.打开软件2.新建项目3.找到安装的jdk文件路径4.继续下一步5.创建项目名称并配置项目路径6.点击完成即可。7.在项目文件的src文件夹下创建java类&#xff0c;程序等7.1其他java项目或文件不能运行的原因&#xff1a; 8.新建类并运行程序9.输入…
阅读更多...
构建本地Web小游戏网站：Ubuntu下的快速部署与公网用户远程访问

构建本地Web小游戏网站：Ubuntu下的快速部署与公网用户远程访问

文章目录 前言1. 本地环境服务搭建2. 局域网测试访问3. 内网穿透3.1 ubuntu本地安装cpolar内网穿透3.2 创建隧道3.3 测试公网访问 4. 配置固定二级子域名4.1 保留一个二级子域名4.2 配置二级子域名4.3 测试访问公网固定二级子域名 前言 网&#xff1a;我们通常说的是互联网&am…
阅读更多...
数据库 MVCC 详解

数据库 MVCC 详解

目录 1. 什么是 MVCC&#xff1f; 2. MVCC 的好处&#xff1f; 3. 快照读&#xff1f;当前读分别是什么&#xff1f;怎么理解&#xff1f; 3.1 快照读 3.2 当前读 4. 数据库的四种隔离级别 5. MVCC 实现原理 5.1 隐藏字段 5.2 undo log(版本链) 5.3 readView 6. re…
阅读更多...
1218. 最长定差子序列

1218. 最长定差子序列

1218. 最长定差子序列 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a; 原题链接&#xff1a; 1218. 最长定差子序列 https://leetcode.cn/problems/longest-arithmetic-subsequence-of-given-difference/description/ 完成情况&#x…
阅读更多...
低代码平台的坑有哪些？

低代码平台的坑有哪些？

大部分人/企业在选型的时候只会过分关注低代码平台所提供的功能&#xff0c;却忘记了“服务”同样重要。事实上&#xff0c;低代码的功能各家大差不差&#xff0c;基本都差不多。早前&#xff0c;我曾写过【低代码选型的注意事项】一文&#xff0c;今日不妨再说一嘴。 在研究低…
阅读更多...
如何完美通过token获取用户信息（springboot）

如何完美通过token获取用户信息（springboot）

1. 什么是Token&#xff1f; 身份验证令牌&#xff08;Authentication Token&#xff09;&#xff1a;在身份验证过程中&#xff0c;“token” 可以表示一个包含用户身份信息的令牌。 例如 Token&#xff08;JWT&#xff09;是一种常见的身份验证令牌&#xff0c;它包含用户的…
阅读更多...
APP广告竞价机制：头部竞价与瀑布流

APP广告竞价机制：头部竞价与瀑布流

广告引擎竞价原理实际上就是平台如何从利用用户和广告主在平台的产生的活跃度时长&#xff0c;从两者本身产生价值中&#xff0c;赚取利润的原理。即平台在给广告主分发流量的过程中&#xff0c;引入付费广告概念&#xff0c;加速广告内容的曝光。 头部竞价与瀑布流 在瀑布流…
阅读更多...
【ELK】日志分析系统概述及部署（ELFK部署实验）

【ELK】日志分析系统概述及部署（ELFK部署实验）

目录 一、ELK概述 1、ELK是什么&#xff1f; 2、ELK的组成部分 2.1 ElasticSearch &#xff08;1&#xff09;分片和副本 &#xff08;2&#xff09;es和传统数据库的区别 2.2 Kiabana 2.3 Logstash &#xff08;1&#xff09;Log Stash主要组件 2.4 可添加的其它组件…
阅读更多...
腾讯数据持久化方案MMKV原理分析

腾讯数据持久化方案MMKV原理分析

提到数据持久化存储的方案&#xff0c;Android提供的手段有很多&#xff0c;在项目中常用的就是SharedPreference(简称SP)&#xff0c;但是SP使用虽然简单&#xff0c;但是存在缺陷&#xff1a; 写入速度慢&#xff0c;尤其在主线程频繁执行写入操作易导致卡顿或者ANR&#xf…
阅读更多...
Python 基于PyCharm断点调试

Python 基于PyCharm断点调试

视频版教程 Python3零基础7天入门实战视频教程 PyCharm Debug&#xff08;断点调试&#xff09;可以帮助开发者在代码运行时进行实时的调试和错误排查&#xff0c;提高代码开发效率和代码质量。 准备一段代码 def add(num1, num2):return num1 num2if __name__ __main__:f…
阅读更多...
剧情反转 抵制AI音乐的华纳签了位虚拟歌手

剧情反转 抵制AI音乐的华纳签了位虚拟歌手

从文字、图片、视频到语音、音乐&#xff0c;AIGC已经渗入到人类的视听体验中&#xff0c;即便曾经因为版权问题极力抵制AI音乐的巨头&#xff0c;也不得不转变态度顺应时代产物。 今年9月&#xff0c;华纳音乐签约了首个虚拟歌手Noonoouri&#xff1b;8月&#xff0c;环球音乐…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023