Maison > Article > interface Web > Les effets de retournement CSS les plus couramment utilisés

Les effets de retournement CSS les plus couramment utilisés

PHPzoriginal: 2017-03-24 16:49:191972parcourir

第一个：360度翻转特效

<style>
* {
    margin:0;
    padding:0;
}
.aa {
    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;
}
.aa:hover {
    -webkit-transform: rotateZ(360deg); /*transform  transition 以及 边角的弧度 border-radius 要考虑兼容性的问题*/
    -moz-transform: rotateZ(360deg);
    -o-transform: rotateZ(360deg);
    -ms-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
</style><body><p class="aa"></p></body>

第二种：照片墙悬挂效果

<style>body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}
            body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}
            input,button,textarea{border:none 0}
            fieldset,img{border:0}
            table{border-collapse:collapse;border-spacing:0}
            ul,ol{list-style:none}
            a:link{text-decoration:none}
            a:visited{text-decoration:none}
            a:hover{text-decoration:none}
            
            .clear{zoom:1}
            .clear:after{content:"";display:block;clear:both}/* polaroids */.polaroids{width:100%;margin:0 0 18px 10px;}.polaroids li{display: inline;}.polaroids a{background: #fff;display: inline;float:left;margin:0 0 27px 30px;width:auto;padding:10px 10px 15px;text-align: center;font-family: "Marker Felt", sans-serif;text-decoration: none;color:#333;font-size: 18px;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);-o-box-shadow:0 3px 6px rgba(0,0,0,.25);box-shadow:0 3px 6px rgba(0,0,0,.25);}.polaroids img{display: block;width:190px;margin-bottom:12px;}.polaroids a:after{content: attr(title);/* Ie8+,FF,Chorme,Safari */}
.polaroids li:nth-child(even) a{
    -webkit-transform:rotate(2deg);
    -moz-transform:rotate(2deg);
    -ms-transform:rotate(2deg);
    transform:rotate(2deg);
}
.polaroids li:nth-child(3n) a{
    -webkit-transform:none;
    -moz-transform:none;
    -ms-transform:rotate(2deg);
    transform:none;
    position: relative;
    top:-5px;
}
.polaroids li:nth-child(5n) a{
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    transform:rotate(5deg);
    position: relative;
    right:5px;
}
.polaroids li:nth-child(8n) a{
    position: relative;
    top:8px;
    right:5px;
}
.polaroids li:nth-child(11n) a{
    position: relative;
    top:3px;
    right:-5px;
}
.polaroids li a:hover{
    -webkit-transform:scale(1.25);
    -moz-transform:scale(1.25);
    -ms-transform:scale(1.25);
    transform:scale(1.25);
    -webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -moz-box-shadow:0 3px 6px rgba(0,0,0,.5);
    -o-box-shadow:0 3px 6px rgba(0,0,0,.5);
    box-shadow:0 3px 6px rgba(0,0,0,.5);
    position: relative;
    z-index: 5;
}
.polaroids li.messy a{margin-top:-375px;margin-left:160px;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    transform:rotate(-5deg);
}

</style>

<body>
<ul class="polaroids">
            <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li>
            <li><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li>
            <li><a href="#" title="Evil M"><img src="images/image-02.jpg" alt="Evil Matt Coding"></a></li>
            <li><a href="#" title="Scribb"><img src="images/image-01.jpg" alt="Scribbles"></a></li>
            <li><a href="#" title="Amanda"><img src="images/image-02.jpg" alt="Amanda Glares..."></a></li>
            <li><a href="#" title="The Do"><img src="images/image-01.jpg" alt="The Dougernaut"></a></li>
            <li><a href="#" title="I See "><img src="images/image-02.jpg" alt="I See You!"></a></li>
            <li><a href="#" title="Rock H"><img src="images/image-01.jpg" alt="Rock Hard Balls"></a></li>
            <li><a href="#" title="Bocce "><img src="images/image-02.jpg" alt="Bocce Ball"></a></li>
            <li><a href="#" title="Boris "><img src="images/image-01.jpg" alt="Boris "Tatooine""></a></li>
            <li><a href="#" title="Sneake"><img src="images/image-02.jpg" alt="Sneakers & Stilettos"></a></li>
        </ul>
        <ul class="polaroids" style="width:280px;">
            <li><a href="#" title="Roelan"><img src="images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="#" title="Discus"><img src="images/image-02.jpg" alt="Discussion"></a></li>
            <li class="messy"><a href="#" title="A Hear"><img src="images/image-01.jpg" alt="A Hearty Laugh"></a></li>
        </ul>
</body>

简单做出HTML5翻页效果文字特效

css实现3D立方体旋转特效的示例代码

详细介绍HTML5 3D衣服摇摆动画特效如何实现

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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：Le débordement de texte multiligne affiche des ellipses (...)Article suivant：Le débordement de texte multiligne affiche des ellipses (...)

Articles Liés

Voir plus