css特殊操作和效果

作者: 瑟闻风倾 | 来源:发表于2020-12-29 12:59 被阅读0次

css特殊操作和效果
伪类和伪元素
jQuery
css中的伪类和伪元素
详解 CSS 属性 - 伪类和伪元素的区别
css伪类与伪元素
伪类与伪元素的区别？
(转)详解 CSS 属性 - 伪类和伪元素的区别
详解 CSS 属性 - 伪类和伪元素的区别
css伪元素与伪类的区别

<view class="uni-flex uni-column" style="text-align: left;">
    <text>合&emsp;格：{{qualifiedQuantity}}</text>
    <text>不合格：{{unqualifiedQuantity}}</text>
</view>

全角空格

(2) css文字竖排显示

<view>
    <button style="align-self: center;writing-mode: tb;" >质检合格</button>
</view>

(3) 元素横向排列的方式
参考1、参考2

(4) 隐藏

(5) 属性相关

white-space：处理空白或换行

image.png
word-wrap：允许长单词换行

image.png
word-break：实现在任意位置换行

image.png
overflow：处理内容溢出

image.png

text-overflow：处理文本溢出
image.png

(6) 阴影

四周阴影

<view class="shape-circle uni-flex uni-column justify-center align-center margin-tb-sm">
    <view class="text-lg">{{_i18n.getLanguage().device.machine}}</view>
    <view>{{lanObj.online}}/{{lanObj.total}}</view>
    <view class="text-xxl text-bold">{{onlineNum}} / {{machineNum}}</view>
</view>

.shape-circle {
    border-radius: 50%;
    // border: 3px #FFFFFF solid;
    width: 400upx;
    height: 400upx;
    background-color: #00A9E2;
    // box-shadow: 0 -1.5px 5px rgba(0, 0, 0, 0.1);
    // box-shadow: darkgrey 0px 0px 30px 5px;
    box-shadow: #FFFFFF 0px 0px 30px 5px;
}

image.png

(7) 透明度

.bg-olive {
    background-color: #8dc63f; 
    opacity: 0.7; 
    color: #ffffff;
}

或

.bg-olive {
    /* background-color: #8dc63f; */
    background:rgba(141,198,63,0.7);//最后一个取值0-1，越小越透明
    color: #ffffff;
}

(8) 渐变 background-image: repeating-linear-gradient(red, yellow 10%, green 20%);

