12个css技巧和窍门，帮你创建令人惊叹的网站 - 《温故知新》

1. 用flex实现垂直居中
2.混合模式
3.视差滚动
4.shape-outside
5.截断字符串
6.Clip path
7. 全高和全宽
8. 图片滤镜
9.CSS动画
10.元素旋转
11.Mask
12.悬停放大
结论：

CSS是级联样式表，用于描述应如何展示HTML元素。它即将成为前端和web开发人员首先要学习的技术之一，它是必须掌握的基本知识。
虽然CSS看起来除了能给我们的HTML颜色，位置等之外并不能做很多事，但它也可以让我们创建动画，为我们的应用和网站带来活力。也许现在我们中的许多人都在关注CSS的掌握和深入学习，但是了解一些有用的技巧和窍门是完全值得的，它们可以帮你创建令人惊叹的网站。
准备好了吗？从现在开始，查看可以改变你的css用法的12个技巧。
让我们开始！

1. 用flex实现垂直居中

自从弹性盒子布局模型出现以来，它就变得非常流行，因为它使元素的定位和对齐更加容易。使用flex（弹性盒子布局模型子属性）让垂直对齐快速、漂亮、容易之前，我们不得不做一点在很多情况下。让我们看一下用flex实现垂直定位的代码示例，因为它允许很多对齐操作。

<div class="parent">
   <div class="child"></div>
</div>

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100wh;
}
.child {
  width: 100px;
  height: 100px;
  background-color: #20126f;
}

正如你在上面代码所看到的，我们用display: flex和align-items: center，justify-content: center来确保我们的子元素完全位于父元素的中心。
很容易，对吗？

2.混合模式

我们现在可以在css中做很多很酷的事，其中一种就是混合模式。混合模式有两个属性：mix-blend-mode，它定义元素和后面的元素之间的混合； background-blend-mode，它定义元素的背景图像和背景颜色之间的混合。让我们看看它是如何工作的：

<div class="blend">
  <img src="https://cdn.pixabay.com/photo/2016/12/11/12/02/bled-1899264_960_720.jpg" />
  <h1>NATURE</h1>
</div>

.blend {
  width: 100vw;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
} 
.blend img {
  position: absolute;
}
.blend h1 { 
  font-size: 150px;
  mix-blend-mode: overlay;
}

在上面的代码，我们为图像和标题设置了文本。这个文本是与图像混合的元素。我们使用了overlay这个值，但是还有其他15个属性值可以使用。现在，让我们看下background-blend-mode的代码示例：

<div class="blend-before"></div>
<div class="blend-after"></div>

