隐藏select下拉框右侧默认图标替换为自定义图标
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
background: url('static/images/nav-bread.png') no-repeat scroll right center transparent;
padding-right: 15px; //非必要,可视情况而定
background-size: 7px; //调整自定义图标大小(宽度,高度)
文字淡入淡出
.fade-in-out{
opacity: 0;
animation: fade-in-out 3s linear forwards;
}
@keyframes fade-in-out{
0% {
opacity: 0;
left: 100px;
}
25% {
opacity: 1;
left: 50px;
}
75% {
opacity: 1;
left: 200px;
}
100% {
opacity: 1;
left: 200px;
}
}
自定义微信小程序checkbox选中样式
.tui-checkbox .wx-checkbox-input {
width: 38rpx;
height: 38rpx;
}
.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
background: #F8C971;
width: 38rpx !important;
height: 38rpx !important;
border: none;
}
.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
width: 30rpx;
height: 30rpx;
line-height: 30rpx;
text-align: center;
font-size: 20rpx;
color: #fff;
background: transparent;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
页面背景色渐变(默认由上至下)
background: linear-gradient(#79E9E9, #B6F3F3, #F1FEFD);
页面元素无限旋转
.rotate image{
width: 370rpx;
height: 300rpx;
animation: rotate 4s linear infinite;
border-radius: 50%;
}
@keyframes rotate{
from{
transform: rotate(0deg);
}
to{
transform: rotate(359deg);
}
}