用到的css属性介绍及效果展示
文字渐变
1. linear-gradient
是 CSS 中的一个背景属性,用于创建线性渐变背景。通过 linear-gradient
,可以在元素的背景中创建平滑的颜色过渡,从一个颜色到另一个颜色,形成一个渐变效果.
2. background-clip
,用于控制背景图片或颜色的绘制区域。通过设置 background-clip
,可以定义背景的绘制范围,使背景图片或颜色只在指定的区域内绘制,而在其他区域不显示。
文字交融展开
letter-spacing
是一个用于调整字符之间水平间距的 CSS 属性。通过改变字符之间的间距
效果展示
代码
html部分
<div class="packing">
<div class="content">
<div class="text">Hello Wordl</div>
</div>
</div>
css部分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 100px 0;
width: 100%;
height: 100vh;
background: linear-gradient(to right, #666, #000);
/* 添加透视 */
perspective: 1000px;
}
.packing {
margin: 0 auto;
width: 70%;
}
.packing>.content {
/* 文本渐变色 */
background: linear-gradient(90deg, #fcdf8a, #f38381);
-webkit-background-clip: text;
background-clip: text;
text-align: center;
color: transparent;
font-size: 80px;
/* 开启3d效果及动画 */
transform-style: preserve-3d;
animation: showup 3s forwards;
}
/* 动画 */
@keyframes showup {
from {
transform: rotateY(85deg);
letter-spacing: -50px;
}
to {
transform: rotateY(0deg);
letter-spacing: 10px;
}
}