当前位置：网站首页>Rotating colored clover

Rotating colored clover

2022-06-30 00:09:00 【Nebula】

Oh, the picture is lost

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> @keyframes move {
       0%, 100% {
       width: 12rem; } 50% {
       width: 20rem; } } body {
       background-color: #222; } .group {
       margin: auto; width: 25rem; height: 25rem; text-align: left; } .box {
       position: absolute; white-space: nowrap; top: 50%; width: 20rem; } .ball {
       display: inline-block; width: .75rem; height: .75rem; border-radius: 100%; } .bar {
       display: inline-block; height: .75rem; animation: move 2s ease-in-out infinite; } </style>
</head>

<body>
    <div class="container">
        <div id="group" class="group">
        </div>
    </div>
</body>
<script> var group = document.getElementById('group'); //  It can be well demonstrated without scripts , But I have to write a lot of repetitive code , And it's hard to change  for (var i = 0; i < 18; i++) {
       var ball = document.createElement('div'); ball.className = 'ball'; ball.setAttribute('style', `background-color: hsl(${
        i * 20},100%,50%)`) var bar = document.createElement('div'); bar.className = 'bar'; bar.setAttribute('style', `animation-delay: -${
        i / 3}s;`) var box = document.createElement('div'); box.className = 'box'; box.setAttribute('style', `transform: rotate(${
        i * 20}deg);`) box.appendChild(bar); box.appendChild(ball); group.appendChild(box); } </script>

</html>

原网站

版权声明
本文为[Nebula]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206292353276618.html

当前位置：网站首页>Rotating colored clover

Rotating colored clover

边栏推荐

猜你喜欢

随机推荐