几个css奇技淫巧（一）

今天给大家伙分享几个css的使用技巧，这个我计划做成一个系列，每篇文章都会分享几个有意思的css用法，可能是一些冷门的属性，也可能是一些异想天开的用法，或者是有意思的函数。

一、resize 属性

/* Keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline; 

/* Global values */
resize: inherit;
resize: initial;
resize: revert;
resize: revert-layer;
resize: unset;

使用这个属性我们可以让用户在页面上自定义元素的宽高，在我们使用了resize:both后，用户就可以拖拽元素边缘，对元素进行拉伸和压缩的操作。

resize不能在内联元素中使用，也不能在overflow: visible的元素中使用。

二、不使用js的样式控制

在前端主线程越来越紧张的前端环境里，可以使用css来进行一部分渲染控制，以checkbox举例

<input type="checkbox" name="test" id="testCheckBox">
<label for="testCheckBox">test</label>
<div class="container">隐藏内容</div>

我们先隐藏起来container中的内容

.container {  
    display:none;
}

我们的checkbox和label已经出现在网页上了，接下来为container添加联动属性

#testCheckBox:checked ~ .container {
  display:flex;
  margin:16px;
  border:1px gray solid;
  width:200px;  height:48px;
  align-items:center;
  justify-content:center;
}

此时，勾选checkbox，隐藏内容就被展示出来了，最后我们可以把checkbox隐藏起来

#testCheckBox {
    display:none;
}

三、CSS实现扫光效果

有时候，为了凸显某些元素或文字，我们需要添加一些扫光效果。我们可以使用css动画来实现这一点。接下来以文本为例子进行演示：

<h1 class="shark-txt">
    xsljasd
</h1>

使用background-clip来添加扫光效果，因为是给文本添加效果，我们需要使用-webkit-text-fill-color: transparent裁剪背景

.shark-txt {  
  -webkit-text-fill-color:transparent;
  background:linear-gradient(45deg,rgba(255,255,255,0)40%,rgba(255,255,255,0.7),rgba(255,255,255,0)60%) no-repeat currentColor;
  -webkit-background-clip:text;
}

最后我们给他添加动画效果：

@keyframesshark-txt {
    from {
        background-position:-100%;
    }
    to {
        background-position:200%;
    }
}

由于背景默认尺寸是100%，根据背景偏移百分比的计算规则，当背景尺寸等于容器尺寸时百分比完全失效，具体规则如下：

给定背景图像位置的百分比偏移量是相对于容器的。值 0% 表示背景图像的左（或上）边界与容器的相应左（或上）边界对齐，或者说图像的 0% 标记将位于容器的 0% 标记上。值为 100% 表示背景图像的 右（或 下）边界与容器的 右（或 下）边界对齐，或者说图像的 100% 标记将位于容器的 100% 标记上。因此 50% 的值表示水平或垂直居中背景图像，因为图像的 50% 将位于容器的 50% 标记处。类似的，background-position: 25% 75% 表示图像上的左侧 25% 和顶部 75% 的位置将放置在距容器左侧 25% 和距容器顶部 75% 的容器位置。https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position

所以我们手动改小一下背景尺寸：

.shark-txt {
    -webkit-text-fill-color:transparent;
    background:linear-gradient(45deg,rgba(255,255,255,0)40%,rgba(255,255,255,0.7),rgba(255,255,255,0)60%)-100% /50%no-repeatcurrentColor;
    -webkit-background-clip:text;
    animation: shark-txt 2s infinite;
}

以上就是这一次css的技术分享，下一次带来更多更有趣的css样式效果，愿命运与你我同在！