1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

扩展后地址：https://scrimba.com/c/cJkzMfd

HTML代码：

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div class="animation">唉，没有啥新想法添加。。。</div>
        <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>
        <script src="index.pack.js"></script>
        <script>
           /* alert("唉，没有啥新想法添加。。。"); */
        </script>
    </body>
</html>

css代码：

.animation{
   position: absolute; 
   top:0px;
   /* 让字体位于窗口顶部右边外围 这里的数据是死的*/
   right: -210px;
   /* 
        规定动画的名称
        规定动画的时长
        规定动画的次数
    */
   animation:mymove 10s infinite;
   animation-delay:0s;

    /*Safari and Chrome 兼容*/
    -webkit-animation:mymove 10s infinite;
    -webkit-animation-delay:0s;
}
@keyframes mymove{
    from {
        left:100%;
    }
    to {
        left:-200px;
    }
    
}
@-webkit-keyframes mymove /*Safari and Chrome*/{
    from {left:100%;}
    to {left:-200px;}
    
}

/* 按钮居中 */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 对于超出的内容隐藏 */
    overflow: hidden;
}
/* 设置按钮的尺寸和文字样式 */
.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;
}
/*把字母交错地显示在按钮容器之外，第奇数个元素显示在上，第偶数个元素显示在下：*/

.box span:nth-child(odd) {
    /* Y轴向上平移自身高度单位 */
    transform: translateY(-100%);
}

.box span:nth-child(even) {
    transform: translateY(100%);
}
/* 用伪元素为每个字母增加一个副本：*/
.box span::before {
    /* attr 的解说 http://www.runoob.com/cssref/pr-gen-content.html */
    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 span {
    transition: 1s;
}

1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

猜你喜欢