首页 > 代码库 > CSS 几款比较常用的翻转特效

CSS 几款比较常用的翻转特效

2024-09-03 00:16:09   218人阅读

第一个：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>
<div class="aa"></div>
</body>

 第二种：照片墙悬挂效果

<style>
body{font-family:Tahoma,Helvetica,"\5b8b\4f53","Arial",sans-serif;font-size:12px;color:#fff;}
            body,div,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="http://www.mamicode.com/#" title="Roelan"><img src="http://www.mamicode.com/images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Discus"><img src="http://www.mamicode.com/images/image-02.jpg" alt="Discussion"></a></li>
            <li><a href="http://www.mamicode.com/#" title="A Hear"><img src="http://www.mamicode.com/images/image-01.jpg" alt="A Hearty Laugh"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Evil M"><img src="http://www.mamicode.com/images/image-02.jpg" alt="Evil Matt Coding"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Scribb"><img src="http://www.mamicode.com/images/image-01.jpg" alt="Scribbles"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Amanda"><img src="http://www.mamicode.com/images/image-02.jpg" alt="Amanda Glares..."></a></li>
            <li><a href="http://www.mamicode.com/#" title="The Do"><img src="http://www.mamicode.com/images/image-01.jpg" alt="The Dougernaut"></a></li>
            <li><a href="http://www.mamicode.com/#" title="I See "><img src="http://www.mamicode.com/images/image-02.jpg" alt="I See You!"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Rock H"><img src="http://www.mamicode.com/images/image-01.jpg" alt="Rock Hard Balls"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Bocce "><img src="http://www.mamicode.com/images/image-02.jpg" alt="Bocce Ball"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Boris "><img src="http://www.mamicode.com/images/image-01.jpg" alt="Boris "Tatooine""></a></li>
            <li><a href="http://www.mamicode.com/#" title="Sneake"><img src="http://www.mamicode.com/images/image-02.jpg" alt="Sneakers & Stilettos"></a></li>
        </ul>
        <ul class="polaroids" style="width:280px;">
            <li><a href="http://www.mamicode.com/#" title="Roelan"><img src="http://www.mamicode.com/images/image-01.jpg" alt="Roeland!"></a></li>
            <li><a href="http://www.mamicode.com/#" title="Discus"><img src="http://www.mamicode.com/images/image-02.jpg" alt="Discussion"></a></li>
            <li class="messy"><a href="http://www.mamicode.com/#" title="A Hear"><img src="http://www.mamicode.com/images/image-01.jpg" alt="A Hearty Laugh"></a></li>
        </ul>
</body>

CSS 几款比较常用的翻转特效


联系
我们