文章/答案/技术大牛

发布

css星星动画

CSS星星动画基础概念

CSS星星动画是一种使用CSS（层叠样式表）创建的视觉效果，通常用于网页设计中的背景装饰或加载动画。这种动画通过CSS的动画属性（如@keyframes）来实现星星的闪烁效果。

类型

闪烁星星：星星在屏幕上随机闪烁。
流星效果：星星从屏幕一侧移动到另一侧，模拟流星划过的效果。
旋转星星：星星围绕中心点旋转。

应用场景

网页背景：为网页添加动态背景，提升用户体验。
加载动画：在页面加载时显示星星动画，提供视觉反馈。
节日装饰：在特定节日（如圣诞节）使用星星动画作为装饰。

示例代码

以下是一个简单的CSS星星闪烁动画的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Star Animation</title>
    <style>
        .star {
            position: absolute;
            width: 2px;
            height: 2px;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 2s infinite ease-in-out;
        }

        @keyframes twinkle {
            0%, 100% {
                opacity: 0.5;
                transform: scale(1);
            }
            50% {
                opacity: 1;
                transform: scale(1.2);
            }
        }

        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="star" style="left: 10%; top: 20%;"></div>
    <div class="star" style="left: 30%; top: 50%;"></div>
    <div class="star" style="left: 60%; top: 80%;"></div>
    <div class="star" style="left: 80%; top: 40%;"></div>
</body>
</html>

参考链接

CSS动画教程

常见问题及解决方法

星星闪烁不均匀：
- 原因：可能是@keyframes中的动画时间设置不均匀。
- 解决方法：调整@keyframes中的时间点，确保动画的各个阶段时间分配均匀。

星星位置固定：
- 原因：星星的位置是通过内联样式设置的，每次刷新页面位置不变。
- 解决方法：使用JavaScript动态生成星星的位置，或者使用CSS的position: absolute结合随机数生成位置。
动画性能问题：
- 原因：大量的星星动画可能导致页面性能下降。
- 解决方法：减少星星的数量，或者使用CSS的will-change属性优化动画性能。

通过以上方法，可以有效地创建和优化CSS星星动画，提升网页的视觉效果和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

复制此javascript动画效果

javascript、html

我尝试了各种方法，试图制作网站上提到的动画的副本：我注意到源代码中的第103行是它开始动画效果的地方： <div我尝试复制-粘贴源代码，然后将所有的图像/css/js放在与网站相同的结构中，但这不起作用。动画中的图像仍然是从在线网站调用的。检查了js文件中的每一行代码，但我仍然无法理解。

浏览 2提问于2013-07-26得票数 0

2回答

我能给一个用javascript绘制在画布上的路径类吗？

javascript、canvas、html5-canvas

