Heim > Artikel > Web-Frontend > Die am häufigsten verwendeten CSS-Flip-Effekte
Die am häufigsten verwendeten CSS-Flip-Effekte
- PHPzOriginal
- 2017-03-24 16:49:191972Durchsuche
第一个：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>
相关文章：
Das obige ist der detaillierte Inhalt vonDie am häufigsten verwendeten CSS-Flip-Effekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Mehrzeiliger Textüberlauf zeigt Ellipsen an (…)Nächster Artikel：Mehrzeiliger Textüberlauf zeigt Ellipsen an (…)
In Verbindung stehende Artikel
Mehr sehen- Warum funktioniert CSS mit „erfundenen“ Elementen?
- Wie konvertiert man RGB in RGBA mit Transparenz basierend auf der niedrigsten Farbkomponente?
- So ändern Sie die Schaltflächenfarbe beim Hover: Was ist falsch und wie lässt sich das Problem beheben?
- Machen wir das Web mit nur einer Installationszeile responsive? Ich suche Mitwirkende!
- Wie erreicht man exakt gleiche Spaltenbreiten im CSS-Raster?