记录常用CSS

图片旋转360deg

<image  class="cover-anim" 
	style="animation-play-state: {{isPlaying? 'running': 'paused'}};">
</image>

@keyframes coverRoute {
    from {
        transform: rotate(0deg);
    }
    to {
	transform: rotate(360deg);
    }
}

/* 图片旋转动画 */
.cover-anim {
    animation: coverRoute 16s linear infinite;
}

去除scroll-view的滚动条

/* 二种方式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

::-webkit-scrollbar {
    display: none;
}

插槽的使用

<view class="slot">
    <slot></slot>
</view>
<view class="default">
    <text>{{ rightText }}</text>
</view>

/* :empty 来判断插槽是否为空 微信小程序默认不显示插槽里面的东西
   但是二个都会显示,对默认的view进行wx:if处理  */
.slot:empty + .default{
    display: block;
}

.default {
    display: none;
}

让字体显示一行,超出隐藏并显示点点点

.father {
    overflow: hidden;
}

.son {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

显示多行,超出隐藏,显示点点点

<div class="ellipsis-multiline">
这里是一段很长的文本，如果超出三行，则显示省略号。这样可以保持布局的整洁，同时用户可以知道还有更多的内容。
</div>

.ellipsis-multiline{
     display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

对多个插槽的使用

// 使用多个插槽必须配置 multipleSlots: true
options: {
    multipleSlots: true
},

<slot name='left'></slot>
/* 替换 */
<view slot='center'>
    <view>xxx</view>
</view>

实现毛玻璃效果

.bg-blur {
    /* z-index必须设置position */
    z-index: -1;
    background-color: rgba(0,0,0,.5);
    backdrop-filter: blur(12rpx);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

设置100vw视口

.menu-list {
	/* 100%视口 */
	width: 100vw;
	/* 设置如何处理元素内的空白, 不换行 元素就会超出 */
	white-space: nowrap;
	position: relative;
	left: -20rpx;
}

使用伪元素before在文字前加上图片

.count {
  padding-left: 36rpx;
  position: relative;
}

/* css中某些不能用本地图片 转为base64 */
.count::before {
    content: '';
    width: 30rpx;
    left: -2rpx;
    top: 4rpx;
    height: 24rpx;
    background-size: cover;
    position: absolute;
    background-image: url("");
}