使用 html css 和 javascript 的催眠螺旋錯覺

    
    
    <title>催眠螺旋動畫</title>
    
        * {
            保證金：0；
            填充：0；
            框大小：邊框框；
            背景：#000；
            溢出：隱藏；
            顏色：#fff；
        }
        身體 {
            顯示：柔性；
            調整內容：居中；
            對齊項目：居中；
            高度：100vh；
        }
        .螺旋{
            位置：相對；
            寬度：200px；
            高度：200px；
            動畫：旋轉4s線性無限；
        }
        .spiral::之前{
            內容： '';
            位置：絕對；
            頂部：0；
            左：0；
            寬度：100%；
            高度：100%；
            邊界半徑：50%；
            邊框：2px實心透明；
            邊框圖像：圓錐梯度（從 0deg、#f00、#ff0、#0f0、#0ff、#00f、#f0f、#f00）；
            邊框影像切片：1；
            動畫：animateSpiral 10s線性無限；
        }
        。海浪 {
            位置：絕對；
            頂部：50%；
            左：50%；
            變換：翻譯（-50%，-50%）；
            邊界半徑：50%；
            邊框: 2px 實心 rgba(255, 255, 255, 0.3);
            動畫：expandWave 1s 緩出無限；
        }

        @關鍵影格旋轉{
            0% { 變換：旋轉(0deg); }
            100% { 變換：旋轉(360deg); }
        }
        @keyframes animateSpiral {
            0%, 100% { 變換: 縮放(1); }
            50% { 變換：縮放（0.5）； }
        }
        @keyframes ExpandWave {
            0% {
                寬度：0；
                高度：0；
                不透明度：1；
            }
            100% {
                寬度：500px；
                高度：500px；
                不透明度：0；
            }
        }
    風格>
頭>

    <div>




          </div>

            
        

以上是使用 html css 和 javascript 的催眠螺旋錯覺的詳細內容。更多資訊請關注PHP中文網其他相關文章！