当前位置：网站首页>旋转彩色三叶草

旋转彩色三叶草

2022-06-29 23:53:00 【　星云　】

诶哟图丢了

<!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'); // 无脚本一样可以良好展示，但是得多写好多重复代码，而且不好改 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>
原网站

版权声明
本文为[　星云　]所创，转载请带上原文链接，感谢
https://blog.csdn.net/dscn15848078969/article/details/125475249

边栏推荐

猜你喜欢

随机推荐