總結：
- 缺點：
- css animation實現起來略有卡頓，除非增加足夠多的幀數，或者利用requestAnimationFrame進行計算
- 可以看到text_wrap下面又包了層
<p> 標籤，主要是因爲border和text的動畫次數不同，這點沒有想到更好的方法
- 文字漸變色：
- 使用CSS漸變【repeating-xx-gradient可以做出酷炫的效果】
- 漸變是
<image> 類型的，所以像是color類的屬性是無法使用漸變的
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: radial-gradient(circle at 20%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
-webkit-filter: blur(5px);
filter: blur(5px);
全部代碼
<!DOCTYPE html>
<html>
<head>
<title>mouse_blur</title>
<meta charset="utf-8">
<style type="text/css">
.food_pic{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 550px;
height: 550px;
background: url(food.jpg) no-repeat;
animation: .5s img_blur 1s ease-in-out forwards;
}
.text_wrap{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 100px;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
font: bold 30px '微軟雅黑';
animation: 2s border_delay 2s ease-in-out forwards;
}
.text_wrap p{
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: 1s text_anim 2s ease-in-out infinite alternate-reverse;
}
.text_wrap:before, .text_wrap:after{
position: absolute;
left: 0;
display: block;
content: '';
width: 100%;
height: 3px;
animation: 2s border_anim 2s ease-in-out forwards;
}
.text_wrap:before{
top: 0;
}
.text_wrap:after{
bottom: 0;
}
@keyframes img_blur{
100% {
-webkit-filter: blur(5px);
filter: blur(5px);
}
}
@keyframes text_anim{
0% {
background-image: radial-gradient(circle at 20%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
}
25% {
background-image: radial-gradient(circle at 30%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
}
50% {
background-image: radial-gradient(circle at 45%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
}
50% {
background-image: radial-gradient(circle at 55%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
}
100% {
background-image: radial-gradient(circle at 70%, #ACCD0C, #FCED2E 15%, #F4B4CF 45%, #009FE7);
}
}
@keyframes border_anim{
0% {
background: linear-gradient(90deg, rgba(0,0,0,0), #fff, rgba(0,0,0,0));
}
50% {
background: linear-gradient(90deg, rgba(0,0,0,0), #fff 25%, #fff 75%, rgba(0,0,0,0));
}
100% {
background: #fff;
}
}
@keyframes border_delay{
100% {
border-right: 3px solid #fff;
border-left: 3px solid #fff;
}
}
</style>
</head>
<body>
<div class="food_pic"></div>
<div class="text_wrap"><p>來吃麪包圈~~</p></div>
</body>
</html>
