![這裏寫圖片描述]()
//html代碼
<body style="background-color: yellow">
<div class="box">
<span data-tetx="B">B</span>
<span data-tetx="U">U</span>
<span data-tetx="T">T</span>
<span data-tetx="T">T</span>
<span data-tetx="O">O</span>
<span data-tetx="N">N</span>
</div>
</body>
//css
.box{
width: 200px;
height: 60px;
margin: 100px auto;
border:1px solid #000;
background-color: aqua;
display: flex;
justify-content: space-around;
align-items: center;
overflow: hidden;
}
span{
display: block;
font-size: 30px;
color: navy;
transition: .3s ;
}
.box span:nth-child(even){
transform: translateY(-110%)
}
.box span:nth-child(odd){
transform: translateY(110%)
}
/* 獲取元素 */
span::before{
content: attr(data-tetx);
position: absolute;
color: red;
/* opacity: 0.8; */
}
.box span:nth-child(even)::before{
transform: translateY(110%)
}
.box span:nth-child(odd)::before{
transform: translateY(-110%)
}
.box:hover span{
transform: translateY(0)
}
//js基礎小複習
function foo1()
{
return {
bar: "hello"
};
}
function foo2()
{
return
{
bar: "hello"
};
}
答案： 不等價！！ 注意，第二個函數返回的是undefined
console.log(foo1()); // {bar : "hellp"}
console.log(foo2()); // undefined
這也是爲什麼函數返回對象時，或寫大括號時，把{寫在一邊，因爲第二個函數js會默認return後面返回的東西(是空),等價於
return undefined
{xxx}
//後面當然寫了也白寫
