海盐企业网站开发:如何创建和CSS心形

2019.09.07 海盐企业网站开发

141

CSS3提升的可行性,我们可以构建网站上只使用HTML和CSS。 你可以找到 惊人的例子 我们之前出现。 但不要操之过急的自己,一个复杂的设计需要的代码,可能会让你头疼。

相反,我们海盐企业网站开发将创建一些简单的帮助你 先和CSS理解形状和定位 之前,冒险更高级的设计。 因为情人节即将到来,让我们创建一个心形使用HTML和CSS。

读也: 18很酷的东西你不会相信使用CSS建成

最基本的

基本上,我们可以创建一个新的形状通过加入一个或多个基本形状,像矩形和圆。 如果我们检查心脏的形状我们可以发现它是由 两个圆和一个矩形的总和 。 HTML元素基本上是正方形或长方形。 多亏了CSS3边界半径,我们很容易将一个矩形转换成一个圆。

首先,添加一个 < div > 元素作为我们的心形状的基础。

1
<div 类=“心形”> < /div>

然后,我们让它成为广场通过指定宽度和高度等。 选择一个你喜欢的背景颜色。

1
2
3.
4
5
6
.heart-shape {
  位置:相对;
  宽度:200 px;
  高度:200 px;
  背景颜色:rgba (250,184,66,0.8);
}

接下来,我们将使圈。


而不是添加新的元素,我们将利用它, :在 和 :在 。 我们第一次设置 :在 它作为我们的第一圈。 我们使它成为一个平方等于在宽度和高度尺寸就像我们的div。然后,我们把它变成一个圆用border - radius 50%和把它放在左边的广场。

1
2
3.
4
5
6
7
8
9
10
11
12
13
.heart-shape:{之前
  位置:绝对;
  底:0 px;
  左:-100 px;
  宽度:200 px;
  高度:200 px;
  内容:”;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  这个特性:50%;
  背景颜色:rgba (250,184,66,0.8);
}

广场一起我们会有这样的结果:

海盐企业网站开发

在那之后,我们与伪元素创建第二个圆 :在 与我们创建《第一圈》一样的风格。 然后,我们还在广场的顶部位置。

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
.heart-shape:{后
  位置:绝对;
  前:-100 px;
  正确的:0 px;
  宽度:200 px;
  高度:200 px;
  内容:”;
   
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  这个特性:50%;
 
  背景颜色:rgba (250,184,66,0.8);
}

结果如下:

我们可以把这两个相同的样式选择器通过分组伪元素如下:

1
2
3.
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20.
.heart-shape:之前,
.heart-shape:{后
  位置:绝对;
  宽度:200 px;
  高度:200 px;
  内容:”;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  这个特性:50%;
  背景颜色:rgba (250,184,66,0.8);
}
.heart-shape:{之前
  底:0 px;
  左:-100 px;
}
.heart-shape:{后
  前:-100 px;
  正确的:0 px;
}

哈! 我们有一个心的形状,虽然没有在正确的方向上。 整理出来,我们将使用CSS3转换。

转换可以给形状的主要因素; 在这里,这意味着广场。 转换时,伪元素后会自动改变立场的主要元素。

在这里我们会旋转的心所以看到“站”。

1
2
3.
4
5
6
7
.heart-shape {
  -webkit-transform:旋转(45度);
  -moz-transform:旋转(45度);
  -ms-transform:旋转(45度);
  -o-transform:旋转(45度);
  变换:旋转(45度);
}

这是我们的心是什么样子了。

结果:

心形的完整代码如下,在HTML中:

1
<div 类=“心形”> < /div>

在我们的CSS,这将是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30.
31
.heart-shape {
  位置:相对;
  宽度:200 px;
  高度:200 px;
  -webkit-transform:旋转(45度);
  -moz-transform:旋转(45度);
  -ms-transform:旋转(45度);
  -o-transform:旋转(45度);
  变换:旋转(45度);
  背景颜色:rgba (250,184,66,1);
}
.heart-shape:之前,
.heart-shape:{后
  位置:绝对;
  宽度:200 px;
  高度:200 px;
  内容:”;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  这个特性:50%;
  背景颜色:rgba (250,184,66,1);
}
.heart-shape:{之前
  底:0 px;
  左:-100 px;
}
.heart-shape:{后
  前:-100 px;
  正确的:0 px;
}

请注意,我们海盐企业网站开发现在的alpha通道设置 rgba (250184、66、1) 在后台, 1 删除的透明度。 这就是我们的心。

现在我们有一个完美的心形,我们可以 取代另一种颜色的背景 轻松(例如粉红色或红色)。 唯一的缺点是我们 不能添加一个边界 由于堆放形状元素。 添加一个边界线会让心脏看起来怪怪的。

结论

CSS3创建一个形状像一个心形现在是方便可行的。 的 圆角边框属性 让我们 将元素或甚至是一个伪元素到一个圆 。 与 CSS3转换 ,我们可以 旋转或移动物体的坐标 轻松。

你仅受限于你的创造力和想象力!


寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP