CSS实现流动边框特效

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

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>

Run code

Cut to clipboard

reply | quote | #¹

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

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>

Run code

Cut to clipboard

reply | quote | #²

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

reply | quote | #³

lizhenqiu blog

CSS实现流动边框特效

相关日志

有过 3 条评论 »

留下評論