屏幕周围嵌入框阴影的双色动画- CSS

drnojrws 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(113)

我尝试创建一个动画，在屏幕周围有两种颜色平滑过渡的插入框阴影。我目前的方法包括使用遮罩隐藏屏幕的一半并使其旋转，但动画并不像预期的那样平滑，并且某些角落缺乏阴影。代码：

body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes rotateAnimation {
    0%, 100% {
        -webkit-mask: linear-gradient(to right, transparent, black) content-box;
    }

    25% {
        -webkit-mask: linear-gradient(to bottom, transparent, black) content-box;
    }

    50% {
        -webkit-mask: linear-gradient(to left, transparent, black) content-box;
    }

    75% {
        -webkit-mask: linear-gradient(to top, transparent, black) content-box;
    }
}

.glow,
.glow2 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1;
}

.glow {
    -webkit-mask: linear-gradient(to right, transparent, black) content-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateAnimation 5s ease-in-out infinite;
    box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 255);
}

.glow2 {
    -webkit-mask: linear-gradient(to right, black, transparent) content-box;
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateAnimation 5s ease-in-out infinite reverse;
    box-shadow: inset 0px 0px 30px 0px rgba(255, 0, 0);
}

个字符
我尝试过使用蒙版来隐藏一半的屏幕，并使用两种颜色的嵌入框阴影，但过渡不是很平滑，并且角落处存在问题。我希望在框阴影中使用两种颜色实现无缝和连续的动画。

css

来源：https://stackoverflow.com/questions/77781449/two-color-animation-for-an-inset-box-shadow-around-the-screen-css

1条答案

按热度按时间

smtd7mpg1#

据我所知，你正在尝试为一个插入框阴影动画创建一个两种颜色之间的平滑过渡，你所面临的问题可能是由于动画中每隔25%的渐变会突然改变。
一个可能的解决方案是使用带有背景渐变的pseudo-element，并对background-position进行动画处理。这样，您可以实现颜色之间更平滑的过渡。下面是一个对您的代码有用的示例：

<style>
body {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.glow {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1;
    overflow: hidden;
}

.glow:before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(-45deg, rgba(0, 0, 255), rgba(255, 0, 0));
    background-size: 400% 400%;
    animation: gradient 5s ease infinite;
    box-shadow: inset 0px 0px 30px 0px;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}   
</style>

<div class="glow"></div><div class="glow2"></div>

字符串

赞(0）回复(0）举报 2024-01-09

我来回答

屏幕周围嵌入框阴影的双色动画- CSS

1条答案

相关问题

热门标签

最新问答