T: 400-6065-301
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转换 ,我们可以 旋转或移动物体的坐标 轻松。
你仅受限于你的创造力和想象力!
