8个很酷的CSS技巧和窍门

今天你吸猫了么
213 阅读12分钟

8个很酷的CSS技巧和窍门，让人印象深刻

CSS有成千上万的秘密，今天我们将探讨8个秘密。

如果你认为CSS只是用来 "美化 "网站，给文本添加一些颜色，或者简单地制作一些很酷的弹跳动画，那么你可能要重新考虑一下CSS的所有功能。你是否已经厌倦了使用和搜索 "如何在CSS中做X或如何实现Y？"或者只是想知道CSS的实际力量？这篇文章将告诉你所有你需要知道的关于CSS功能的一些很棒的技巧和窍门。它的重点是解释一些隐藏的但有价值的东西，你可以只用层叠样式表（CSS）来做。

整篇文章将按顺序介绍以下内容：

  1. 光标
  2. CSS平滑滚动
  3. CSS 形状
  4. 用CSS截断文本
  5. 用Flexbox居中对齐
  6. 制作水滴阴影
  7. 创建打字机效果
  8. 使用CSS自定义属性

那么，你准备好发现一些有趣而又了不起的技巧了吗？让我们开始吧!

光标

CSS内置了一些类型的光标，以满足你的需要。它们支持多种条件，这取决于网站界面在当前时刻是什么状态。例如，当项目正在加载时，你可能需要一个加载状态光标。这告诉用户，有些东西正在后台进行，他们需要等待，直到获取完成。

如何添加游标？

当你把鼠标指向Web界面上的任何元素时，光标属性可以帮助你设置鼠标光标。下面是一些可用的标准光标。

CSS 光标属性描述
光标：等待这表明程序很忙，用户不能与界面互动，直到它恢复到默认状态。
cursor: help这表示有一些帮助信息可用。
cursor: crosshair这个十字光标用来表示对媒体或位图的选择。
光标：抓取这是在你想显示一个元素可以被抓取的情况下使用的。

例子

让我们来看看我们如何连同输出一起实现这个。

<div>
	<div class="demo-waiting">Waiting...</div>
	<div class="demo-help">Get help</div>
	<div class="demo-crosshair">Crosshair</div>
	<div class="demo-grab">Grab</div>
</div>

这定义了四个嵌套在一个div容器内的不同级别的标题。我们希望每一个都在CSS中具有不同的光标值。下面是我们如何做的。

div.demo-waiting {
  cursor: wait;
}

div.demo-help {
  cursor: help;
}

div.demo-crosshair {
    cursor: crosshair;
}

div.demo-grab {
    cursor: grab;
}

添加自定义表情符号和图像光标!

想在自定义默认光标方面走得更远吗？通过CSS，你可以用你最喜欢的图片，或者表情符号来代替那个无聊的光标让我们做下面的演示来说明这一点。

下面是CSS代码。

.happy {
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/happy.png"), auto;
}
  
.sad { 
	cursor: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/sad.png"), auto;
}

正如你所看到的，我们只需要使用url()函数，它需要两个参数，第一个参数是表情符号的链接或图片（支持SVG和PNG），如果不成功，它就会退回到系统光标的自动模式。在官方文档中了解更多这方面的信息。

CSS平滑滚动

CSS中的平滑滚动功能为我们提供了设置滚动框在触发滚动时的行为。它有两个简单的属性：自动和平滑。当设置为自动时，你会看到滚动框会立即滚动，而设置为平滑时，它会使用由用户平台决定的定时函数平滑地滚动。

例子

这里最好的例子是当我们需要滚动到一个网页上的特定部分。

<div class="scroll-container">
  <h3 class="scroll-page scroll-page-1">1st Section</h3>
  <h3 class="scroll-page scroll-page-2">2nd Section</h3>
  <h3 class="scroll-page scroll-page-3">3rd Section</h3>
</div>

我们做了一个父滚动容器，里面有三个具有不同类名的子元素。

