我該如何在導航欄中爲這些元素設置動畫效果：https：//riot.design/en/？

Question

嘿我嘗試做一些喜歡這裏的導航欄上的效果： https://riot.design/en/ 這是我得到的最接近，請幫助

.button_sliding_bg { 
 
    color: #31302B; 
 
    background: #FFF; 
 
    padding: 12px 17px; 
 
    margin: 25px; 
 
    font-family: 'OpenSansBold', sans-serif; 
 
    border: 3px solid #31302B; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    letter-spacing: 1px; 
 
    text-transform: uppercase; 
 
    border-radius: 2px; 
 
    display: inline-block; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    box-shadow: inset 0 0 0 0 #31302B; 
 
    -webkit-transition: all ease 0.8s; 
 
    -moz-transition: all ease 0.8s; 
 
    transition: all ease 0.8s; 
 
} 
 
.button_sliding_bg:hover { 
 
    box-shadow: inset 0 100px 0 0 #31302B; 
 
    color: #FFF; 
 
}

<div class="button_sliding_bg">HELLOW</div>

Answer 1

$(".div1").on("mouseover",function(){ 
 
    var $this=$(this).parent(); 
 
$this.find(".div2").slideDown("fast"); 
 
$this.find(".div1").slideUp("fast"); 
 
}); 
 

 
$(".div2").on("mouseleave",function(){ 
 
    var $this=$(this).parent(); 
 
    $this.find(".div1").slideDown("fast"); 
 
    $this.find(".div2").slideUp("fast"); 
 
});

body{ 
 
background-color:#0C2663; 
 
} 
 
.element{ 
 
float:left; 
 
width:65px; 
 
margin:0 10px; 
 

 
} 
 
.element div{ 
 
width:60px; 
 
margin-top:5px; 
 
cursor:pointer; 
 
padding:5px; 
 
text-align:center; 
 

 
} 
 
.element div:last-child{ 
 
    background-color:#fff; 
 
    color:#0C2663; 
 
    display:none; 
 
} 
 
