整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

使用CSS变换为您的网站元素设置动画

们都被移动的物体和不寻常的方向所吸引。动画效果可用于改善用户界面或吸引用户注意项目的重要部分。

在这篇文章中，我将向您展示如何应用不同的转换来改善您网站的可用性和设计。

CSS转换

您可以使用CSS属性以多种不同方式对网站元素进行转换，从而为网站元素添加效果 transform。此属性允许您 使用各种变换函数旋转，缩放，移动和倾斜元素。您还可以在鼠标悬停或鼠标单击时触发这些转换。我将在以后的文章中介绍三维变换。

让我们看看每个转换属性函数。

规模

该 scale 函数允许您增加或减少元素的大小，即按元素缩放元素。

例如，因子 2 会将元素的大小转换为其原始大小的2倍。同样，因子 0.4 会将其大小转换为原始大小的0.4倍。

我们来拍摄尺寸为200 * 200的图像。

HTML

<img src = “pic.jpg” class = “element” width = “200” height = “200” >

为图像分配了一个名为“element”的类。

为了使图像大1.5倍，我们将使用 属性的 scale 功能 transform。

CSS

.element:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}

因为我们将1.5作为参数传递给scale 函数，所以上面的代码会将图像的宽度和高度都增加到原始图像的1.5倍 。请注意，该 transform 属性具有供应商前缀 -webkit-， -moz- 并且 -o-。这些是为了获得所有浏览器的最佳支持。

要使转换平滑，请使用该 transition 属性。

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.element:hover {
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}

这种转换特性将使转换线性发生0.2秒。将鼠标悬停在下图中可查看此转换的实时演示。

更具体地说，您可以使用 scaleX 和 scaleY 值分别缩放元素的宽度和高度。

HTML

<img src = “pic.jpg” class = “scale1” width = “200” height = “200” > 
<img src = “pic.jpg” class = “scale2” width = “200” height = “200” >

CSS

.scale1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.scale1:hover {
	-webkit-transform: scaleX(1.2);
	-moz-transform: scaleX(1.2);
	-o-transform: scaleX(1.2);
	transform: scaleX(1.2);
}
.scale2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.scale2:hover {
	-webkit-transform: scaleY(.8);
	-moz-transform: scaleY(.8);
	-o-transform: scaleY(.8);
	transform: scaleY(.8);
}

在悬停在各个图像上时，具有类'scale1'的第一图像的宽度将增加到其原始宽度的1.2倍，并且具有类'scale2'的第二图像的高度将减小到其原始高度的0.8倍。尝试将鼠标悬停在以下图像上。

现在，考虑您希望将宽度增加到1.2倍并将高度同时降低到元素原始值的0.8倍的情况。为此，您必须为scale 以逗号分隔的函数提供两个值 。第一个值将缩放其宽度，第二个值将缩放其高度。

CSS

.element{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.element:hover {
	-webkit-transform: scale(1.2, .8);
	-moz-transform: scale(1.2, .8);
	-o-transform: scale(1.2, .8);
	transform: scale(1.2, .8);
}

您还可以缩放其他CSS属性，如 填充 和 字体大小。

回转

这是该transform 物业的另一项功能 。使用此功能，您可以按任何方向旋转元素，无论您想要哪个方向。正值将顺时针旋转元素，负值将逆时针旋转。

让我们尝试将图像旋转一定角度，尽管您可以旋转几乎任何像 div，span，headings或paragraph这样的东西。 您也可以尝试旋转整个html体。听起来怪怪的？试一试吧。

HTML

<img src = “pic.jpg” class = “rotate1” > 
<img src = “pic.jpg” class = “rotate2” >

CSS

/* first image */
.rotate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate1:hover {
	-webkit-transform: rotate(40deg);
	-moz-transform: rotate(40deg);
	-o-transform: rotate(40deg);
	transform: rotate(40deg);
}

/* second image */
.rotate2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}

.rotate2:hover {
	-webkit-transform: rotate(-40deg);
	-moz-transform: rotate(-40deg);
	-o-transform: rotate(-40deg);
	transform: rotate(-40deg);
}

默认情况下，该 rotate 函数沿Z轴旋转元素。可以专门旋转沿X，Y的元素，并使用Z轴的功能 rotateX， rotateY 和 rotateZ 分别。我们来看看如何。

