1.純 CSS 創作一個按鈕文字滑動特效 + 彈幕（殘缺）
阿新 • • 發佈：2018-12-08
原文地址：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; }