>  기사  >  웹 프론트엔드  >  CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법

CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법

不言
不言원래의
2018-09-12 14:24:254869검색

때때로 웹 페이지에서 이러한 효과를 볼 수 있습니다. 특정 텍스트나 이미지에 마우스를 놓으면 약간의 변화가 발생합니다. 이는 실제로 이런 방식으로 비교적 추상적입니다. 전환 애니메이션 효과를 달성하기 위한 css3 정보.

Css3 전환은 전환 속성과 분리될 수 없습니다. 전환은 웹 페이지의 전환 애니메이션으로, 변화의 점진적인 전환 효과를 전환 애니메이션이라고 합니다.

그럼 CSS3의 전환 속성이 ​​전환 효과를 구체적으로 어떻게 구현하는지 살펴보겠습니다.

먼저 전환 속성의 정의와 사용법을 살펴보겠습니다.

전환 속성은 4개의 전환 속성을 설정하는 데 사용되는 단축 속성입니다.

transition-property: 전환 효과를 설정하는 CSS 속성의 이름을 지정합니다.

transition-duration: 전환 효과를 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다.

transition-timing-function: 속도 효과의 속도 곡선을 지정합니다.

transition-delay: 전환 효과가 시작되는 시점을 정의합니다.

전환 속성의 정의와 사용법에 대한 간략한 소개를 읽은 후.

이제 전환 효과를 구현하는 CSS3 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>小效果</title>
    <style type="text/css">
        /*通配符重置浏览器默认的两个值,
        对本文没有太大影响,不知道可以无视*/
        *{
            margin: 0;
            padding: 0;
        }
        .div1{
            width: 400px;
            height: 100px;
            padding-top: 20px;
            line-height: 100px;
            margin:200px auto 0;
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            font-family: "华文行楷";
            background: #000;
            color:#F60;
    transition-property: all;/*变化的东西。all是所有*/
    transition-duration: 1s;/*变化过程的时间*/
    transition-timing-function: linear;/*linear是匀速变化*/
    transition-delay: 0s;/*没有延迟变化*/
    /*下面的是简写属性*/
    /*
        transition:all 1s linear 0s;
    */
        }
        .div1:hover{
            text-shadow: 0px 0px 2px #fff,
                    0px -3px 3px #1EB,
                    0px -6px 4px #01DEFD,
                    0px -9px 5px #0BF,
                    0px -12px 6px #08F;
        }
    </style>
</head>
<body>
    <div>PHP中文网火焰字</div>
</body>
</html>

마지막으로 전환 효과를 구현하는 CSS3을 살펴보겠습니다.

css3 전환 효과 프로세스를 구현하는 방법:

CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법

css3 전환 효과 구현 결과:

CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법

전환 속성의 자세한 사용법은 css3 학습 매뉴얼을 참조하세요.

관련 권장 사항:

CSS3 애니메이션을 사용하여 3D 이미지 전환 효과 구현_html/css_WEB-ITnose

전환 속성을 사용하여 전환 효과를 구현하는 CSS3 정보

위 내용은 CSS3에서 전환 애니메이션 효과를 얻는 방법은 무엇입니까? CSS3 전환 효과를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.