微信小程序字体设置
1.设置字体,大小,在容器中的位置index.wxml中代码<view class="postion"><view class="font-settings">字体设置</view></view>index.wxss中代码.postion{display: flex;justify-content: cent...
·
1.设置字体,大小,在容器中的位置
index.wxml中代码
<view class="postion">
<view class="font-settings">字体设置</view>
</view>
index.wxss中代码
.postion{
display: flex;
justify-content: center;
}
.font-settings {
/*字体设置*/
font-family: FZShuTi;/*方正舒体*/
font-size: 40px;
text-align: center;/*字体位置*/
color: red;
/*容器设置*/
background-color: green;
width: 300px;
height: 50px;
}
效果
2.字体颜色渐变
index.wxml中代码
<view class="font-color-gradation">字体颜色渐变</view>
index.wxss中代码
.font-color-gradation2 {
font-size: 50px;
font-weight: bold;/*加粗*/
background: linear-gradient(to right, red, blue,green);/*左右渐变*/
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
效果
3.动态字体颜色
index.wxml中代码
<view class="view">动态字体颜色</view>
index.wxss中代码
.view{
font-size: 50px;
width: 300px;
color: red;
-webkit-animation: discoloration 5s infinite;
animation: discoloration 5s infinite;
}
@keyframes discoloration {
50% {color: blue;}
80%{color: green;}
100%{color: yellow;}
}
效果
更多推荐
已为社区贡献1条内容
所有评论(0)