一，成品圖
本人自學css3動畫特效，今天分享一個簡單的字節跳動的特效
字節跳動
二，實現步驟
我們先來嘗試一個字的跳動,我決定選取孤獨的孤字。
1： 第一步，消除瀏覽器默認樣式，並且在網頁上寫一個孤字。
2： 第二步，設置頁面背景色，設置字體樣式大小，並且居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #2d303a;
}
div{
text-align: center;
margin: 400px auto;
}
span{
font: normal 500 6rem 'Varela Round', sans-serif;
color: white;
}
</style>
</head>
<body>
<div>
<span>孤</span>
</div>
</body>
</html>
效果：
3： 第三步，利用animation屬性讓字跳起來。下面是style樣式代碼
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #2d303a;
}
div{
text-align: center;
margin: 400px auto;
}
span{
position: relative;
font: normal 500 6rem 'Varela Round', sans-serif;
color: white;
animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
top: 0px;
}
@keyframes bounce {
0% {
top: 0;
}
100% {
top: -1em;
}
}
</style>
4： 第四步，設置字體陰影，讓跳動更加立體。
修改bound動畫代碼塊：
@keyframes bounce {
0% {
top: 0;
text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
}
100% {
top: -1em;
text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
}
}
5： 多個字一起跳動，設置字體跳動延遲。
span:nth-child(1) {
animation-delay: 0s;
}
span:nth-child(2) {
animation-delay: 0.0833333333s;
}
span:nth-child(3) {
animation-delay: 0.1666666667s;
}
span:nth-child(4) {
animation-delay: 0.25s;
}
span:nth-child(5) {
animation-delay: 0.3333333333s;
}
span:nth-child(6) {
animation-delay: 0.4166666667s;
}
span:nth-child(7) {
animation-delay: 0.520s;
}
完成
代碼不夠健壯，沒有考慮文字過多的情況
完整代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
background-color: #2d303a;
}
div{
text-align: center;
margin: 400px auto;
}
span{
position: relative;
font: normal 500 6rem 'Varela Round', sans-serif;
color: white;
animation: bounce 0.75s cubic-bezier(0.05, 0, 0.2, 1) infinite alternate;
top: 0px;
}
span:nth-child(1) {
animation-delay: 0s;
}
span:nth-child(2) {
animation-delay: 0.0833333333s;
}
span:nth-child(3) {
animation-delay: 0.1666666667s;
}
span:nth-child(4) {
animation-delay: 0.25s;
}
span:nth-child(5) {
animation-delay: 0.3333333333s;
}
span:nth-child(6) {
animation-delay: 0.4166666667s;
}
span:nth-child(7) {
animation-delay: 0.520s;
}
@keyframes bounce {
0% {
top: 0;
text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
}
100% {
top: -1em;
text-shadow: rgba(255, 255, 255, 0.9) 0 1em 0.35em;
}
}
</style>
</head>
<body>
<div>
<span >注</span>
<span >定</span>
<span >孤</span>
<span >獨</span>
<span >終</span>
<span >老</span>
</div>
</body>
</html>