我正在使用beginPath()方法在画布上随机绘制小星星，如下所示： for(let i=0; i<100; i++){谢谢!看起来CSS并不是最好的选择。我想我会尝试用javaScript在一个setInterval循环中动画我的明星。这是我工作的代码。

浏览 3提问于2018-12-26得票数 1

回答已采纳

2回答

通过画布描绘星星的不透明度

css、reactjs、animation、canvas

如何动画的不透明的星星画在画布上？我在试图在一座山后面画多颗星星。到目前为止，我能想到两个选择。不透明的星星翻转/闪烁的速度非常快，我能在动画之间增加延迟吗？目前，我正在调用无限循环window.requestAnimationFrame(

浏览 0提问于2019-08-22得票数 0

1回答

SVG CSS动画明星闪烁向0,0点移动

css、svg、css-animations、svg-animate

我试图动画一个svg明星与闪光的css。我猜测的是，每个点的位置，使星星(在路径中)没有使用在动画。

浏览 5提问于2014-09-04得票数 1

回答已采纳

2回答

如何逆时针显示元素？

html、css、animation

我想以逆时针方式显示一个图像作为动画？更准确地说，我想展示来自一颗星星的某种笔划，这样你就会觉得它是画出来的。而所有这些都只在CSS3中实现。有可能吗？

浏览 0提问于2012-12-21得票数 3

回答已采纳

1回答

如何制作动画精灵套件背景？

ios、swift、xcode、sprite-kit

我想在我的游戏中制作动画空间背景，我试着使用spritekit上的节点“星星节点”，但是游戏因为星星的数量而变得滞后，有什么程序或方法来制作HD动画背景吗？

浏览 2提问于2016-07-31得票数 1

回答已采纳

2回答

数组元素的依从性属性

javascript、arrays、canvas

在画布上，我分配了一组具有坐标的星星：y: randomInt(0, canvas.height - 1), for (let i = 0; i < SF_COUNT; i++) { if (stars[i].y < 75) {stars[i].op -= 0

浏览 2提问于2018-08-11得票数 1

回答已采纳

1回答

动画css3闪烁的星星

css

figure class="star-bottom"></figure></figure>';}, loop.start(); 谢谢

浏览 3提问于2014-06-01得票数 0

回答已采纳

1回答

将在android游戏的结果活动中显示的星象动画效果

android、animation、android-xml

我正在开发一个android游戏，在每个级别完成后，结果活动就会显示出来，显示用户的分数，并根据这个结果给出星星。现在，在这个结果活动中，有3的图像视图， of ，灰色的星星，，以及那些我想用动画显示的，金星。但是在播放动画时，灰色的星星被隐藏起来，只有金色的星星似乎在移动，并被放置在隐藏的灰色星星上。问题:在动画开始时，最左边的星星变得看不见了。starIv1.setIm

浏览 1提问于2013-09-26得票数 2

回答已采纳

1回答

iOS应用程序中带有定时器和循环的平滑动画

swift、animation、timer、grand-central-dispatch

当用户为一些没有评级的对象打开ViewController时，我想用非常简单的方式让用户注意到这些星星:动画星星高亮(在现实世界中，当每个字母都被高亮显示时，您可以在一些广告中看到这样的行为)。一颗星星突出显示 .我有一个名为delayWithSeconds的函数，它可以延迟操作，并且我使用这个函数来延迟每一颗星星的突出显示。0.6是动画开始前的初始延迟。在所有星星被突出显示之后--最后一步是关闭所有恒星的突出显示。这段代码可以工作，但

浏览 2提问于2017-04-19得票数 0

2回答

向android添加动画

java、android、animation

我甚至不确定它是否叫做动画，但我在任何地方都找不到它。我想制作一些像这样的动画：当然，它不一定是那颗星星，而是任何能给你同样感觉的东西。谢谢

浏览 4提问于2021-06-04得票数 0

回答已采纳

1回答

无限动画的JS/GSAP解决方案

javascript、jquery、animation、svg、gsap

我试图创造一个无限的星雨动画，所有的星星都是SVG的。我试着创建这个动画：TweenMax.set(".astar", { return i * 50;}); } repeat: -1})(jQuery); 重复的过程是不顺利的，你可以在这个代码：有任何JS或GSAP解决方案使动画平滑，这样它看起来就像星星

浏览 1提问于2018-01-20得票数 0

回答已采纳

1回答

如何在Android SDK中实现这种类型的动画？

android、android-animation

看看我为一个我想在安卓上开发的游戏的界面所做的设计：当用户触摸气球时，我想让星星/眩光动画播放落下的星星。我所好奇的是，在使用eclipse/java开发应用程序时，制作动画的最佳总体方向/方法是什么。

浏览 1提问于2012-08-06得票数 0

2回答

javascript函数与jquery命名空间函数的区别是什么？

javascript、jquery

function stars() {if (mOpacity = 1) { }stars();$.stars = function() { var mOpacity = $('#area').css(2000).animate({opacity:1}, 3000)

浏览 8提问于2012-09-14得票数 0

回答已采纳

1回答

CSS包装器内容的完整高度而不是窗口的完整高度

html、css

我正在运行一个css背景与图像动画一些闪烁的星星。问题是，css使用绝对定位来用这些星形填充页面，这只填充了当前浏览器窗口的大小。

浏览 34提问于2021-11-11得票数 0

回答已采纳

1回答

android中的滞后性动画

android、animation、android-xml

我在我的游戏中使用了动画，在游戏中，用户看到他的分数以星星的形式出现(最高得分得到3颗星)。我对每一颗星星都使用了动画(使用startAnimation()方法)。金色星星被放置在空白灰色的星星上与翻译，规模和阿尔法动画(我使用了设置动画)。但是，每当该得分活动开始时，动画就会以抽搐/滞后/不流畅的方式显示出来。什么解决方案使动画流畅和及时的以下是显示3颗星中3颗星星的java

浏览 3提问于2013-09-30得票数 1

1回答

CSS动画DIV作为背景，透明BG Div，内容在顶部

html、css、twitter-bootstrap

我一直在尝试将一些bootstrap/html/css放在CSS动画星空之上作为背景。一种在网上看起来很突出的方法是制作一个1x1像素的png。我希望有一种方法可以用透明的方式编写代码。理想情况下，我希望看到星星穿过包含文本的Div、引用框左侧的Div (列)和包含按钮的Div。相反，我只是得到了黑色的背景。

浏览 14提问于2017-02-03得票数 1

2回答

更快的方法分散多个图像项目html

javascript、html、css、animation、css-animations

我对动画很陌生，我目前正在努力实现以下的目标:然而，因为我想让这些星星在你盘旋的时候摆动，我发现我需要手动插入每一颗星星，而不仅仅是插入这张图片。是否有更快/更有效的方法来解决这个问题？

浏览 3提问于2017-08-25得票数 4

回答已采纳

1回答

如何在视图背景中设置图像动画

iphone

嗨，我是iphone.what的新手，我需要的是我必须放置一个像天空中的星星和动画的星星发光的图像，例如我正在显示一个样本图像，我如何做到这一点，请提前为我可怜的English.Thank u发布一些关于

浏览 1提问于2010-09-17得票数 0

回答已采纳

2回答

即使设置100宽度和高度，滚动条也会出现。

html、css、height、width

我开始学习网页开发，所以我买了一门关于udemy.For的课程，现在我正在学习CSS3 3/HTML5 5，并且用CSS3 3开始了一个小项目，一个代表大学的网页，我想创建一个动画。我有一个问题:我想页面是全宽度和高度(没有滚动).Firstly我把黑色放在页面上，然后我创建了一个616x616png图像与白点代表的stars.Well，在我把星星放在页面上，全宽度/高度不出现，滚动是这是我的HTML代码：<head> <title>Earth Pla

浏览 3提问于2017-09-10得票数 0

回答已采纳

点击加载更多

css星星动画