.scroll-container {
  width: 350px;
  height: 200px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

.scroll-page {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.scroll-page-1 {
	background: #f0de7a;
}

.scroll-page-2 {
	background: #afe69a;
}

.scroll-page-3 {
	background: #b8b7cd;
}

在scroll-container 类上，我们添加了scroll-behavior: smooth; 属性，让我们可以平滑地滚动到下一个子元素。

CSS 形状

如果你想制作一个自定义或预定义的形状，你只需要写一些基本的CSS就可以了!不管是圆形、三角形，甚至是星星！都可以。让我们来看看如何制作它们中的每一个。

制作一个圆形：

<div class="circle"></div>

是的，就是这样!你只需要一个div元素，其他一切都将由CSS来处理。

div.circle {
  width: 300px;
  height: 300px;
  background: #2762e9;
  border-radius: 50%;
}

重要的是，我们需要给它一个等值的宽度和高度，然后用border-radius属性将边框完全舍弃。这样我们就得到了我们的圆形。

做一个三角形：

div.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2762e9;
}

HTML只需要一个div，就像圆形一样，但这里有两点需要注意；首先，确保将宽度和高度都设置为零。这可以确保我们的形状不会超过给定的边界长度。

第二，给单独的左右边框，确保边框值相等，以获得完美的三角形形状以及透明色，因为如果你在那里添加任何其他颜色值，就会显示出方形形状的修剪部分。你希望三角形是什么颜色，都可以加到边框-底部。

做一个星星：

div.demo-star {
  position: relative; 
  display: block;
  color: #2762e9;
  width: 0;
  height: 0;
  border-right: 100px solid transparent;
  border-bottom: 70px solid #2762e9;
  border-left: 100px solid transparent;
  transform: rotate(35deg); 
}

div.demo-star:before {
  border-bottom: 80px solid #2762e9;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  position: absolute;
  height: 0;
  width: 0;
  top: -45px;
  left: -65px;
  display: block;
  content: ' ';
  transform: rotate(-35deg);
}

div.demo-star:after {
   position: absolute;
   display: block;
   color: #2762e9;
   top: 3px;
   left: -105px;
   width: 0;
   height: 0;
   border-right: 100px solid transparent;
   border-bottom: 70px solid #2762e9;
   border-left: 100px solid transparent;
   transform: rotate(-70deg);
   content: ' ';
}

通过一个单一的div，我们可以使用CSS伪类，如:before 和:after ，从同一个元素中制作出星星的其他形状。

对于第一个规则集，我们需要定义星形的底色，bottom-right ，和bottom-left 边框的透明色值，就像在一个三角形形状中一样。为了确保你的星星是直立的，我们需要将形状旋转25度，我们用rotate(35deg) 变换来做到这一点。

:before 伪类使星形的顶部三角形。确保你给border-bottom 的颜色与你在父规则中的颜色相同。我们需要将它从形状的其他部分自由移动，这样我们就可以给它自定义的顶部和左侧对齐。这就是为什么position: absolute在这里很重要。

最后，现在是制作对角线形状的时候了。在这里，:after 伪类会有所帮助。再次，确保位置被设置为绝对值，旋转值为-70度左右。这将给你带来完美对齐的星星。

用CSS截断文本

想象一下，如果你在一个容器里有很多文字，你想只显示前两行，而其余的文字应该用椭圆（...）或其他符号来剪辑。如何做到这一点呢？嗯，这里我们需要text-overflow的CSS属性。比方说，我们想要这样的东西。

剪贴

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Sed sit amet velit gravida odio ornare ultrices eu vitae elit.悬浮在空气中的液体或液体的自由度。我的意思是说，如果你想让你的朋友们知道你的情况，你就必须让他们知道你的情况

埃利希斯

毋庸置疑，这是个很好的机会。Sed sit amet velit gravida odio ornare ultrices eu vitae elit.悬浮在空气中的液体或液体的自由度。我的意思是说，如果你想让你的朋友们知道你的情况，你就必须让他们知道你的情况。在这里，我们可以看到，我们有一个很好的解决方案。

正如你所看到的，"CLIPPED "演示中的第一行在其第二句中被切断，只要里面的文字超过了一定的宽度。与 "ELLIPSIS "的演示一样，但在这里我们得到了额外的省略号，以表示有更多的文本。

<div class="flex justify-center border-2 border-gray-200 p-4">
    <div class="demo-truncation">
    	<h4>CLIPPED</h4>
      <p class="clipped">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
      <h4>ELLIPSIS</h4>
      <p class="ellipsis">
      	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet velit gravida odio ornare ultrices eu vitae elit. Suspendisse venenatis orci sed libero malesuada semper. Morbi et libero non purus faucibus elementum sed ut est. Cras volutpat at elit quis sagittis.
      </p>
    </div>
</div>

div.demo-truncation {
	width: 100%;
}

p.clipped {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: clip;
}

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

在HTML中，我们只是有一个容器来容纳这两个文本元素。看看我们是如何用下面几行CSS剪掉多余的两行的。

要做到这一点，我们需要做三件事。首先，我们设置整个容器元素的整体宽度，即100%，然后在这两个段落中，我们添加：

  • white-space: nowrap: 这将折叠容器上所有可用的白色空间。
  • overflow: hidden: 为了适应padding-box，它把任何内容都夹在里面。这就是为什么我们可以截断文本。最后，我们可以使用两种类型的文本溢出属性，即剪辑和省略号，以获得理想的输出。

用Flexbox居中对齐

在CSS中使用Flexbox时，一个典型的问题是如何将里面的内容居中对齐。无论是垂直、水平，还是两者都是如此。假设我们想让上面的圆形在网页上垂直和水平居中。

在这里，圆圈周围的边框向我们展示了整个网页的主体，而我们的圆圈则坐在中心位置。

<div class="demo-center h-48">
  <div></div>
</div>

.demo-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo-center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}

