찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >순수한 CSS3 손으로 만든 웹 페이지 이미지 효과

순수한 CSS3 손으로 만든 웹 페이지 이미지 효과

高洛峰
高洛峰원래의
2017-02-09 16:41:371699검색

  1. 마우스를 올리면 이미지가 360도 회전합니다


    효과:


    코드: 


    <style>
            .rotate-demo {
                width: 220px;
                height: 220px;
                margin: 0 auto;
                background: no-repeat url("images/author.jpg") left top;
                -webkit-background-size: 220px 220px;
                -moz-background-size: 220px 220px;
                background-size: 220px 220px;
                -webkit-border-radius: 110px;
                border-radius: 110px;
                -webkit-transition: -webkit-transform 2s ease-out;
                -moz-transition: -moz-transform 2s ease-out;
                -o-transition: -o-transform 2s ease-out;
                -ms-transition: -ms-transform 2s ease-out;
            }
     <br>
                .rotate-demo:hover {
                    -webkit-transform: rotateZ(360deg);
                    -moz-transform: rotateZ(360deg);
                    -o-transform: rotateZ(360deg);
                    -ms-transform: rotateZ(360deg);
                    transform: rotateZ(360deg);
                }
        </style>
     <br>
    <p class="rotate-demo"></p>


    지식 포인트: CSS3의 변환 속성은 2D 또는 3D 변환을 적용할 수 있습니다. 강요. 이 속성을 사용하면 요소를 회전, 크기 조정, 이동 또는 기울일 수 있습니다. Z축을 따라 DOM 요소의 3D 회전을 구현하려면 회전Z(angle)로 설정합니다. 관련 설정에는 회전, 회전3d, 회전X 및 회전Y가 포함됩니다.

  2. 이미지를 확대하려면



    효과:


    纯Css3手工打造网页图片效果


    코드:


    CSS3：
    <style type="text/css">
        .img-container {
            background-color: #000;
            width: 220px;
            height: 220px;
            margin: 20px 50px;
        }
     <br>
        .img {
            -webkit-transform: scale(0.6);
            -moz-transform: scale(0.6);
            -o-transform: scale(0.6);
            -webkit-transition-duration: 0.5s;
            -moz-transition-duration: 0.5s;
            -o-transition-duration: 0.5s;
        }
     <br>
            .img img {
                padding: 1px;
                border-radius: 10px;
                border: 1px solid #fff;
            }
     <br>
            .img:hover {
                -webkit-transform: scale(0.8);
                -webkit-box-shadow: 0px 0px 30px #ccc;
                -moz-transform: scale(0.8);
                -moz-box-shadow: 0px 0px 30px #ccc;
                -o-transform: scale(0.8);
                -o-box-shadow: 0px 0px 30px #ccc;
            }
    </style>
     <br>
    HTML：
    <p class="img-container">
                <p class="img">
                    <img src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-0.jpg">
                </p>

    지식 요점: DOM 요소의 2D 스케일링 변환을 구현하기 위해 scale(x,y)를 설정하는 CSS3의 변환 속성도 사용됩니다. 관련 구현에는 scale3d, scaleX, scaleY, scaleZ

  3. 3D가 포함됩니다. 사진 회전 앨범

    효과:


    코드: 


            </p>
    CSS:
    <style>
            .carousel-container {
                margin: 20px auto;
                width: 210px;
                height: 140px;
                position: relative;
            }
     <br>
            #carousel {
                width: 100%;
                height: 100%;
                position: absolute;
                transform-style: preserve-3d;
                animation: rotation 20s infinite linear;
            }
     <br>
                #carousel:hover {
                    animation-play-state: paused;
                }
     <br>
                #carousel figure {
                    display: block;
                    position: absolute;
                    width: 186px;
                    height: 116px;
                    left: 10px;
                    top: 10px;
                    background: black;
                    overflow: hidden;
                    border: solid 1px black;
                }
     <br>
                    #carousel figure:nth-child(1) {
                        transform: rotateY(0deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(2) {
                        transform: rotateY(40deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(3) {
                        transform: rotateY(80deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(4) {
                        transform: rotateY(120deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(5) {
                        transform: rotateY(160deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(6) {
                        transform: rotateY(200deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(7) {
                        transform: rotateY(240deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(8) {
                        transform: rotateY(280deg) translateZ(288px);
                    }
     <br>
                    #carousel figure:nth-child(9) {
                        transform: rotateY(320deg) translateZ(288px);
                    }
     <br>
                #carousel .carousel-img {
                    -webkit-filter: grayscale(1);
                    cursor: pointer;
                    transition: all .5s ease;
                    border: none;
                }
     <br>
                    #carousel .carousel-img:hover {
                        -webkit-filter: grayscale(0);
                        transform: scale(1.2,1.2);
                    }
     <br>
            @keyframes rotation {
                from {
                    transform: rotateY(0deg);
                }
     <br>
                to {
                    transform: rotateY(360deg);
                }
            }
        </style>
     <br>
    HTML:
     <br>
    <p class="carousel-container">
            <p id="carousel">
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-1.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-2.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-3.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-4.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/91ad2d958c7d97417c4d740b2c80e27a-5.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-6.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-7.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-8.jpg" alt=""></figure>
                <figure><img class="carousel-img" src="https://img.php.cn/upload/article/000/000/013/2028a2d82c72dc48027911d5df6e0014-9.jpg" alt=""></figure>
            </p>

    지식 포인트: Still With CSS3의 변환 속성과 애니메이션 속성을 사용하여 Y축을 따라 요소의 3D 회전을 정의하고, TranslateZ를 사용하여 Z축을 따라 요소의 3D 변환을 정의합니다.
    동시에 이 문서에 정의된 대로 애니메이션 효과를 얻기 위한 요소의 animation 속성은 다음과 같습니다. 


        </p>

    animation-name(선택기 키프레임 이름에 바인딩되어야 함): animation of Rotation
    animation-duration(애니메이션을 완료하는 데 걸리는 시간): 20s
    animation-iteration-count ( 애니메이션을 재생해야 하는 횟수): 무한(무제한)
    animation-timing -function(애니메이션의 속도 곡선): 선형(애니메이션의 속도는 처음부터 끝까지 동일함)

더 순수한 CSS3 손으로 만든 웹페이지 이미지 효과를 보려면 PHP 중국어 웹사이트의 관련 기사를 주목하세요!

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

관련 기사

더보기