今天给大家伙分享几个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% 的容器位置。developer.mozilla.org/zh-CN/docs/…
所以我们手动改小一下背景尺寸:
.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样式效果,愿命运与你我同在!