css按钮添加文字,【CSS练习】纯 CSS 创作一个按钮文字滑动特效

image.png

【知识点】

allow proprietary information to be exchanged between the HTML and its DOM representation by scripts.

使用 data-* 属性来嵌入自定义数据，是 HTML5 中的新属性。

存储的(自定义)数据能够被页面的 JavaScript 中利用，以创建更好的用户体验(不进行 Ajax 调用或服务器端数据库查询)

属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符

属性值可以是任意字符串

伪类选择器，匹配父元素中的第 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/

CSS3 transform 属性

transform: none|transform-functions;

transform:rotate(7deg);

transform:translateY(100px);

用来给指定的元素的内容前面插入新的内容

通过 content 属性来为一个元素添加修饰性的内容。

q::before { content: open-quote }

q::after { content: close-quote }

h1::before { content: "Chapter "; }

【代码】

slice world

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;

}

B

U

T

T

O

N