css样式相关

隐藏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选中样式

/*checkbox 选项框大小  */
.tui-checkbox .wx-checkbox-input {
	width: 38rpx;
	height: 38rpx;
}
/*checkbox选中后样式  */
.tui-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background: #F8C971;
	width: 38rpx !important;
	height: 38rpx !important;
  border: none;
}
/*checkbox选中后图标样式  */
.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);
  }
}