<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我好菜啊</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
#scene{
position: relative;
width: 400px;
height: 400px;
background-color: #000;
color:#fff;
text-align: center;
font-weight: 700;
font-size: 72px;
}
#scene div.layer{
width:400px;
height: 100px;
position: absolute;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
}
.blueFlash{
color: rgb(1, 205, 232);
-webkit-animation: blueFlash .9s infinite both;
}
.pinkFlash{
color: rgb(255, 37, 233);
-webkit-animation: pinkFlash .9s infinite both;
}
@-webkit-keyframes pinkFlash{
0%{
opacity:0;
transform: matrix(1, 0, 0, 1, 0, 0);
}
62.5%{
opacity:0;
transform: matrix(1, 0, 0, 1, 2, 2);
}
75%{
opacity:0;
transform: matrix(1, 0, 0, 1, 3, 3);
}
87.5%{
opacity:1;
transform: matrix(1, 0, 0, 1, 4, 4);
}
100%{
opacity:0;
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
@-webkit-keyframes blueFlash{
0%{
opacity:0;
transform: matrix(1, 0, 0, 1, 0, 0);
}
12.5%{
opacity:0;
transform: matrix(1, 0, 0, 1, 2, 2);
}
25%{
opacity:0;
transform: matrix(1, 0, 0, 1, 3, 3);
}
37.5%{
opacity:1;
transform: matrix(1, 0, 0, 1, 4, 4);
}
50%{
opacity:0;
transform: matrix(1, 0, 0, 1, -1, -1);
}
62.5%{
opacity:0;
transform: matrix(1, 0, 0, 1, -2, -2);
}
75%{
opacity:0;
transform: matrix(1, 0, 0, 1, -3, -3);
}
87.5%{
opacity:1;
transform: matrix(1, 0, 0, 1, -4, -4);
}
100%{
opacity:0;
transform: matrix(1, 0, 0, 1, 0, 0);
}
}
</style>
</head>
<body>
<div id="scene">
<div class="layer">
<div class="text_holder pinkFlash">我好菜啊</div>
</div>
<div class="layer">
<div class="text_holder blueFlash">我好菜啊</div>
</div>
<div class="layer">
<div class="text_holder">我好菜啊</div>
</div>
</div>
</body>
</html>
一個小玩意
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
Excel甘特
1、數據 2、全選日期(從8到22的所有日期) 3、爲全選日期新增規則 規則1(當前日期>=開始日期，當前日期<=結束日期) 公式裏面$符號去掉格式如下 格式化如下 點確定如下 規則2(超過當前日期)