형태성 링 코드-JS 튜토리얼-php.cn

형태성 링 코드

Mary-Kate Olsen

풀어 주다： 2025-01-03 00:10:39

원래의

984명이 탐색했습니다.

Morphism Ring code

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>모핑 그라데이션 링</title>
    <스타일>
        몸 {
            여백: 0;
            높이: 100vh;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            배경: 선형 그라데이션(120deg, #0d1015, #091529);
            오버플로: 숨김;
        }

        .ring-컨테이너 {
            위치: 상대;
            너비: 300px;
            높이: 300px;
        }

        .반지 {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            너비: 100%;
            높이: 100%;
            테두리 반경: 50%;
            배경: 원뿔형 그라데이션(
            0도에서, #ff7eb3, #ff758c,#ff6a56, 
            #f9a826,#f02fc2#9b00ff,#ff7eb3
            );
            변형: 번역(-50%, -50%) 
            회전(0deg);
            애니메이션:rotateRing 5s 선형 무한;
        }

        .ring::이전 {
            콘텐츠: '';
            위치: 절대;
            상단: 50%;
            왼쪽: 50%;
            너비: 80%;
            높이: 80%;
            배경: 선형 그라데이션(오른쪽 하단으로, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.1));
            테두리 반경: 50%;
            필터: 흐림(10px);
            변환: 변환(-50%, -50%);
        }

        .ring::이후 {
            콘텐츠: '';
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            너비: 60%;
            높이: 60%;
            배경: rgba(255, 255, 255, 0.1);
            테두리: 2px 솔리드 rgba(255, 255, 255, 0.2);
            테두리 반경: 50%;
            변환: 변환(-50%, -50%);
        }

        @keyframes 회전 링 {
            0% {
                변형: 번역(-50%, -50%) 
                회전(0deg);
            }
            100% {
                변형: 번역(-50%, -50%)
                회전(360deg);
            }
        }
    </스타일>
</머리>
<본문>
    <div>

로그인 후 복사

위 내용은 형태성 링 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!