利用CSS实现文字动态背景
实现思路
1.我们要实现的是文字动态背景,那首先就应该想到在文字的基础上添加图片背景,然后利用文字范围进行裁剪,裁剪掉文字以外的背景,最后利用这个css3中的关键帧实现让图片动起来。
2、实现步骤
(1)给公共样式区域设置长宽,文字动态背景最好让文字的粗细更粗。我们可以通过一下代码设置文字的粗细
font-weight: 900;
(2)设置背景图片,以文本的格式裁剪背景图片
background: url(./4102d0a26ea37cd58f7c38e3e4cc7781.jpeg);
(3)通过 background-clip属性用来定义元素背景的裁剪区域
background-clip: text;
(4) 以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉
-webkit-background-clip: text;
(5) 最后在写一个关键帧(Keyframe),来设置背景的定位,从0%到100%,通过动画animation来实现。
animation: dynamic 5s infinite alternate linear;
第一个参数:是动画名称
第二个参数:持续时间 必须带上时间单位
第三个参数:循环次数 infinite为无限循环,
第四个参数:alternate是动画先正常运行再反方向运行,并持续交替运行,
第五个参数:动画过渡方式 linear为线性过渡
附源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.text{
width: 600px;
font-size: 120px;
font-weight: 900;
background: url(./4102d0a26ea37cd58f7c38e3e4cc7781.jpeg);
/* 通过 background-clip属性用来定义元素背景的裁剪区域 */
background-clip: text;
/* 以盒子内的文字作为裁剪区域向外裁剪,文字之外的区域都将被裁剪掉 */
-webkit-background-clip: text;
/* 字体设置透明 */
color: transparent;
/* animaton绑定动画 动画名 时间 infinite循环 alternate播放方式 linear 线性*/
animation: dynamic 5s infinite alternate linear;
}
@keyframes dynamic {
0%{
background-position: 0%;
}
50%{
background-position: 60%;
}
100%{
background-position: 100%;
}
}
</style>
<body>
<div class="text">JavaSript</div>
</body>
</html>
显示效果