HTML

<img src = “pic.jpg” class = “rotate1” > 
<img src = “pic.jpg” class = “rotate2” > 
<img src = “pic.jpg” class = “rotate3” >

CSS

/* first image */
.rotate1{
	-webkit-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-o-transition: transform 1s linear;
	transition: transform 1s linear;
}
.rotate1:hover {
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
	-o-transform: rotateX(180deg);
	transform: rotateX(180deg);
}
/* second image */
.rotate2{
	-webkit-transition: transform 1s linear;
	-moz-transition: transform 1s linear;
	-o-transition: transform 1s linear;
	transition: transform 1s linear;
}
.rotate2:hover {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
/* third image */
.rotate3{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.rotate3:hover {
	-webkit-transform: rotateZ(40deg);
	-moz-transform: rotateZ(40deg);
	-o-transform: rotateZ(40deg);
	transform: rotateZ(40deg);
}

第一和第二表情分别沿X和Y轴旋转180度。第三个笑脸沿Z轴旋转40度，这也是默认的旋转轴。

您可以通过组合这些转换来创建许多新组合。现在，让我们转到另一个转换函数。

翻译

您可以使用该translate 功能在水平，垂直或任何其他方向上移动元素 。它只会改变应用它的元素的位置，而不会中断文档的正常流动。

translateX 用于水平移动元素。给出正值将使其向右移动并向左移动负值。 translateY 将在垂直方向移动您的元素。同样，正值会将其向下移动并向上移动负值。

HTML

<img src = “pic.jpg” class = “translate1” > 
<img src = “pic.jpg” class = “translate2” >

CSS

/* first image */
.translate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.translate1:hover {
	-webkit-transform: translateX(40px);
	-moz-transform: translateX(40px);
	-o-transform: translateX(40px);
	transform: translateX(40px);
}
/* second image */
.rotate2{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.rotate2:hover {
	-webkit-transform: translateY(20px);
	-moz-transform: translateY(20px);
	-o-transform: translateY(20px);
	transform: translateY(20px);
}

使用该translateX 函数将第一图像向右移动40px， 使用该translateY 值向下移动第二图像20px 。您也可以同时水平和垂直移动相同的元素。为此，您必须将两个参数传递translate 给以逗号分隔的 函数。第一个值将水平移动元素，而第二个值将垂直移动元素。

HTML

<img src = “pic.jpg” class = “translate1” >

CSS

.translate1{
	-webkit-transition: transform .2s linear;
	-moz-transition: transform .2s linear;
	-o-transition: transform .2s linear;
	transition: transform .2s linear;
}
.translate1:hover {
	-webkit-transform: translate(40px,20px);
	-moz-transform: translate(40px,20px);
	-o-transform: translate(40px,20px);
	transform: translate(40px,20px);
}

上图是跟随悬停的路径，其中最终位置向右40px，低于初始位置20px。

浏览器支持

除google之外的所有浏览器都支持此属性 。此外， IE 不支持 transform-style：preserve-3d 属性，因此阻止了3D转换元素的嵌套。

结论

如果适当应用，各种网站元素的位置和方向的微小动画转换可以为您的网站设计带来生命。这只是关于不同类型转换的介绍和基本用法的帖子。这些可用于创建非常惊人的效果和动画，我将在以后的帖子中继续介绍。

欢迎加评论区讨论。整理不易，祝给我收藏关注的大佬发大财emmm。

SS Shapes允许我们通过定义文本内容可以流动的几何形状，图像和渐变来制作有趣且独特的布局。在本篇文章中将简要介绍如何使用它们。

在引入，几乎不可能设计出具有自由流动文本的杂志式布局。相反，网页设计布局传统上采用网格，方框和直线形状。

CSS Shapes允许我们定义文本可以流动的几何形状。这些形状可以是圆形，椭圆形，简单或复杂多边形，甚至是图像和渐变。Shapes的一些实际设计应用可能是在圆形化身周围显示圆形文本，在全宽背景图像的简单部分上显示文本，以及在文章中显示文本中的文本流。

既然CSS Shapes已经在现代浏览器中获得了广泛的支持，那么值得一看的是它们提供的灵活性和功能，以确定它们在您的下一个设计项目中是否有意义。

注意：在撰写本文时，支持Firefox，Chrome，Safari和Opera，以及iOS Safari和Chrome for Android等移动浏览器。形状没有IE支持，并且正在 Microsoft Edge。

首先看看CSS形状

CSS Shapes的当前实现是，它主要围绕属性。shape-outside定义文本可以流动的形状。

考虑到存在shape-outside属性，您可能会假设存在一个对应的shape-inside属性，该属性将包含形状中的文本。一个shape-inside属性可能在未来成为现实，但目前它是在一个草案，而不是由任何浏览器来实现。

在本文中，我们将演示如何使用数据类型并使用形状函数值设置它，以及使用半透明URL或渐变设置形状。

基本形状函数

我们可以通过将以下函数值应用于shape-outside属性来定义CSS中的各种基本形状：

· circle()

· ellipse()

· inset()

· polygon()

为了将shape-outside属性应用于元素，元素必须浮动，并具有定义的高度和宽度。让我们来看看四种基本形状中的每一种，并演示如何使用它们。

圆

我们将从该circle()功能开始。想象一下这样一种情况：我们有一个我们想要向左浮动的作者的圆形化身，我们希望作者的描述文本在它周围流动。仅仅使用border-radius: 50%头像元素就不足以使文本形成圆形; 文本仍会将头像视为矩形元素。

通过圆形，我们可以演示文本如何围绕圆圈流动。

我们首先要circle在常规上创建一个类div，并制作一些段落。（我使用Bob Ross引用为Lorem Ipsum文本。）

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

<p>Example text...</p>

在我们的circle课堂上，我们留下浮动的元素，给它一个平等height和width，并设置shape-outside到circle()。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

}

如果我们查看页面，它将如下所示。

如您所见，文本围绕圆形流动，但我们实际上看不到任何形状。将鼠标悬停在开发人员工具中的元素上将向我们显示正在设置的实际形状。

此时，您可能会认为可以background为元素设置颜色或图像，并且您将看到形状。让我们尝试一下。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

background: linear-gradient(to top right, #FDB171, #FD987D);

}

无奈的是，设置background于circle只是给我们一个矩形，我们一直在试图避免的事情。

我们可以清楚地看到文本在它周围流动，但元素本身没有形状。如果我们想要实际显示我们的形状函数，我们将不得不使用该属性。clip-path取许多相同的值shape-outside，所以我们可以给它相同的circle()值。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle();

clip-path: circle();

background: linear-gradient(to top right, #FDB171, #FD987D);

}

对于本文的其余部分，我将用它clip-path来帮助我们识别形状。

该circle()函数采用半径的可选参数。在我们的例子中，默认半径（r）是50%，或100px。使用circle(50%)或circle(100px)将产生与我们已经完成的结果相同的结果。您可能会注意到文本正对着形状。我们可以用属性来余量添加到形状，其可以在被设置px，em，%，和测量的任何其他标准的CSS单元。

.circle {

float: left;

height: 200px;

width: 200px;

shape-outside: circle(25%);

shape-margin: 1rem;

clip-path: circle(25%);

background: linear-gradient(to top right, #FDB171, #FD987D);

}

以下是应用25% circle()半径的示例shape-margin。

除了半径之外，形状函数可以使用位置at。默认位置是圆的中心，因此circle()将明确地写为circle(50% at 50% 50%)或circle(100px at 100px 100px)，其中两个值分别是水平和垂直位置。

为了明确定位的工作原理，我们可以将水平位置值设置0为一个完美的半圆。

circle(50% at 0 50%);

该坐标定位系统称为参考框。

稍后，我们将学习如何使用图像而不是形状或渐变。现在，我们将继续进行下一个形状函数。

椭圆

类似于circle()功能是ellipse()，它创建一个椭圆形。为了演示，我们可以创建一个ellipse元素和类。

<div class="ellipse"></div>
<p>Example text...</p>
.ellipse {
 float: left;
 shape-outside: ellipse();
 clip-path: ellipse();
 width: 150px;
 height: 300px;
 background: linear-gradient(to top right, #F17BB7, #AD84E3);
}

这一次，我们设置了一个不同的，height并width制作一个垂直拉长的椭圆形。

a ellipse()和a 之间的区别在于circle()椭圆具有两个半径 - r x和r y，或者X轴半径和Y轴半径。因此，上面的例子也可以写成：

ellipse(75px 150px);

圆和椭圆的位置参数相同。半径，除了作为测量单位，还包括的选项farthest-side和closest-side。

closest-side"参考盒" farthest-side是指从参考盒的中心到最近侧的长度，相反，是指从参考盒的中心到最远侧的长度。这意味着如果未设置默认值以外的位置，则这两个值无效。

下面是翻转的差的示范closest-side和farthest-side上一个ellipse()与一个25%在X偏移和Y轴。

ellipse(farthest-side closest-side at 25% 25%)

ellipse(farthest-side closest-side at 25% 25%)

插页（inset）

到目前为止，我们只处理圆形，但我们可以使用该inset()函数定义插入矩形。

<div class="inset"></div>
<p>Example text...</p>
.inset {
 float: left;
 shape-outside: inset(75px);
 clip-path: inset(75px);
 width: 300px;
 height: 300px;
 background: linear-gradient(#58C2ED, #1B85DC);
}

在这个例子中，我们将创建一个300pxby 300px矩形，并75px在所有方面插入它。这将使我们有一个150px由150px与75px它周围的空间。

我们可以看到矩形是插入的，文本忽略了插入区域。

一个inset()形状也可以border-radius使用round参数，文本将尊重圆角，例如这个示例的25px所有边和75px圆角。

inset(25px round 75px)

喜欢padding或margin简写，插入值将接受top right bottom left顺时针顺序（inset(25px 25px 25px 25px)）的值，并且只使用单个值将使所有四个边相同（inset(25px)）。

多边形

形状函数最有趣和最灵活的是polygon()，它可以采用一系列x和y点来制作任何复杂的形状。数组中的每个项目代表x i y i，并且将被写为polygon(x1 y1, x2 y2, x3 y3...)等等。

我们可以应用于多边形的点集数量最少为3，这将创建一个三角形。

<div class="polygon"></div>
<p>Example text...</p>
.polygon {
 float: left;
 shape-outside: polygon(0 0, 0 300px, 200px 300px);
 clip-path: polygon(0 0, 0 300px, 200px 300px);
 height: 300px;
 width: 300px;
 background: linear-gradient(to top right, #86F7CC, #67D7F5);
}

在这个形状中，第一个点是0 0，左上角最左边的点div。第二点是0 300px，这是最左下角的点div。第三个也是最后一个点是200px 300pxX轴上的2/3并且仍然在底部。结果形状如下所示：

polygon()形状函数的一个有趣用法是文本内容可以在两个或更多个形状之间流动。由于polygon()形状如此灵活和动态，这是制作真正独特的杂志式布局的最大机会之一。在这个例子中，我们将在两个多边形形状之间放置一些文本。

<div class="left"></div>

<div class="right"></div>

<p>Example text...</p>

.left {

float: left;

shape-outside: polygon(0 0, 0 300px, 200px 300px);

clip-path: polygon(0 0, 0 300px, 200px 300px);

background: linear-gradient(to top right, #67D7F5, #86F7CC);

height: 300px;

width: 300px;

}

.right {

float: right;

shape-outside: polygon(200px 300px, 300px 300px, 300px 0, 0 0);

clip-path: polygon(200px 300px, 300px 300px, 300px 0, 0 0);

background: linear-gradient(to bottom left, #67D7F5, #86F7CC);

height: 300px;

width: 300px;

}

显然，尝试手动创建自己的复杂形状是非常困难的。幸运的是，您可以使用多种工具来创建多边形。Firefox有一个用于形状的内置编辑器，您可以通过单击检查器中的多边形形状来使用它。

目前，Chrome还有一些可以使用的扩展程序，例如。

多边形可用于剪切图像或其他元素周围的形状。在另一个示例中，我们可以通过围绕大字母绘制多边形来创建首字下沉。

<div class="letter">R</div>

<p>Example text...</p>

.letter {

float: left;

font-size: 400px;

font-family: Georgia;

line-height: .8;

margin-top: 20px;

margin-right: 20px;

shape-outside: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px) content-box;

clip-path: polygon(5px 14px, 233px 20px, 246px 133px, 189px 167px, 308px 304px, 0px 306px);

}

URLs

CSS Shapes的一个令人兴奋的功能是你不必总是用形状函数明确定义形状; 您还可以使用半透明图像的URL来定义形状，文本将自动围绕它流动。

重要的是要注意所使用的图像必须与兼容，否则您将收到如下所示的错误。

Access to image at 'file:///users/tania/star.png' from origin 'null'

has been blocked by CORS policy: The response is invalid.

从同一服务器在服务器上提供映像将确保您不会收到该错误。

与其他示例不同，我们将使用img标记而不是div。这次CSS很简单 - 只需将其url()放入shape-outside属性中，就像使用它一样background-image。

<img src="./star.png" class="star">

<p>Example text...</p>

.star {

float: left;

height: 350px;

width: 350px;

shape-outside: url('./star.png')

}

由于我使用的图像是具有透明背景的星形，因此文本知道哪些区域是透明的，哪些区域是不透明的，并且相应地对齐。

渐变

最后，渐变也可以用作形状。渐变与图像相同，就像我们上面使用的图像示例一样，文本将知道在透明部分周围流动。

我们将使用一个带渐变的新属性 - 。的shape-image-threshold限定形状的α信道的阈值，或什么百分比的图像可以是透明的对不透明的。

我要做一个渐变的例子，是一个颜色和透明的50％/ 50％分割，并设置shape-image-threshold的.5，这意味着超过50％不透明应考虑部分图像的所有像素。

<div class="gradient"></div>
<p>Example text...</p>
.gradient {
 float: left;
 height: 300px;
 width: 100%;
 background: linear-gradient(to bottom right, #86F7CC, transparent);
 shape-outside: linear-gradient(to bottom right, #86F7CC, transparent);
 shape-image-threshold: .5;
}

我们可以看到梯度在不透明和透明的中心对角线完美分割。

结论

在这篇文章中，我们了解到shape-outside，shape-margin和shape-image-threshold，CSS形状的三个属性。我们还学习了如何使用函数值创建圆形，椭圆形，插入矩形和文本可以流动的复杂多边形，并演示了形状如何检测图像和渐变的透明部分。

您可以在以下http://www.ikinsoft.com/demo/cssshapes/index.html找到本文的所有示例。

. 使用 Shape-outside 在浮动图像周围弯曲文本

它是一个允许设置形状的 CSS 属性。它还有助于定义文本流动的区域。css代码：

.any-shape {
  width: 300px;
  float: left;
  shape-outside: circle(50%);
}
复制代码

2. 魔法组合

这个小组合实际上可以防止你在 HTML 中遇到的大多数布局错误的问题。我们确实不希望水平滑块或绝对定位的项目做他们想做的事情，也不希望到处都是随机的边距和填充。所以这是你们的魔法组合。

* {
padding: 0;
margin: 0;
max-width: 100%;
overflow-x: hidden;
position: relative;
display: block;
}
复制代码

有时“display:block”没有用，但在大多数情况下，你会将 <a> 和 <span> 视为与其他块一样的块。所以，在大多数情况下，它实际上会帮助你！

3. 拆分 HTML 和 CSS

这更像是一种“工作流程”类型的技巧。我建议你在开发时创建不同的 CSS 文件，最后才合并它们。例如，一个用于桌面，一个用于移动等。最后，你必须合并它们，因为这将有助于最大限度地减少您网站的 HTTP 请求数量。

同样的原则也适用于 HTML。如果你不是在 Gatsby 等 SPA 环境中进行开发，那么 PHP 可用于包含 HTML 代码片段。例如，你希望在单独的文件中保留一个“/modules”文件夹，该文件夹将包含导航栏、页脚等。因此，如果需要进行任何更改，你不必在每个页面上都对其进行编辑。模块化越多，结果就越好。

4. ::首字母

它将样式应用于块级元素的第一个字母。因此，我们可以从印刷或纸质杂志中引入我们熟悉的效果。如果没有这个伪元素，我们将不得不创建许多跨度来实现这种效果。例如：

这是如何做到的？代码如下：

p.intro:first-letter {
  font-size: 100px;
  display: block;
  float: left;
  line-height: .5;
  margin: 15px 15px 10px 0 ;
}
复制代码

5. 四大核心属性

CSS 动画提供了一种相对简单的方法来在大量属性之间平滑过渡。良好的动画界面依赖于流畅流畅的体验。为了在我们的动画时间线中保持良好的性能，我们必须将我们的动画属性限制为以下四个核心：

  • 缩放 - transform:scale(2)
  • 旋转 - transform:rotate(180deg)
  • 位置 – transform:translateX(50rem)
  • 不透明度 - opacity: 0.5

边框半径、高度/宽度或边距等动画属性会影响浏览器布局方法，而背景、颜色或框阴影的动画会影响浏览器绘制方法。所有这些都会大大降低您的 FPS (FramesPerSecond)。您可以使用这些属性来产生一些有趣的效果，但应谨慎使用它们以保持良好的性能。

6. 使用变量保持一致

保持一致性的一个好方法是使用 CSS 变量或预处理器变量来预定义动画时间。

:root{ timing-base: 1000;}
复制代码

在不定义单元的情况下设置基线动画或过渡持续时间为我们提供了在 calc() 函数中调用此持续时间的灵活性。此持续时间可能与我们的基本 CSS 变量不同，但它始终是对该数字的简单修改，并将始终保持一致的体验。

7. 圆锥梯度

有没有想过是否可以只使用 CSS 创建饼图？好消息是，您实际上可以！这可以使用 conic-gradient 函数来完成。此函数创建一个由渐变组成的图像，其中设置的颜色过渡围绕中心点旋转。您可以使用以下代码行执行此操作：

.piechart {
  background: conic-gradient(rgb(255, 132, 45) 0% 25%, rgb(166, 195, 209) 25% 56%, #ffb50d  56% 100%);
  border-radius: 50%;
  width: 300px;
  height: 300px;
}
复制代码

8. 更改文本选择颜色

要更改文本选择颜色，我们使用 ::selection。它是一个伪元素，在浏览器级别覆盖以使用您选择的颜色替换文本突出显示颜色。使用光标选择内容后即可看到效果。

::selection {
     background-color: #f3b70f;
 }
复制代码

9. 悬停效果

悬停效果通常用于按钮、文本链接、站点的块部分、图标等。如果您想在有人将鼠标悬停在其上时更改颜色，只需使用相同的 CSS，但要添加 :hover到它并更改样式。这是您的方法；

.m h2{ 
    font-size:36px; 
    color:#000; 
    font-weight:800; 
} 
.m h2:hover{ 
    color:#f00; 
}
复制代码

当有人将鼠标悬停在 h2 标签上时，这会将您的 h2 标签的颜色从黑色更改为红色。它非常有用，因为如果您不想更改它，则不必再次声明字体大小或粗细。它只会更改您指定的任何属性。

10.投影

添加此属性可为透明图像带来更好的阴影效果。您可以使用给定的代码行执行此操作。

.img-wrapper img{
          width: 100% ;
          height: 100% ;
          object-fit: cover ;
          filter: drop-shadow(30px 10px 4px #757575);
 }
复制代码

11. 使用放置项居中 Div

居中 div 元素是我们必须执行的最可怕的任务之一。但不要害怕我的朋友，你可以用几行 CSS 将任何 div 居中。只是不要忘记设置display:grid; 对于父元素，然后使用如下所示的 place-items 属性。

main{
     width: 100% ;
      height: 80vh ;
      display: grid ;
      place-items: center center;
}
复制代码

12. 使用 Flexbox 居中 Div

我们已经使用地点项目将项目居中。但是现在我们解决了一个经典问题，使用 flexbox 将 div 居中。为此，让我们看一下下面的示例：

<div class="center h-48">
  <div></div>
</div>
复制代码
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #b8b7cd;
}
复制代码

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

  • display: flex; 这确保父容器具有 flexbox 布局。
  • align-items: center; 这可确保 flex 子项与横轴的中心对齐。
  • justify-content: center; 这确保 flex 子项与主轴的中心对齐。

之后，我们就有了常用的圆形 CSS 代码。现在这个圆是垂直和水平居中的，试试吧！

最后

如果你觉得此文对你有一丁点帮助，点个赞。或者可以加入我的开发交流群：1025263163相互学习，我们会有专业的技术答疑解惑

如果你觉得这篇文章对你有点用的话，麻烦请给我们的开源项目点点star: https://gitee.com/ZhongBangKeJi/CRMEB不胜感激 ！


在线咨询
上一篇：JavaScript 的 .reduce() 函数的完整指南（带有真实示例）
下一篇：重大好消息！《奇迹网页版》即将开测

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 鹰潭 林口县 顺德区 通州市 黄山 利川市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服