一、字体渐变色
<h2 class="text-one">
生活不会一成不变,即使变化来的如此慢,我还是一如既往热爱生活
</h2>
.text-one {
font-size: 48px;
text-align: left;
fill: transparent;
letter-spacing: 1.2px;
font-weight: 700;
border: 0 solid #e5e7eb;
background-image: linear-gradient(270deg, #4239ff, #ff4493 48%, #ffd34d);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
二、边框渐变色
<el-col :span="24">
<el-input
class="textarea-one"
type="textarea"
:rows="3"
maxlength="500"
resize="none"
show-word-limit
placeholder="请输入内容"
v-model="textarea"
clearable
>
</el-input>
</el-col>
.textarea-one {
position: relative;
padding: 2px;
color: #fff;
border: 4px solid transparent;
outline: none;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222),
linear-gradient(96deg, #ffb7bb, #e67ad1 49%, #7471fb);
/deep/ .el-textarea__inner {
width: 100%;
border: none;
color: #fff;
outline: none;
background: transparent;
}
/deep/ .el-input__count {
color: red;
background: transparent;
position: absolute;
font-size: 12px;
bottom: 5px;
resize: vertical;
line-height: 12px;
right: 10px;
}
/deep/ .el-textarea {
box-shadow: none; //去除白边
&:focus {
box-shadow: 0 0 0 1px var(--el-input-focus-border-color) inset; //输入内容原本样式
}
&:active {
border: none;
}
}
}
3、按钮渐变色
el-button class="startBtn">Start crating</el-button>
.startBtn {
width: 200px;
height: 64px;
animation: none;
border-style: none;
border-radius: 10px;
font-weight: 500;
text-transform: none;
color: hsla(0, 0%, 100%, 0.95);
background-image: linear-gradient(292deg, #ffb7bb, #e67ad1 50%, #7471fb);
}
4、svg图标上下跳动
<div class="animation">
<svg-icon icon-class="up" id="rotate"></svg-icon>
</div>
.animation {
position: relative;
height: 80px;
animation-name: jump;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
#rotate {
transform: rotate(180deg);
}
}
@keyframes jump {
0% {
top: 0;
}
50% {
top: -10px;
}
100% {
top: 0;
}
}