.element div:first-child{ 
 
    color:#fff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="element"> 
 
<div class="div1">Home</div> 
 
<div class="div2">Home</div> 
 
</div> 
 
<div class="element"> 
 
<div class="div1">About</div> 
 
<div class="div2">About</div> 
 
</div> 
 
<div class="element"> 
 
<div class="div1">Portfolio</div> 
 
<div class="div2">Portfolio</div> 
 
</div> 
 
<br>

Answer 2

這應該爲你工作。該概念依賴於CSS transform: translate和transform: rotate屬性來創建翻轉立方體效果。

希望這會有所幫助！

body { 
 
    padding-top: 20px; 
 
    background: #0B1F5C; 
 
    color: white; 
 
    text-transform: uppercase; 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    -webkit-perspective: 1000px; 
 
} 
 

 
.flip-box { 
 
    -webkit-transition: -webkit-transform .5s; 
 
    transition: transform .5s; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    width: 30%; 
 
    text-align: center; 
 
    margin: 0 auto; 
 
    height: 100px; 
 
} 
 

 
.flip-box:hover { 
 
    -webkit-transform: rotateX(90deg); 
 
    transform: rotateX(90deg); 
 
} 
 

 
.face1, 
 
.face2 { 
 
    background: #0B1F5C; 
 
    border: 1px solid #0B1F5C; 
 
    height: 100px; 
 
} 
 

 
.face1 { 
 
    -webkit-transform: translateZ(100px); 
 
    transform: translateZ(100px); 
 
} 
 

 
.face2 { 
 
    -webkit-transform: rotateX(-90deg) translateZ(-100px); 
 
    transform: rotateX(-90deg) translateZ(-100px); 
 
    font-size: 25px; 
 
    background: white; 
 
    color: #0B1F5C; 
 
}

<div class="flip-box"> 
 
    <div class="face1"> 
 
    <h1>Home</h1> 
 
    </div> 
 
    <div class="face2"> 
 
    <h2>Home</h2> 
 
    </div> 
 
</div>

Answer 3

我用你提到的創造這個給你的鏈接鉻督察。請提出問題，其答案也可以幫助其他人。

通知，旁邊的CSS3變換特技是

.roll跨度：後

，所述懸停的元件的數據標題屬性的內容將被獲取並施加到內容屬性：

.roll span:after { 
content: attr(data-title); 
} 

<span data-title="Home">Home</span>  

body{ 
 
    background-color:grey; 
 
} 
 
.navbar .navbar-inner { 
 
\t margin-top: 80px; 
 
} 
 

 
.navbar .nav { 
 
\t float: right; 
 
\t margin-right: 0; 
 
} 
 

 
.navbar .nav li { 
 
\t display: inline-block; 
 
\t float: none; 
 
\t overflow: hidden; 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.navbar-nav>li>a { 
 
\t padding-top: 13px; 
 
\t padding-bottom: 7px; 
 
} 
 

 
.navbar .nav li:last-child a { 
 
\t padding-right: 0; 
 
} 
 

 
.lt-ie8 .navbar .nav li { 
 
\t display: block; 
 
\t float: left; 
 
} 
 

 
.roll { 
 
\t display: inline-block; 
 
\t overflow: hidden; 
 
\t z-index: 200; 
 
\t position: relative; 
 
\t vertical-align: top; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t -webkit-perspective: 400px; 
 
\t -moz-perspective: 400px; 
 
\t -webkit-perspective-origin: 50% 50%; 
 
\t -moz-perspective-origin: 50% 50%; 
 
} 
 

 
.roll span { 
 
\t display: block; 
 
\t position: relative; 
 
\t padding: 0 2px; 
 
\t -webkit-transition: all 400ms ease; 
 
\t -moz-transition: all 400ms ease; 
 
\t pointer-events: none; 
 
\t -webkit-pointer-events: none; 
 
\t -webkit-transform-origin: 50% 0%; 
 
\t -moz-transform-origin: 50% 0%; 
 
\t -webkit-transform-style: preserve-3d; 
 
\t -moz-transform-style: preserve-3d; 
 
\t overflow: hidden; 
 
\t height: 18px; 
 
} 
 

 
a.roll:hover span { 
 
\t overflow: visible; 
 
\t -webkit-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
 
\t -moz-transform: translate3d(0px, 0px, -30px) rotateX(90deg); 
 
} 
 

 
.roll span:after { 
 
\t content: attr(data-title); 
 
\t display: block; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 1px; 
 
\t padding: 0 2px; 
 
\t color: #323C46; 
 
\t background: #fff; 
 
\t -webkit-transform-origin: 50% 0%; 
 
\t -moz-transform-origin: 50% 0%; 
 
\t -webkit-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
 
\t -moz-transform: translate3d(0px, 105%, 0px) rotateX(-90deg); 
 
}

<body> 
 
<div class="navbar"> 
 

 
<ul id="menu-primary-navigation-en" class="nav navbar-nav"> 
 

 
    <li class="active menu-home"> 
 
     <a href="https://riot.design/en/" class=" roll"><span data-title="Home">Home</span></a> 
 
    </li> 
 

 
    <li class="menu-about"> 
 
     <a href="https://riot.design/en/about/" class=" roll"><span data-title="About">About</span></a> 
 
    </li> 
 

 
    <li class="menu-portfolio"> 
 
    <a href="/en/portfolio/" class=" roll"><span data-title="Portfolio">Portfolio</span></a> 
 
    </li> 
 

 
    <li class="menu-contacts"> 
 
    <a href="https://riot.design/en/contacts/" class=" roll"><span data-title="Contacts">Contacts</span></a> 
 
    </li> 
 

 
</ul> 
 
</div> 
 

 
</body>