总结:
- 缺点:
- 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>