>  기사  >  웹 프론트엔드  >  멋진 CSS3 애니메이션 효과를 얻는 방법은 무엇입니까? (코드 예)

멋진 CSS3 애니메이션 효과를 얻는 방법은 무엇입니까? (코드 예)

云罗郡主
云罗郡主앞으로
2018-10-22 17:01:011643검색

이 기사의 내용은 멋진 CSS3 애니메이션 효과를 얻는 방법에 관한 것입니다. (코드 예)에는 특정 참고 값이 있습니다. 도움이 필요한 친구가 참고할 수 있기를 바랍니다.

다음은 CSS3의 놀라운 효과를 보여주기 위해 프런트엔드 전문가가 인용한 코드 예제입니다.

예:

<!DOCTYPE HTML>
<html>
<head>   
    <title>一个绚丽的CSS3动画效果</title>
    <style  type="text/css">
        body{background:#000;}
        h1
        {
            text-align:center;
            color:#fff;
            font-size:48px;
            text-shadow: 1px 1px 1px #ccc,
                       0 0 10px #fff,
                       0 0 20px #fff,
                       0 0 30px #fff,
                       0 0 40px #ff00de,
                       0 0 70px #ff00de,
                       0 0 80px #ff00de,
                       0 0 100px #ff00de,
                       0 0 150px #ff00de;
            transform-style: preserve-3d;
            -moz-transform-style: preserve-3d;
            -webkit-transform-style: preserve-3d;  
            -ms-transform-style: preserve-3d;             
            -o-transform-style: preserve-3d;              
            animation: run  ease-in-out 9s infinite;
            -moz-animation: run  ease-in-out 9s infinite ; 
            -webkit-animation: run  ease-in-out 9s infinite;   
            -ms-animation: run  ease-in-out 9s infinite;   
            -o-animation: run  ease-in-out 9s infinite;
          }
        @keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-webkit-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-moz-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
        @-ms-keyframes run
        {
            0% {transform:rotateX(-5deg) rotateY(0);}
            50%
            {
                transform:rotateX(0) rotateY(180deg);  
                text-shadow: 1px  1px 1px #ccc,
                           0 0 10px #fff,
                           0 0 20px #fff,
                           0 0 30px #fff,
                           0 0 40px #3EFF3E,
                           0 0 70px #3EFFff,
                           0 0 80px #3EFFff,
                           0 0 100px #3EFFee,
                           0 0 150px #3EFFee;
            }
            100% {transform:rotateX(5deg) rotateY(360deg);}
        }
    </style>
</head>
<body>
    <h1>php中文网</h1>
</body>
</html>

효과는 다음과 같습니다:

멋진 CSS3 애니메이션 효과를 얻는 방법은 무엇입니까? (코드 예)

분석:

이렇게 멋진 효과를 보니, 친구들이 모두 충격을 받았다고 생각합니다!

이 예제는 CSS3의 여러 기술을 결합하고 CSS3의 텍스트 그림자, 변형 효과 변환, 전환 효과 전환 및 애니메이션 효과 애니메이션을 사용합니다.

위는 멋진 CSS3 애니메이션 효과를 얻는 방법입니다. (코드 예) 전체 소개, CSS3 비디오 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.


위 내용은 멋진 CSS3 애니메이션 효과를 얻는 방법은 무엇입니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 绿叶学习网에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제