首先，我们需要一个父容器来容纳这个圆，即flex-container。在里面，我们有一个简单的div来制作圆。在CSS中，我们需要使用以下与flexbox相关的重要属性：

  • display: flex; 这将父容器设定为具有flexbox布局。
  • align-items: center; 这设置了弹性子节点的对齐方式，使之与十字轴的中心对齐。
  • justify-content: center; 这设置了柔性子节点的对齐方式为主轴的中心。

在这之后，我们有一个通常的圆形CSS代码，我们之前在这篇文章中也使用过。由于现在圆形在垂直和水平方向上都是居中的，我们可以看到在任何屏幕尺寸下，它都能保持在其位置上居中。

制作水滴阴影

只需一行CSS代码，你就可以在任何图像上有一个水滴阴影效果。它接受以下语法：

drop-shadow(offset-x offset-y blur-radius color)

因此，在我们的代码中，我们给图像的水平偏移量、垂直偏移量和模糊半径各为10px，以及浅蓝色的十六进制颜色代码。

创建打字机效果

在文本上创建一个简单的打字机效果，只需借助于CSS就可以实现。我们需要在这里明确两件事：第一件事是文本部分应该如何剪裁，第二件事是实际的打字机动画，它给我们带来了我们需要的整体效果。

这是一个打字机的效果!

<div class="demo-typewriter">
  <span>This is a typewriter effect!</span>
</div>

.demo-typewriter span {
  color: #262626;
  overflow: hidden;   
  border-right: .10em solid #FF8D8D;
  white-space: nowrap;   
  margin: 0 auto;   
  letter-spacing: .4rem;   
  animation: demo-typewriter 3s steps(30, end), demo-cursor 1s step-end infinite;
}
@keyframes demo-typewriter {
  from { 
    width: 0;
  }
  to { 
    width: 100%;
  }
}

@keyframes demo-cursor {
  from, to { 
    border-color: transparent; 
}
  50% { 
border-color: #FF8D8D; 
  }
}

让我们看看每一行代码在这里意味着什么：

  1. 我们在body标签上用flexbox将整个文本居中对齐。
  2. 接下来，在标题上，我们添加overflow: hidden ，以确保在动画完成之前，句子的其他字母不会显示出来。
  3. 为了使效果更加逼真，我们添加一个光标，这是通过使用border-right 属性来实现的。
  4. white-space的使用是为了使整个文本内容生活在一个行中，并且没有文本包裹其容器。
  5. 接下来我们设置动画。我们有两个；打字机动画只是在3秒内将整个文本的宽度从0改变到100%，而另一个光标动画是添加到我们在第3点做的光标上。这段动画运行了1秒，它的边框颜色从透明变为#FF8D8D 。

使用CSS自定义属性(vars)

有时我们需要一些CSS值在多个位置或元素中使用。这些值可以在整个文档或整个Web项目中重复使用。

一个常见的例子是一个网站的品牌颜色。比如它是#120078。现在我们需要把它应用到我们的链接标签、按钮、广告容器等。现在，多个页面都会有相同的值。

因此，为了不每次都使用它，并使它更容易找到一个特定的固定值，我们使用CSS自定义属性。这里有一个快速的例子来展示这种情况。

:root {
  --brand-bg-color: #120078;
}

a  {
  color: white;
  background-color: var(--brand-bg-color);
}

.main-link {
  color: var(--brand-bg-color);
  padding: 3px;
}

--brand-bg-color 是我们这里的CSS变量，定义在项目样式的根部。它的值等于#120078。这意味着，每当我们在任何链接、按钮等需要这种特定的颜色时，我们可以简单地使用它作为var(--brand-bg-color)，而不是到处手动定义它。当我们想改变颜色时，这有很大的帮助。我们只需更新--brand-bg-color 的值，它就会反映在每个被使用的元素上

结论

就这样吧!这些都是前端开发者在他们的代码中常用的东西。有时是要添加一个动画，而其他时候我们需要一个只用CSS的艺术阴影，如三角形和星星。

我希望这对你有用，并确保在这些CSS技巧中的每一个都加入你的转折点!

谢谢你的阅读!

avatar
文章
阅读
粉丝