CSS3 文本内的泡沫漂浮动画
大致思路:1、设置一段文字,将这段文字透明化(-webkit-text-fill-color: transparent;)
2、将该背景剪切,剪切后只留下文字背景
3、添加背景图,然后设置动画效果与关键帧
<h1 class="title">happy!</h1>
css:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
body {
background-color: #73cde7;
}
.title {
font-size: 200px;
background-color: #011f42;
text-align: center;
background-image: url(./img/bubbles.png);
/* 背景不平铺 */
background-repeat: repeat;
position: absolute;
top: 50%;
left: 50%;
/* 通过css3的变形让盒子水平居中-----让盒子水平方向向左移动自身宽度的50%和 让盒子水平方向向左移动自身高度的50%; */
transform: translate(-50%, -50%);
/* 英文文本变成大写 */
text-transform: uppercase;
/* 文本字体变为透明 */
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
/* 背景裁切 */
-webkit-background-clip: text;
-moz-background-clip: text;
-o-background-clip: text;
-ms-background-clip: text;
/* css3动画效果 animate-background自定义动画名称 12s动画完成时间 linear 匀速播放 infinite无限循环 */
animation: animate-background 12s linear infinite;
}
/* 设置关键帧 */
@keyframes animate-background {
0% {
background-position: 0 0;
}
100% {
background-position: 0 -300px;
}
}
实现效果:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果