用户投稿引言
不知道如何提升自己网页的吸引力吗？背景动画是网页设计吸引用户注意的元素之一。本文将介绍以 SCSS 製作不同的背景动画，包含颜色渐变、闪烁效果，提升页面的丰富度抓住使用者的目光。就让我们开始这次的旅程吧！
动画製作
这次的实作依赖于 Bootstrap 5，可以根据需要进行任何必要的调整及修正。
<body class="min-vh-100 d-flex align-items-center"> <div class="sky"> <div class="star" id="planet-1"></div> <div class="star" id="planet-2"></div> <div class="star" id="planet-3"></div> </div> <div class="container"> <!-- 网站主要内容 --> </div></body>1.天空渐变背景
首先，製作一个天空渐层背景并将天空背景整个放大，透过移动背景的位置就会有颜色流动变化。$sky-color：天空渐层图，可以挑选自己喜欢的色号。@keyframes twilight：背景移动的路径，根据天空渐层图做合适的移动。
$sky-color: linear-gradient( 168deg, #090c10 0%, #0a1a2e 30%, #253950 50%, #1f4471 80%, #1a5389 100%);@keyframes twilight { 0% { background-position: 0% 0%; } 60% { background-position: 40% 60%; } 100% { background-position: 100% 60%; }}.sky { position: absolute; width: 100%; height: 100%; background: $sky-color; background-size: 400%; animation: twilight 20s infinite alternate; animation-timing-function: linear;}2.星星闪烁
在 HTML 结构中我们已经建立了数个.star的标籤，.star用于定义星星的共同特性。接下来，使用 SCSS 为每颗.star#planet-x设定独特的属性，包括大小、位置和亮度。$star-amount：决定星星的数量。要特别注意跟.star#planet-x标籤数配合。@keyframes twinkle：改变星星的透明度，达到闪烁效果。
$star-amount: 3@mixin star($index) { $size: random(3) + 1px; #planet-#{$index} { width: $size; height: $size; left: random(98) + vw; top: random(98) + vh; opacity: random(2) * 0.1; animation-delay: random(10) * 0.1s; }}@keyframes twinkle { to { opacity: 1; }}.sky { // ... .star { position: absolute; background-color: white; border-radius: 50%; box-shadow: 0 0 5px rgba(255, 255, 255, 0.8); animation: twinkle 1s infinite alternate; animation-timing-function: ease-in-out; } @for $i from 1 through $star-amount { @include star($i); }}总结
现在，您已经学会了如何製作小星星背景动画，根据个人喜好进行调整，创造属于自己的星空吧！也可以透过连结查看最终效果。
微信扫一扫打赏
支付宝扫一扫打赏
