Heim  >  Artikel  >  Web-Frontend  >  CSS3 implementiert die Schaltflächennavigation mit einfacher Animation

CSS3 implementiert die Schaltflächennavigation mit einfacher Animation

高洛峰
高洛峰Original
2016-11-24 10:55:201278Durchsuche

Übergangseigenschaft: alle |. d36656ed359d1086fd898a20ed878b57[ ,d36656ed359d1086fd898a20ed878b57 Übergangs-CSS-Eigenschaften

keine: Geben Sie die CSS-Eigenschaften des Übergangs nicht an.

3fcb97bb666cd7884d4d3210fb47b5ef: Geben Sie die CSS-Eigenschaften für den Übergang an.
Beschreibung: www.2cto.com

Rufen Sie die Teilnahme ab oder legen Sie sie fest die Übergangseigenschaften des Objekts.

Standardwert ist: alle. Standardmäßig werden alle CSS-Eigenschaften verwendet, die umgestellt werden können.
Wenn mehrere Attributwerte angegeben werden, trennen Sie diese durch Kommas.
Die entsprechende Skripteigenschaft ist transitProperty.

HTML-Code lautet wie folgt:


CSS-Code lautet wie folgt:

Unterstützte Browser sind Firefox, Chrome, Opera und Safari nicht unterstützt für IE
<div class="content">
    <h2>Simple Animated Menu Using CSS3</h2>
    <h3>Example 1</h3>
    <ul class="nav">
        <li class="selected"><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">         <li><a href="http://www.php1.cn/">     </ul>
    <br /><br />
    <br /><br />
    <div style="clear:both;"></div>
    <h3>Example 2</h3>
<ul class="nav2">
    <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/">     <li><a href="http://www.php1.cn/"> </ul>
</div>

<style type="text/css">
* {
    margin:0;
    padding:0;
}
body {
    background:#eee;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
}
a {
    text-decoration:none;
}
h2, h3 {
    margin:0 0 20px;
    text-shadow:2px 2px #ffffff;
}
h2 {
    font-size:28px;
}
h3 {
    font-size:22px;
}
.content {
    padding:40px;
    width:500px;
    margin:30px auto;
}
.nav {
    list-style:none;
}
.nav li {
    float:left;
}
.nav a {
    position:relative;
    display:block;
    padding:4px 8px;
    border-bottom:2px solid #ccc;
    background:#f4f4f4;
    color:#999;
    -webkit-transition:all 200ms ease-out;
    -moz-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.nav a:hover {
    color:#000;
    background:#fff;
    border-color:#000;
    padding:8px;
    top:-4px;
}
.nav .selected a, .nav .selected a:hover {
    background:#444;
    color:#fff;
    border-color:#000;
}
.nav2 {
    list-style:none;
}
.nav2 li {
    float:left;
    position:relative;
}
.nav2 a {
    display:block;
    float:left;
    border:none;
    position:relative;
    height:22px;
    overflow:hidden;
}
.nav2 a strong, .nav2 a em {
    cursor:pointer;
    padding:4px 8px;
    font-weight:bold;
    font-style:normal;
    display:block;
    -webkit-transition:all 200ms ease-out;
    -moz-transition:all 200ms ease-out;
    -o-transition:all 200ms ease-out;
    transition:all 200ms ease-out;
}
.nav2 a strong {
    position:relative;
    top:0;
    left:0;
    color:#000;
    background:#fff;
}
.nav2 em {
    position:absolute;
    top:100%;
    background:#000;
    color:#fff;
}
.nav2 a:hover strong {
    top: -100%;
}
.nav2 a:hover em {
    top: 0;
}
</style>
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