仿有趣的css小demo 与 复习一点 js基础知识：return 的使用
//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)
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
//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}
//后面当然写了也白写