Article Detail

CSS实现流动边框特效

@keyframes flowing-border { 0% { box-shadow: inset 0 0 0 2px #ff0000; } 25% { bo...

HTML 阅读 4.7万 3 分钟阅读 2024-11-12 02:46

<style>@keyframes flowing-border {
  0% {
    box-shadow: inset 0 0 0 2px #ff0000;
  }
  25% {
    box-shadow: inset 0 0 0 2px #00ff00;
  }
  50% {
    box-shadow: inset 0 0 0 2px #0000ff;
  }
  75% {
    box-shadow: inset 0 0 0 2px #ffff00;
  }
  100% {
    box-shadow: inset 0 0 0 2px #ff00ff;
  }
}

.flowing-box {
  /* 其他样式 */
  animation: flowing-border 5s linear infinite;
}
</style>

效果：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    .flowing-box {
     width: 200px;
     height: 150px;
     background-color: #fff;
     position: relative;
   }
@keyframes flowing-border {
     0% {
       box-shadow: inset 0 0 0 2px #ff0000;
     }
     25% {
       box-shadow: inset 0 0 0 2px #00ff00;
     }
     50% {
       box-shadow: inset 0 0 0 2px #0000ff;
     }
     75% {
       box-shadow: inset 0 0 0 2px #ffff00;
     }
     100% {
       box-shadow: inset 0 0 0 2px #ff00ff;
     }
   }
.flowing-box {
     /* 其他样式 */
     animation: flowing-border 5s linear infinite;
   }
  </style>
</head>

<body>
  <div class="flowing-box">这是一个box</div>
</body>

</html>

Comments 评论区

广西南宁市 2024-11-12 02:57

CSS特效——背景色彩不停流动效果

<div class="gradient-flow"></div>
<style>
.gradient-flow {
  width: 50vw;
  height: 50vh;
  background-size: 200% 200%; /* 背景图大小 */
  background-image: linear-gradient(135deg, #ff7c7c, #ffeb3b, #26c6da, #7e57c2);
  animation: flow 10s ease infinite;
}
@keyframes flow {
  0% { background-position: 0% 50%; }
  25% { background-position: 100% 50%; }
  50% { background-position: 100% 0%; }
  75% { background-position: 0% 0%; }
  100% { background-position: 0% 50%; }
}

/*为了确保动画效果在不同的设备上都能良好展示，我们需要考虑响应式设计。*/
@media (max-width: 768px) {
  .gradient-flow {
    background-size: 300% 300%;
    animation-duration: 7s;
  }
}

/*为了进一步增强视觉冲击力，可以将背景色流动效果与其他CSS效果结合起来，例如加入阴影或透明度变化。*/
.gradient-flow {
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
  transition: box-shadow 0.5s ease-in-out;
}

.gradient-flow:hover {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.8);
}
</style>

<!--添加交互性
通过JavaScript，我们可以为背景色流动效果增加一些交互性，例如根据鼠标移动位置改变背景颜色流动的方向。-->
<script>
const gradientFlow = document.querySelector('.gradient-flow');
gradientFlow.addEventListener('mousemove', function(e) {
  const x = e.clientX / window.innerWidth * 100;
  const y = e.clientY / window.innerHeight * 100;
  this.style.backgroundPosition = `${x}% ${y}%`;
});
</script>

#⁰

广西南宁市 2024-11-12 02:59

css背景动态渐变效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>丰富彩色动态渐变背景与发光文字</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
            text-align: center;
            /* 丰富彩色渐变背景 */
            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet, red);
            /* 覆盖整个背景 */
            background-size: 400% 400%;
            /* 动画设置 */
            animation: gradient 30s ease infinite;
        }

        @keyframes gradient {
            0% {
                background-position: 0% 50%;
            }
            50% {
                background-position: 100% 50%;
            }
            100% {
                background-position: 0% 50%;
            }
        }

        h1 {
            /* 黑色文字 */
            color: black;
            /* 文字发光效果 */
            text-shadow: 0 0 10px white, 0 0 20px white, 0 0 30px white, 0 0 40px white;
            /* 增加文字的可读性，可选 */
            font-weight: bold;
            font-size: 3em; /* 根据需要调整文字大小 */
        }
    </style>
</head>
<body>
    <h1>丰富彩色动态渐变背景与发光文字效果</h1>
</body>
</html>

#⁰

广西南宁市 2024-11-13 01:53

😊😊😊🤔🤔

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。