css实现螺旋纹理图案变换动画效果代码-html代码-BFW代码库

css实现螺旋纹理图案变换动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现螺旋纹理图案变换动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

<style>
*,
::after,
::before {
        border-style: solid;
        border-width: 0;
        box-sizing: border-box;
}

body {
        background: #000;
        height: 100vh;
        margin: 0;
        width: 100%;
        overflow: hidden;
}

.scene {
        align-items: center;
        display: grid;
        height: 100%;
        justify-items: center;
        place-items: center;
        width: 100%;
}

.card,
.scene {
        position: relative;
}

.card {
        animation: pulse 16s ease-in-out infinite alternate,
                card-trance-dance 24s ease-in-out infinite alternate,
                acid-color-cycle 8s linear infinite;
        aspect-ratio: 3/2;
        border-radius: 0.9375rem;
        max-width: 26.25rem;
        overflow: hidden;
        transform-origin: center center;
        width: 75%;
}

.card-wrapper {
        height: 100%;
        overflow: hidden;
        position: absolute;
        width: 100%;
}

.card-layer {
        background: repeating-radial-gradient(
                circle,
                rgba(255, 0, 255, 0.9) 0,
                rgba(0, 255, 255, 0.1) 10%,
                rgba(255, 0, 255, 0.9) 20%
        );
        background-size: 2.5rem 2.5rem;
        height: 300%;
        left: -100%;
        mix-blend-mode: lighten;
        position: absolute;
        top: -100%;
        width: 300%;
}

.card-layer.moving {
        animation: moire-move 3s linear infinite alternate;
        mix-blend-mode: difference;
        opacity: 0.8;
}

@keyframes moire-move {
        0% {
                transform: translate(-0.3125rem, -0.3125rem) scale(1.02) rotate(6deg);
        }

        50% {
                transform: translate(0.3125rem, 0.3125rem) scale(1.04) rotate(-6deg);
        }

        100% {
                transform: translate(-0.3125rem, -0.3125rem) scale(1.02) rotate(6deg);
        }
}

.card-layer.moire-extra {
        animation: moire-extra-move 4s ease-in-out infinite al.........完整代码请登录后点击上方下载按钮下载查看