星星粒子原生

在这里插入图片描述
使用技术:HTML、CSS
使用字体:iconfont
思路:

  1. 我们是要把星星围成一个圈儿然后每个星星都有次序按照不同的速度进行旋转放大然后缩小,整体上还会有不同的颜色定期改变
  2. 首先找到五角星的字体⭐️(我这里面用的是iconfont找的实心图标五角星,参考视频里面使用的font-awesome
  3. 接下来我们先要把星星围成一圈,先flex布局成一横排
  4. 然后利用transform的translateX在横轴上先左平移150px后用transform的rotate旋转30deg(这里的30deg是个基数需要乘以当前星星的序号这里用的是css变量声明的)
  5. 围一圈之后是不是发现星星咋还是黑的啊,那就先给星星上个色
  6. 下一步就是旋转放大,旋转放大的实现是利用transform的rotate和scale实现,旋转放大总要有个过程所以使用到animation,不同速度可以利用动画的间隔时长 animation-delaycalc(css变量 * 0.2s)
  7. 旋转放大OK了但是发现星星的光晕还没有这个可以通过filter滤镜的box-shadow盒子阴影来实现
  8. 虽然放大了但没有来源没有那种虹吸的感觉,这需要在::before的时候设置好
  9. 好多了但是彗星扫尾的时候后面是不是还有很多小星星这个需要小星星周围小星星的显示、消失、放大缩小、光晕,围绕某个进行旋转还需要过程::before的时候添加动画 周围小星星的显示消失通过opacity透明度控制 ,放大缩小通过scale控制光晕依旧使用filter滤镜的box-shadow盒子阴影来实现,速度上要对应上本身小星星的间隔所以还是使用动画的间隔时长 animation-delaycalc(css变量 * 0.2s)
  10. 整体看上去ok了但是还有一个是整体的定期改变颜色,定期了那就是动画animation,不同颜色是通过filterhue-rotate(在色环上应用色的旋转)实现(gif不会截所以没配图,会的评论一下谢谢)

图片阶段性

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码

html部分
<!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>星星粒子</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="loader">
        <span style="--i:1;"><i class="iconfont iconstar"></i></span>
        <span style="--i:2;"><i class="iconfont iconstar"></i></span>
        <span style="--i:3;"><i class="iconfont iconstar"></i></span>
        <span style="--i:4;"><i class="iconfont iconstar"></i></span>
        <span style="--i:5;"><i class="iconfont iconstar"></i></span>
        <span style="--i:6;"><i class="iconfont iconstar"></i></span>
        <span style="--i:7;"><i class="iconfont iconstar"></i></span>
        <span style="--i:8;"><i class="iconfont iconstar"></i></span>
        <span style="--i:9;"><i class="iconfont iconstar"></i></span>
        <span style="--i:10;"><i class="iconfont iconstar"></i></span>
        <span style="--i:11;"><i class="iconfont iconstar"></i></span>
        <span style="--i:12;"><i class="iconfont iconstar"></i></span>
    </div>
</body>
</html>
css部分
@font-face {
    font-family: "iconfont";
    src: url('https://at.alicdn.com/t/c/font_1734055_fw3mipj4hx.woff2?t=1702628454479') format('woff2'),
        url('https://at.alicdn.com/t/c/font_1734055_fw3mipj4hx.woff?t=1702628454479') format('woff'),
        url('https://at.alicdn.com/t/c/font_1734055_fw3mipj4hx.ttf?t=1702628454479') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.iconstar:before {
    content: "\e61b";
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #131a1c;
}

.loader {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: animate-color 7.2s linear infinite;
}

@keyframes animate-color {
    0% {
        filter: hue-rotate(0deg);
    }
    50% {
        filter: hue-rotate(180deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

.loader span {
    position: absolute;
    transform-origin: 150px;
    transform: translateX(-150px) rotate(calc(var(--i) * 30deg));
    filter:
        drop-shadow(0 0 5px #3cc2ff) drop-shadow(0 0 15px #3cc2ff) drop-shadow(0 0 30px #3cc2ff);
}

.loader span i {
    display: inline-block;
    position: relative;
    color: #3cc2ff;
    animation: rotate-stars 2.4s linear infinite;
    animation-delay: calc(var(--i) * -0.2s);
}

@keyframes rotate-stars {
    0% {
        transform: rotate(0deg) scale(0);
    }

    50% {
        transform: rotate(180deg) scale(3);
    }

    100% {
        transform: rotate(360deg) scale(0);
    }
}

.loader span::before {
    content: '\e61b';
    position: relative;
    font-family: "iconfont";
    font-size: 0.75em;
    color: #131a1c;
    animation: rotate-particle 2.4s linear infinite;
    animation-delay: calc(var(--i) * -0.2s);
}

@keyframes rotate-particle {
    0% {
        scale: 1;
        opacity: 0;
        rotate: 0deg;
    }

    50% {
        scale: 1;
        opacity: 1;
        rotate: 180deg;
    }

    100% {
        scale: 0;
        opacity: 0;
        rotate: 360deg;
        filter:
            drop-shadow(-150px 0 #3cc2ff) drop-shadow(150px 0 #3cc2ff) drop-shadow(0 150px #3cc2ff) drop-shadow(0 -150px #3cc2ff);
    }
}

一个小解释:

i标签转换为inline-block是因为transform对行内元素无效,可以使用变换(transform)的元素必须是块级元素或者原子内联级元素,单纯的内联元素是不能应用变换的。

参考及资料:

  1. BILIBILI视频: 使用HTML和CSS创建星星粒子动画效果
  2. iconfont阿里巴巴矢量图标库
  3. CSS中filter属性
  4. animation的MDN

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

透明之光:探讨可解释性人工智能的前沿

导言 随着人工智能技术的飞速发展&#xff0c;可解释性人工智能&#xff08;Explainable AI, XAI&#xff09;成为关注焦点。本文将深入研究可解释性人工智能的背景、技术原理以及在不同领域的应用。 1. 背景与挑战 在许多领域&#xff0c;人工智能模型的黑盒性引发了关于决策…

详解wmvcore.dll丢失的解决方法

wmvcore.dll是一款由Microsoft开发的Windows系统文件&#xff0c;主要用于存储和处理多媒体文件&#xff0c;尤其是Windows媒体视频。该文件对于音频和视频的播放至关重要。如果电脑上缺少这个文件&#xff0c;可能会出现播放问题或者相关的应用程序运行错误。在本文中&#xf…

大四复习:深入浅出解释拓扑排序

我在大二学习拓扑排序的时候&#xff0c;不是很明白&#xff0c;现在已经大四&#xff0c;抽时间复习一下拓扑排序。 什么是拓扑排序&#xff1f; 如何实现拓扑排序&#xff1f; 拓扑排序的拓展 什么是拓扑排序&#xff1f; 首先拓扑排序的定义如下&#xff1a; 拓扑排序是一…

MybatisPlus【进阶】--悲观锁,乐观锁,生成后台数据:javafaker

什么是悲观锁 悲观锁&#xff1a;十分悲观&#xff0c;认为总是出现问题&#xff0c;无论干什么都会上锁&#xff0c;再去操作 悲观锁是基于一种悲观的态度类来防止一切数据冲突&#xff0c;它是以一种预防的姿态在修改数据之前把数据锁住&#xff0c;然后再对数据进行读写&…

如何在jenkins容器中安装python+httprunner+pytest+git+allure(一)

背景&#xff1a; API接口自动化使用python语言实现&#xff0c;利用httprunner框架编写自动化用例场景&#xff08;执行的时候还是依赖pytest),使用jenkins自动构建git上的源代码&#xff0c;并产生allure报告可视化展示API执行结果。 步骤 1.进入jenkins容器 注意使用roo…

文心一言 VS 讯飞星火 VS chatgpt (159)-- 算法导论12.3 6题

六、用go语言&#xff0c;当 TREE-DELETE 中的结点 z 有两个孩子时&#xff0c;应该选择结点 y 作为它的前驱&#xff0c;而不是作为它的后继。如果这样做&#xff0c;对 TREE-DELETE 应该做些什么必要的修改?一些人提出了一个公平策略&#xff0c;为前驱和后继赋予相等的优先…

使用 React 实现自定义数据展示日历组件

目录 背景实现日历组件父组件数据 效果最后 背景 项目中需要实现一个日历组件&#xff0c;并且需要展示月&#xff0c;日所对应的数据&#xff08;因为项目需求问题&#xff0c;就不统计年数据总量&#xff09;。网上找了一堆&#xff0c;基本都不大符合项目需求&#xff0c;且…

完全二叉数的全值

分析&#xff1a;我们主要是对数组分割&#xff0c;将每一类累加起来&#xff0c;按顺序存储在另一个数组里面&#xff0c;在对那一个数组进行是筛选&#xff0c;选出最大的那一个下标&#xff0c;在的打印那一个下标。 #include <stdio.h> int main(){int m,n,j,i,t1,s…

IO接口 IPC两个文件对话

实现AB进程对话。 1. A进程发送一-句话后&#xff0c; B进程接收到打印。然后B进程发送一句话&#xff0c;A进程接收后打印 2.重复上述步骤。直到AB接收或者发送完quit后&#xff0c; 结束AB进程 A文件 #include <func.h> #include <stdio.h> #include <errno…

面试必考精华版Leetcode1137. 第 N 个泰波那契数

题目&#xff1a; 代码&#xff08;首刷看解析&#xff09;&#xff1a; class Solution { public:int tribonacci(int n) {// 1.初始化if(n0) return 0;else if(n1) return 1;else if(n2) return 1;int p0,q1,r1;int s0;// 2.遍历方向 左 → 右for(int i 3; i < n ; i)…

openwrt docker nginx 站点搭建

应为家里一直是 openwrt 软路由&#xff0c;这样以来也不用 重新买服务器了&#xff0c;就直接在 openwrt 上面跑个 nginx就行了。把自己的一些东西就可以放上面了。资源再利用哈哈&#xff1b; 先 ssh 连接上 openwrt &#xff1a;我这里的 openwrt 最近刚更新的固件&#xff…

金蝶云星空修改业务对象标识

文章目录 金蝶云星空修改业务对象标识说明解决方案具体操作实操 金蝶云星空修改业务对象标识 说明 一个业务对象的产生&#xff0c;涉及10个表起。 解决方案 还是手工删除重新创建保险。 具体操作 先备份需要删除的元数据&#xff0c;或者扩展&#xff0c;然后重新创建或…

Python给exe添加以管理员运行的属性

需求 有些应用每次启动都需要用管理员权限运行&#xff0c;比如Python注入dll时&#xff0c;编辑器或cmd就需要以管理员权限运行&#xff0c;不然注入就会失败。 这篇文章用编程怎么修改配置实现打开某个软件都是使用管理员运行&#xff0c;就不用每次都右键点击以管理员身份…

Unity SRP 管线【第四讲:URP 阴影】

URP 全文源码解析参照 引入 在UniversalRenderer.cs/ line 505行处 此处已经准备好了所有渲染数据&#xff08;所有数据全部存储在了renderingData中&#xff09; 我们只用renderingData中的数据初设置mainLightShadows bool mainLightShadows m_MainLightShadowCasterPass…

德人合科技 | 防止公司电脑文件数据资料外泄,自动智能透明加密保护系统

【透明加密软件】——防止公司电脑文件数据资料防止外泄&#xff0c;自动智能透明加密保护内部核心文件、文档、图纸、源代码、音视频等资料&#xff01; PC端访问地址&#xff1a; www.drhchina.com &#x1f31f; 核心功能&#xff1a; 透明加密&#xff1a;采用高级加密算…

VR虚拟动漫角色智能化导览丰富体验乐趣

AI数字人助理可以为我们带来哪些帮助? 随着人工智能技术的不断发展&#xff0c;AI数字人助理已经成为了我们日常生活和工作中的得力助手。它们具备智能感知、语音识别、自然语言处理等多种技能&#xff0c;可以为我们带来很多帮助和便利。 一、提高工作效率 AI数字人助理可以帮…

SCC-Tarjan,缩点问题

文章目录 前言引例什么是缩点&#xff1f;缩点的应用一、合并强连通子图为强连通图题目描述输入/输出格式原题链接题目详解 二、集合间偏序关系题目描述输入/输出格式原题链接题目详解 三、最大点权和路径题目描述输入/输出格式原题链接题目详解 其他OJ练习 前言 图论中的缩点问…

【MySQL·8.0·源码】MySQL 语法树基础知识

基础 我们都知道 SQL 语句经过词法分析器时&#xff0c;识别扫描输入的 SQL 语句&#xff0c;将关键词、标识符、常量等分解转换成独立的 tokens&#xff0c;进一步在语法分析阶段根据语法规则检查 tokens 序列的结构并不断 shift 、reduce 构建成 SQL 语法解析树。 在 MySQL…

ubuntu18.04 64 位安装笔记——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

进入VirtuakBox官网&#xff0c;网址链接&#xff1a;Oracle VM VirtualBoxhttps://www.virtualbox.org/ 网页连接&#xff1a;Ubuntu Virtual Machine Images for VirtualBox and VMwarehttps://www.osboxes.org/ubuntu/ 将下发的ds_db01.sql数据库文件放置mysql中 12、编写S…

19 高速列车场景下3Gpp 5G NR的DMRS设计与评估

文章目录 解决问题设计DMRS仿真参数仿真结果 解决问题 多普勒/扩展影响十分显著&#xff0c;设计用于信道估计时&#xff0c;需要考虑解调参考信号&#xff0c;5G用DMRS结构而不是CRS结构&#xff0c;因此需要为高速UE设计DMRS结构&#xff0c;DMRS设计是为了提高信道估计并减…