recherche

Maison >interface Web >tutoriel CSS >Effets d'image Web faits à la main en Css3 pur

Effets d'image Web faits à la main en Css3 pur

高洛峰
高洛峰original
2017-02-09 16:41:371704parcourir

  1. Passez la souris, l'image pivotera à 360 degrés


    Effet :


    Code : 


    <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>


    Point de connaissance : l'attribut de transformation de CSS3 peut appliquer la 2D ou conversion 3D. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément. Définissez sur rotateZ(angle) pour implémenter la rotation 3D des éléments DOM le long de l'axe Z. Les paramètres associés incluent rotation, rotation3d, rotationX et rotationY.

  2. Survolez l'image pour l'agrandir



    Effet :


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


    Code :


    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>
            </p>


    Point de connaissance : utilisez également l'attribut transform de CSS3, définissez scale(x,y) et implémentez Conversion de mise à l'échelle DOM 2D des éléments, liée à scale3d, scaleX, scaleY, scaleZ

  3. réalisation d'un album de rotation d'image 3D

    effet :



    Code :


    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>
        </p>


    Point de connaissance : toujours s'appuyer sur l'attribut transform de CSS3 et l'attribut d'animation, utilisez rotateY pour définir la rotation 3D de l'élément le long de l'axe Y et utilisez translateZ pour définir la transformation 3D de l'élément le long de l'axe Z
    En même temps, définissez l'attribut d'animation de l'élément ; pour obtenir l'effet d'animation, qui est défini dans cet article comme suit : 


    animation: rotation 20s infinite linear;


    nom de l'animation (nom de l'image clé qui doit être lié au sélecteur) : Animation de rotation
    durée de l'animation (le temps nécessaire pour terminer l'animation) : 20 s
    nombre d'itérations d'animation ( le nombre de fois que l'animation doit être jouée) : infini (temps illimités)
    animation-timing-function (animation Speed ​​​​curve) : linéaire (la vitesse de l'animation est la même du début à la fin)

Pour des effets d'image de page Web CSS3 plus purs faits à la main, veuillez faire attention au site Web PHP chinois pour les articles connexes !

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：La relation de position dans l'espace caché de divArticle suivant：La relation de position dans l'espace caché de div

Articles Liés

Voir plus