.blend-before {
  background-image: url(https://cdn.pixabay.com/photo/2016/12/11/12/02/bled-1899264_960_720.jpg);
  width: 100vw;
  height: 500px;
  background-size: cover;
} 
.blend-after {
  background-image: url(https://cdn.pixabay.com/photo/2016/12/11/12/02/bled-1899264_960_720.jpg);
  width: 100vw;
  height: 500px;
  background-color: #20126f;
  background-size: cover;
  background-blend-mode: overlay;
}

在这个例子中，我们可以看到背景图是怎样和颜色混合的。第一张图是混合前，第二张图是混合后。
这是不是很神奇我们可以用css做这些？

3.视差滚动

视差在现代网页设计中是一个非常普遍的趋势。这是关于当我们滚动页面时以不同于前景内容的速度滚动背景内容。让我们看看用css是如何完成这个魔术的：

<div class="wrapper">
  <div class="box box-back">
     <h3>SWEETIES</h3>
  </div>
  <div class="box box-front">
     <img src="https://cdn.pixabay.com/photo/2017/03/30/15/47/churros-2188871_960_720.jpg" />
  </div>
</div>

.wrapper {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  background-color: #f6f6f6;
}
.box {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 20vh 0;
}
img {
  width: 100%;
}
h3 {
  font-size: 60px;
  color: white;
}
.box.box-back {
  transform: translateZ(0);
  z-index: 99;
  text-align: center;
}
.box.box-front {
  width: 1500px;
  transform: translateZ(-1px) scale(2);
}

在这个例子中，你可以看到我们的文字和背景图如何以不同的方式移动的。我们用transformZ固定其中一个元素，减慢另一个元素。看起来不错吧？

4.shape-outside

css还有另一个很棒的特性，但并不是很常见。它是shape-outside属性。它决定内容如何环绕浮动元素。让我们看看它是如何工作的：

<div class="circle"></div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.
Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.
</p>

.circle {
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  float: left;
}

在这个代码示例中，你可以看到文字溢出了圆圈。我们将shape-outside的值设置为50%的圆，但它也可以设置为一个图片，三角形，正方形等。看一看并动手试一下！

5.截断字符串

我很讨厌我的本文在div里不合适，也不美观。在Javascript中，我们有几种方式可以处理它，但你知道吗，在css中也能剪切文字。让我们来看看：

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

p {
  background-color: #ddd;
  width: 200px;
  margin: auto;
  padding: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在上面，你可以看到css是怎样剪切文字并且以 …. 结尾。我使用overflow: hidden，white-space: nowrap，以及最后用text-overflow: ellipsis得到三个省略号。

6.Clip path

有时候设计师会更有创意些，现在你需要将一个图片放入一个特定的形状，像三角形或者其他。为此，你可以使用clip-path属性！让我们快速地看下它是如何工作的：

<div class="ellipse">
  <img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mt-fuji-477832_960_720.jpg" />
</div>
<div class="circle">
  <img src="https://cdn.pixabay.com/photo/2014/10/07/13/48/mt-fuji-477832_960_720.jpg" />
</div>

.ellipse img {
  clip-path: ellipse(200px 200px at 100px 100px);
}
.circle img {
  clip-path: circle(30%);  
}
.polygon img {
  clip-path: polygon(5% 5%, 100% 10%, 900% 75%, 75% 75%, 75% 100%, 60% 75%, 20% 80%);
}

在上面的例子中，我创建了一个圆，日食和自定义的多边形。

7. 全高和全宽

如果我们想要设置我们的应用或网站适应视窗，用vh和vw单位实现它非常简单。vh表示视窗高度的100%，以及vm表示视窗宽度的100%。让我们在一个真实的示例中看下它是如何工作的：

<div class="blue-box"></div>

.blue-box {
  width: 50vw;
  height: 50vh;
  background-color: #20126f;
}

在上面的示例中，我将蓝色的盒子元素设置为50vw和50vh，这意味着它会有50%的视窗宽度和50%的视窗高度，如果你调整视窗的大小，你会注意到它是如何调整的。
很酷吧？

8. 图片滤镜

用图像可能会为布局带来很多惊人的效果，由此创造出令人惊叹的结果。CSS允许在图像上使用大量滤镜，帮助开发者无需在Photoshop中就能处理图像。让我们看一下我们可能使用的过滤器：

<div class="image">
  <img class="nofilter" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
  <img class="blur" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
  <img class="grayscale" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
  <img class="brightness" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
    <img class="sepia" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
   <img class="saturate" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
     <img class="invert" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
   <img class="huerotate" src="https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg?cs=srgb&dl=daylight-environment-forest-459225.jpg&fm=jpg" />
</div>

.image img {
  max-width: 300px;
}

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

在上面的示例中，你可以看到7种不同的滤镜使用于相同的图像中。

9.CSS动画

动画可以吸引用户在网站上的注意力，这也是为什么它经常在网页设计中被使用。在CSS中创建动画使事情变得更加简单，让我们仔细看一下CSS中的示例动画：

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

@keyframe loading {
  0%   {opacity: 0.9; right: 0px; top: 0px;}
  25%  {opacity: 0.7; right: 50px; top: 50px;}
  50%  {opacity: 0.5; right: 0px; top: 50px;}
  75%  {opacity: 0.3; right: 50px; top: 0px;}
  100% {opacity: 0.1; right: 0px; top: 0px;}
}

@-webkit-keyframes loading {
  0%   {opacity: 0.9; right: 0px; top: 0px;}
  25%  {opacity: 0.7; right: 50px; top: 50px;}
  50%  {opacity: 0.5; right: 0px; top: 50px;}
  75%  {opacity: 0.3; right: 50px; top: 0px;}
  100% {opacity: 0.1; right: 0px; top: 0px;}
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: relative;
  background-color: #DE0E42;
  animation-name: loading;
  opacity: 1;
  animation-duration: 4s;
  animation-delay: 2s;
  animation-iteration-count: 10;
}

.container{
  width: 100wv;
  display: flex; 
  align-items: center;
  justify-content: center;
}

在上面的代码中，我创建了一个小点，这个点每25%就改变一次位置和透明度，直到100%。然后又重新开始。它也可以改变元素的颜色或其他属性。

10.元素旋转

另一种可以在CSS中完成的动画类型是旋转，它更具动态性，而且可以为图库中的加载器元素，logo或图像增加一些生命力，这一点很棒。让我们看一下我们可以用rotation做什么：

<div class="cat">
  <img src="https://cdn.pixabay.com/photo/2016/03/31/17/33/icons-1293736_960_720.png" />
</div>

.cat img {
  width: 200px;
  margin: auto;
  animation-name: rotate;
  animation-duration: 10s;
  animation-delay: 2s;
}

@keyframe rotate {
  0% { transform: rotate(0turn); }
  100% { transform: rotate(6turn); }
}

@-webkit-keyframes rotate {
  0% { transform: rotate(0turn); }
  100% { transform: rotate(6turn); }
}

在这个例子中，我们可以看到一颗星在一个动画周期内旋转了四次。

11.Mask

如果你曾经做过图形设计，你可能会知道蒙板有多大用处。在CSS中也可以使用图像蒙板。让我们尝试为图像蒙板：

<img src="https://images.pexels.com/photos/36744/agriculture-arable-clouds-countryside.jpg?cs=srgb&amp;dl=dramatic-evening-hd-wallpaper-36744.jpg&amp;fm=jpg">

img {
  width: 1000px;
 -webkit-mask-image: radial-gradient(circle at 50%, black 50%, rgba(0, 0, 0, 0.2) 10%);
  mask-image: radial-gradient(circle at 50%, black 50%, rgba(0, 0, 0, 0.2) 10%);
}

在上面的例子中，我创建了一个圆形渐变蒙板，但是你也可以通过将URL添加到文件中，将SVG图形作为蒙板。

12.悬停放大

当你创建一个图库时，你经常需要以某种方式标记悬停的图像。一个不错的想法是悬停时放大以突显悬停的照片。让我们看看它是如何工作的：

<div class="images">
  <img src="https://images.unsplash.com/photo-1534361960057-19889db9621e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
  <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
  <img src="https://images.unsplash.com/photo-1554456854-55a089fd4cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" />
  <img src="https://images.unsplash.com/photo-1529257414772-1960b7bea4eb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80" />
</div>

.images {
  display: flex;
  width: 100vw;
  juftify-content: center;
  align-items: center;
}

img {
  width: 400px;
}

img:hover {
  transform: scale(1.3);
}

在上面的示例中，我创建了一个小图库，并在图片悬停的时候添加scale属性让它变得比其他图片更大些。容易吧？

结论：

我们想要创建令人惊叹的网站和应用程序，但有时我们认为在图像上创建动画或蒙板需要花费大量的精力和时间。正如我在本文中向你展示的那样，有时候它比在图形程序中的更改图像舒适得多。
我希望你会发现这些技巧和窍门对你将来的编程有帮助和有用。如果你知道任何有趣的css技巧，请在评论或社交媒体中和我分享你的收藏，我真的很想知道。
编程愉快！

原文链接：https://www.blog.duomly.com/12-css-tips-and-tricks-which-help-you-to-create-an-amazing-websites/