jquery css中的帧旋转动画

suzh9iv8 于 12个月前发布在 jQuery

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

我写一个网站，需要动画的几个块的帧，但我需要的background-image旋转的起始Angular 是不同的
我尝试使用下面的代码，但这并不正确：
动画不流畅，在一定时间内更新一次
我该如何解决此问题？

var carousel_items = document.getElementsByClassName("carousel-item");
var root = document.documentElement;

function setFrames() {
    let frame = 70;
    for (let i = 1; i < carousel_items.length + 1; i++) {
        root.style.setProperty("--icon-" + String(i), String(frame) + "deg");
        $("head").append("<style> #test" + i + ":before {content: ''; width: 102%; height: 102%; border-radius: 40px/40px; background-image: linear-gradient(var(--icon-" + i +"), #F9BEFF, #B8EAFF, #83C7FF); position: absolute; z-index: -1; top: -1%; left: -1%; animation: spin-" + i + " 5s linear infinite;}</style>");
        $("head").append("<style> #test" + i +":after {position: absolute; top: calc(var(--carousel-item-height)); left: 0; right: 0; z-index: -1; height: 100%; width: 100%; margin: 0 auto; transform: scale(0.6); background-image: linear-gradient(var(--icon-" + i + "), #F9BEFF, #B8EAFF, #83C7FF); opacity: 1; transition: opacity .5s; animation: spin-" + i + " 5s linear infinite;}  @keyframes spin-" + i +" {0% {--icon-" + i + ": 0deg;}100% {--icon- " + i + ": 360deg;}} </style>")
        frame += 70;
    }
};

.carousel {
            display: flex;
            width: 100%;
            height: 165px;
            overflow-x: scroll;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .carousel:first-child {
            margin-left: 0px;
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .carousel-item {
            background: var(--back-color);
            margin-top: 5px;
            margin-left: 10px;
            padding: 3px;
            width: 150px;
            height: 149px;
            min-width: 150px;
            min-height: 149px;
            position: relative;
            border-radius: 40px/39px;
        }
        
        :root {
            --back-color: #EFEFF4;
        }

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body onload="setFrames()">
    <div class="carousel">
        <div id="test1" class="carousel-item">
            <span width="100%">test1</span>
        </div>
        <div id="test2" class="carousel-item">
            <span width="100%">test2</span>
        </div>
        <div id="test3" class="carousel-item">
            <span width="100%">test3</span>
        </div>
    </div>
</body>
</html>

jquery

来源：https://stackoverflow.com/questions/77458311/frame-spin-animation-in-css

1条答案

按热度按时间

p8h8hvxi1#

我已经为你附上了工作代码。
但是他们在JS中添加CSS的方式是非常糟糕，请学习如何以更好的方式来做
您的代码的问题
1.为什么不能动画化，css变量不能动画化，但是你可以用@property来制作它们

为什么它们的帧值都相同？
这是因为初始状态是由0%处的动画控制的，而你总是从0deg开始，我已经更新为使用frame值

var carousel_items = document.getElementsByClassName("carousel-item");
var root = document.documentElement;

function setFrames() {
    let frame = 70;
    for (let i = 1; i < carousel_items.length + 1; i++) {
        
        $("head").append("<style> #test" + i + ":before {content: ''; width: 102%; height: 102%; border-radius: 40px/40px; background-image: linear-gradient(var(--icon-" + i +"), #F9BEFF, #B8EAFF, #83C7FF); position: absolute; z-index: -1; top: -1%; left: -1%; animation: spin-" + i + " 5s linear infinite;}</style>");
        $("head").append("<style> #test" + i +":after {position: absolute; top: calc(var(--carousel-item-height)); left: 0; right: 0; z-index: -1; height: 100%; width: 100%; margin: 0 auto; transform: scale(0.6); background-image: linear-gradient(var(--icon-" + i + "), #F9BEFF, #B8EAFF, #83C7FF); opacity: 1; transition: opacity .5s; animation: spin-" + i + " 2s linear infinite;}  @keyframes spin-" + i +" {0% {--icon-" + i + ": " + (frame)+"deg;}100% {--icon-" + i + ": " + (frame+360)+"deg;}} </style>")
        frame += 70;
    }
};

@property --icon-1{
  syntax: '<angle>'; /* <- defined as type angle for the transition to work */
  initial-value: 0deg;
  inherits: false;
}

@property --icon-2{
  syntax: '<angle>'; /* <- defined as type angle for the transition to work */
  initial-value: 0deg;
  inherits: false;
}

@property --icon-3{
  syntax: '<angle>'; /* <- defined as type angle for the transition to work */
  initial-value: 0deg;
  inherits: false;
}
.carousel {
            display: flex;
            width: 100%;
            height: 165px;
            overflow-x: scroll;
            overflow-y: hidden;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

        .carousel:first-child {
            margin-left: 0px;
        }

        .carousel::-webkit-scrollbar {
            display: none;
        }

        .carousel-item {
            //background: var(--back-color);
            margin-top: 5px;
            margin-left: 10px;
            padding: 3px;
            width: 150px;
            height: 149px;
            min-width: 150px;
            min-height: 149px;
            position: relative;
            border-radius: 40px/39px;
        }
        
        :root {
            --back-color: #EFEFF4;
        }

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body onload="setFrames()">
    <div class="carousel">
        <div id="test1" class="carousel-item">
            <span width="100%">test1</span>
        </div>
        <div id="test2" class="carousel-item">
            <span width="100%">test2</span>
        </div>
        <div id="test3" class="carousel-item">
            <span width="100%">test3</span>
        </div>
    </div>
</body>
</html>

赞(0）回复(0）举报 12个月前

我来回答

jquery css中的帧旋转动画

1条答案

相关问题

热门标签

最新问答