[100天挑战100个前端效果]第十四天---旋转的炫彩小球(制作彩色计时器0.0)

最新推荐文章于 2022-08-03 20:32:59 发布

钧桐

最新推荐文章于 2022-08-03 20:32:59 发布

阅读量148

点赞数

分类专栏： 100天挑战100个前端效果文章标签： html css3

本文链接：https://blog.csdn.net/qq_42136832/article/details/115453540

版权

100天挑战100个前端效果专栏收录该内容

25 篇文章 8 订阅

订阅专栏

本文展示了如何使用HTML和CSS创建一个旋转的炫彩小球效果。通过设置渐变背景、内圆环和不同模糊度的span元素，结合关键帧动画实现动态旋转，营造出魔幻视觉体验。此效果主要运用了前端基础知识，如CSS渐变、动画和滤镜等。

摘要由CSDN通过智能技术生成

让我们先来看看实现的效果吧

在这里插入图片描述

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" href="style.css">
</head>
<body>
    <div class="loader">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>
</html>

css代码

:root{
    --background-color:#2c3e50;
    --border-color:#7591ad;
    --text-color:#34495e;
    --color1:#14ffe9;
    --color2:#ffeb3b;
    --color3:#ff00c0;
}
*{
    margin:0;
    padding:0;
}
html{
    font-size:14px;
}
body{
    width: 100vw;
    height: 100vh;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Montserrat',sans-serif,Arial,'Microsoft Yahei';
}
.loader{
    position: relative;
    width: 100px;
    height: 100px;
    background-image: linear-gradient(var(--color1),var(--color2),var(--color3));
    border-radius: 100%;
    animation: animate .5s linear infinite;
}
.loader::after{
    position: absolute;
    content: "";
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background-color: var(--background-color);
    border-radius: 100%;
}
.loader span{
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: linear-gradient(var(--color1),var(--color2),var(--color3));
    border-radius: 100%;
    filter: blur(10px);
}
.loader span:nth-child(1){
    filter: blur(5px);
}
.loader span:nth-child(2){
    filter: blur(10px);
}
.loader span:nth-child(3){
    filter: blur(20px);
}
.loader span:nth-child(4){
    filter: blur(25px);
}
@keyframes animate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

知识汇总和思路分析

这次的设计几乎没有用到新的知识，都是前面十三天学到过的东西，我们说以下设计思路
1.loader做一个渐变色的圆
2.loader::after做一个内圆，这样就变成了一个圆环了
3.利用span加不同的高斯模糊，让圆变成魔幻
4.animate动画，让圆转起来就行了，渐变色的旋转还是挺漂亮的！

钧桐

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[100天挑战100个前端效果]第十四天---旋转的炫彩小球(制作彩色计时器0.0)

旋转的炫彩小球让我们先来看看实现的效果吧html代码css代码知识汇总和思路分析让我们先来看看实现的效果吧html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
复制链接

扫一扫

专栏目录