【CSS练习】纯 CSS 创作一个按钮文字滑动特效
2019-03-27 本文已影响0人
奔跑的程序媛A
image.png
【知识点】
1. data-*
allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.
使用 data-* 属性来嵌入自定义数据，是 HTML5 中的新属性。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）
- 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
2. nth-child
伪类选择器，匹配父元素中的第 n 个子元素，元素类型没有限制。
tr:nth-child(odd) or tr:nth-child(2n+1)
tr:nth-child(even) or tr:nth-child(2n)
ul li:nth-child(5) {
color: #ccc;
}#选择第5个标签元素
odd/even/<An+B>
3. translateY
CSS3 transform 属性
transform: none|transform-functions;
transform:rotate(7deg);
transform:translateY(100px);
4. ::before
用来给指定的元素的内容前面插入新的内容
- 通过
content属性来为一个元素添加修饰性的内容。
q::before { content: open-quote }
q::after { content: close-quote }
h1::before { content: "Chapter "; }
【代码】
<!--纯 CSS 创作一个按钮文字滑动特效-->
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>slice world</title>
<style type="text/css">
html, body{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: papayawhip;
}
.box {
width: 200px;
height: 60px;
border: 2px solid black;
text-align: center;
font-size: 30px;
line-height: 60px;
font-family: sans-serif;
}
.box span{
display: inline-block;
color: blue;
transition: 0.5s;
}
.box span:nth-child(odd){
transform: translateY(100%);
}
.box span:nth-child(even){
transform: translateY(-100%);
}
.box span::before{
content: attr(data-text);
position: absolute;
color: red;
}
.box span:nth-child(odd)::before{
transform: translateY(-100%);
}
.box span:nth-child(even)::before{
transform: translateY(100%);
}
.box:hover span{
transform: translateY(0);
}
.box {
overflow: hidden;
}
</style>
</head>
<body>
<div class = "box">
<span data-text = "B">B</span>
<span data-text = "U">U</span>
<span data-text = "T">T</span>
<span data-text = "T">T</span>
<span data-text = "O">O</span>
<span data-text = "N">N</span>
</div>
</body>
</html>
