Button翻转特效练习
作者：互联网
地址是https://github.com/HerbertKarajan/css-js-animation.git 里面的001
里面用到了flex布局 ，伪元素的使用，和百分比的平移变换。以及attr（）属性利用
具体的说明在css里面。flex的话可以去看http://www.ruanyifeng.com/blog/2015/07/flex-examples.html。。
html5
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Button翻转</title>
<link rel="stylesheet" href="./Button.css">
</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>
html,body{
/*flex布局，这里height必须要设置，不设置不会页面居中，毕竟得需要容器去填充
*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: papayawhip;
height: 100%;
}
.box{
/*长和宽最好自己指定，使用默认的会让你的平移特效出现瑕疵，
例如： 出来半个字母啊，还是啥的*/
height: 50px;
width: 200px;
text-align: center;
font-size: 33px;
line-height: 50px;
border:2px solid #000;
}
.box span{
color: blue;
display:inline-block;
transition: 0.5s;
}
.box span:nth-child(odd){
/*odd为奇数号span*/
transform: translateY(100%);
}
.box span:nth-child(even){
/*偶数号*/
transform: translateY(-100%);
}
.box span::before{
/*CSS3的伪元素选择器*/
content: attr(data-text);
color: red;
position: absolute;
/*得是absolute，位置可以覆盖;*/
}
.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,特效,span,translateY,flex,Button,transform,100%,翻转 来源： https://blog.csdn.net/weixin_40118989/article/details/91338443