【每日一练】78—CSS实现发光的渐变圆形文本动画效果
web前端开发
共 3302字,需浏览 7分钟
· 2022-10-15
写在前面
我们今天练习这个小项目,跟之前的圆形时钟的效果类似,我们可以先一起来看一下它的最终效果:
<html>
<head>
<meta charset="utf-8">
<title>【每日一练】78—CSS实现发光的渐变圆形文本动画效果</title>
</head>
<body>
<div class="circle">
<ul>
<li style="--i:-4;"><span>♣</span></li>
<li style="--i:-3;"><span>O</span></li>
<li style="--i:-2;"><span>n</span></li>
<li style="--i:-1;"><span>l</span></li>
<li style="--i:0;"><span>i</span></li>
<li style="--i:1;"><span>n</span></li>
<li style="--i:2;"><span>e</span></li>
<li style="--i:3;"><span>☼</span></li>
<li style="--i:4;"><span>s</span></li>
<li style="--i:5;"><span>l</span></li>
<li style="--i:6;"><span>a</span></li>
<li style="--i:7;"><span>i</span></li>
<li style="--i:8;"><span>r</span></li>
<li style="--i:9;"><span>o</span></li>
<li style="--i:10;"><span>t</span></li>
<li style="--i:11;"><span>u</span></li>
<li style="--i:12;"><span>T</span></li>
</ul>
</div>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
body
{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #222;
}
.circle
{
position: relative;
width: 500px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: rgba(255,255,255,0.05);
box-shadow: 0 0 0 2px #fff5,
0 0 0 20px #333,
0 0 0 22px #fff,
0 0 50px #fff,
0 0 450px #fff;
}
.circle::before
{
content: '';
position: absolute;
width: 2px;
height: 170px;
border-radius: 2px;
background: linear-gradient(0deg,transparent,#fff);
transform-origin: bottom;
animation: animateNiddles 20s steps(59) infinite;
}
.circle::after
{
content: '';
position: absolute;
width: 4px;
border-radius: 2px;
height: 130px;
background: linear-gradient(0deg,transparent,#fff);
transform-origin: bottom;
animation: animateNiddles 120s linear infinite;
}
@keyframes animateNiddles
{
0%
{
transform: translate(-50%,-50%) rotate(0deg);
}
100%
{
transform: translate(-50%,-50%) rotate(360deg);
}
}
ul li
{
list-style: none;
position: absolute;
top: 10px;
transform-origin: 0 240px;
transform: rotate(calc(21deg * var(--i)));
font-size: 2.5em;
font-weight: bold;
text-transform: uppercase;
}
ul li span
{
display: inline-block;
transform: rotate(calc(-21deg * var(--i)));
color: #fff;
text-shadow: 0 0 15px #fff,
0 0 35px #fff,
0 0 75px #fff,
0 0 150px #fff;
}
body::before
{
content: '';
position: absolute;
inset: 0;
background: linear-gradient(#08ff12, #0791ff);
z-index: 10;
mix-blend-mode: multiply;
pointer-events: none;
}
写在最后
以上就是我们今天的【每日一练】的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号
评论
React Playground 实现原理揭秘
大家应该都用过在线写代码的工具,比如 vue 的 playground:左边写代码,右边实时预览。右边还可以看到编译后的代码:这是一个纯前端项目。类似的,也有 React Playground。那它是怎么实现的呢?我们自己能实现一个么?可以的,今天我们来分析下实现思路。首先是编译:编译用的
全栈前端精选
0
在GPU上加速RWKV6模型的Linear Attention计算
精简版:经过一些profile发现flash-linear-attention中的rwkv6 linear attention算子的表现比RWKV-CUDA中的实现性能还要更好,然后也看到了继续优化triton版本kernel的线索。接着还分析了一下rwkv6 cuda kernel的几次开发迭代以
GiantPandaCV
0
早上面试了一个应届生,本来觉得能力很好,快结束时问了一句:现在的工作是不是理想工作?结果他说上班就是为了挣钱,他的理想就是不上班
某老板发帖吐槽:早上面试了一个应届生,本来觉得能力很好准备收了。最后快结束的时候随口问了一句:现在的工作是不是他理想的工作?结果他的回答是:”我上班就是为了挣钱。不想谈理想,我的理想就是不上班!“这样的人还敢不敢收?有人直言:没懂,他说的哪点不对?确实很真实,谁上班不是为了挣钱呢?谁的理想又是上班呢
TTTEED
0
刚刚!ChatGPT绘图:新增一个令人惊喜的功能!
你好,我是郭震ChatGPT绘图刚刚增加一个新功能,支持在生成图中进行再编辑,这篇文章我来详细总结下这个功能。1 初步使用按照正常提问,绘制小猫和草坪。过一会,它会生成这样一幅图片:接下来,点击这张图片,会弹出这个窗口,右上角有三个按钮,第一个按钮是select,也就是选择图片中的某个区域,支持选择
Python与算法社区
0
今天我去美国学校餐厅吃的午饭,看看我吃了啥
你好,我是郭震最近分享了几篇AI技术相关的文章,还没看过的可查看哦:一文总结:AI大模型之LangChain基础用法教程来了!3分钟教你搭建:AI大模型前端界面一文总结Python绘制的10种热力图太赞了!我无意间发现的一本AI大模型PDF,免费下载!打造本地ChatGPT,部署LlaMA3最简单的
Python与算法社区
1
三个优秀的PyTorch实现语义分割框架
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达转自 | 机器学习AI算法工程使用的VOC数据集链接开放在文章中,预训练模型已上传Github,环境我使用Colab pro,大家下载模型做预测即可。代码链接: https://github.com/lixiang007
小白学视觉
0
如何看待稚晖君的时间管理水平?
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达计算机视觉life整理原文链接:https://www.zhihu.com/question/491456524/answer/2183081310稚晖君究竟是如何安排业余时间去做这么多高水平的项目?而且每个项目的用时也很少,普通
小白学视觉
2
如何画出漂亮的神经网络图?神经网络可视化工具集锦搜集
点击上方“小白学视觉”,选择加"星标"或“置顶”重磅干货,第一时间送达1. draw_convnet一个用于画卷积神经网络的Python脚本https://github.com/gwding/draw_convnet2. NNSVGhttp://alexlenail.me/NN-SVG/LeNet.
小白学视觉
0