.grad {
  background-color: red; /* 浏览器不支持的时候显示 */
  // background-image: linear-gradient(to top,white,#00A9E2);
  background-image: linear-gradient(to top,white 15%,#ADD8E6 55%, #00A9E2 100%);
  //background-image: linear-gradient(bottom,white 15%,#ADD8E6 55%, #00A9E2 100%);
}

关于 css 不均匀渐变百分比：百分比表示指定颜色的标准中心线位置，百分比之间是过渡色，如果百分比位置之间有重叠会失去渐变过渡色。

比如background: linear-gradient(red 10%, green 85%, blue 90%)，其中：
10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。
85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。
90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。
10% 到 85% 是 red-green 的过渡色，85%-90% 是 green-blue 的过渡色。

比如background: linear-gradient(red 0%, green 50%, blue 50%)和 background: linear-gradient(red 0%, green 50%, blue 10%)的效果一样。这可能是因为百分比位置之间有重叠才失去渐变过渡色，另渲染有一定先后顺序吧（姑且这么认为）。

(9) border: 1px solid rgba(0, 0, 0, 0.1);
元素的边框为 1 像素宽、实线、颜色使用 rgba 来表达。其中，rgba 是 CSS3 中的属性。rgba 括号中前 3 个数字代表着 red green blue 三种颜色的 rgb 值（0-255），最后一个是设定这个颜色的透明度即 alpha 值。范围从 0 到 1，越接近 1，代表透明度越低。
(10) 背景混合 mix-blend-mode

image.png

<template>
    <view class="container">
        <view class="right-top-sign"></view>
        <view class="left-bottom-sign"></view>
        <view class="left-top-sign">JACK IOT</view>
        <!-- <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:350upx;mix-blend-mode: multiply;"></image> -->
        <image src="../../static/loading-black.gif" mode="aspectFit" class="gif-black response" style="height:350upx;mix-blend-mode: screen;"></image>
        <!-- <view class="wrapper">
            <view class="left-top-sign">JACK IOT</view>
            <view class="welcome">
                欢迎回来！
            </view>
            <view class="center-content uni-flex justify-center align-center">
                <image src="../../static/loading-white.gif" mode="aspectFit" class="gif-white response" style="height:240upx;"></image>
            </view>
        </view> -->
    </view>
</template>
<style lang='scss'>
page{
    /* background: #fff; */
    /* background: #00A9E2; */
    /* background-image: linear-gradient(45deg, #1F9BDD, #25ABC9); */
    /* background-image: linear-gradient(45deg, #0081ff, #1cbbb4); */
}
.container{
    /* 在container中定义background-image而不是在page中,解决在app端动态图和背景融合实效的问题 */
    background-image: linear-gradient(45deg, #0081ff, #1cbbb4);
    padding-top: 115px;
    position:relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}
.right-top-sign{
    position:absolute;
    top: 80upx;
    right: -30upx;
    z-index: 95;
    &:before, &:after{
        display:block;
        content:"";
        width: 400upx;
        height: 80upx;
        background: #b4f3e2;
    }
    &:before{
        transform: rotate(50deg);
        border-radius: 0 50px 0 0;
    }
    &:after{
        position: absolute;
        right: -198upx;
        top: 0;
        transform: rotate(-50deg);
        border-radius: 50px 0 0 0;
        /* background: pink; */
    }
}
.left-bottom-sign{
    position:absolute;
    left: -270upx;
    bottom: -320upx;
    border: 100upx solid #d0d1fd;
    border-radius: 50%;
    padding: 180upx;
}
.wrapper{
    position:relative;
    z-index: 90;
    padding-bottom: 40upx;
}
.left-top-sign{
    font-size: 120upx;
    color: $page-color-base;
    position:relative;
    /* left: -16upx; */
    left: 20upx;
}
.welcome{
    position:relative;
    left: 50upx;
    top: -90upx;
    font-size: 46upx;
    color: #555;
    text-shadow: 1px 0px 1px rgba(0,0,0,.3);
}
.center-content{
    padding: 0 60upx;
}

/* css 滤镜 控制黑白底色gif的 */
.gif-white{  
  mix-blend-mode: multiply; 
}
.gif-black{  
  mix-blend-mode: screen;  
}
.response {
    width: 100%;
}
</style>

注意：必须在紧邻的第一个父节点设置背景，才能实现与背景融合。

loading-white.png

loading-black.gif

黑色动态图和背景色融合.gif

拓展：滤色混合模式screen

滤色计算公式

滤色计算公式.png

如有一个红色，其RGB值是(255,0,0)，还有一个蓝色，其RGB值是(0,0,255)，则这两个颜色使用滤色混合模式之后的颜色色值是：
R = 255 – (255 – 255) * (255 – 0) / 255 = 255
G = 255 – (255 – 0) * (255 – 0) / 255 = 0
B = 255 – (255 – 0) * (255 – 255) / 255 = 255
于是最终的色值是 RGB(255,0,255)

滤色模式特征
任何颜色和黑色执行滤色，还是呈现原来的颜色（如将图片、动画或视频的底色做成黑色，就能很好的和网页背景融为一体）
任何颜色和白色执行滤色得到的是白色；
任何颜色和其他颜色执行滤色模式混合后的颜色会更浅，有点类似漂白的效果

应用场景：滤色模式对于在图像中创建霓虹辉光效果是非常有用