freeCodeCamp “使用 CSS 和 HTML 创建更复杂的形状”练习-----创建“爱心”❤️形状

在本挑战中将用纯 CSS 创建一个心形。

首先需要了解伪元素 ::before 和 ::after。伪元素可以在所选元素之前或之后添加一些内容。

在下面的代码中，::before 伪元素用来给 class 为 heart 的元素添加一个正方形：

.heart::before {content: "";  /*必须有的*/background-color: yellow;border-radius: 25%;position: absolute;height: 50px;width: 70px;top: -50px;left: 5px;
}

::before 和 ::after 必须配合 content 来使用。这个属性通常用来给元素添加内容诸如图片或者文字。

尽管有时 ::before 和 ::after 是用来实现形状而非文字，但 content 属性仍然是必需的，此时它的值可以是空字符串。

在上面的例子里，class 为 heart 元素的 ::before 伪类添加了一个黄色的长方形，长方形的高和宽分别为 50px 和 70px。这个矩形有圆角，因为它的 border-radius 为 25%，它的位置是绝对位置，位于离元素左边和顶部分别是 5px、50px 的位置。

把屏幕里的元素变成心形。

在 heart::after 选择器里，把 background-color 改成 pink，把 border-radius 改成 50%。

接下来，用类选择器选取 class 为 heart（只是 heart）的元素，为它添加 transform 属性。使用 rotate() 函数并设置角度为 -45 度。

最后，在 heart::before 选择器里面，设置 content 属性值为空字符串。

<style>.heart {position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;background-color: pink;height: 50px;width: 50px;transform:rotate(-45deg) ;}.heart::after {background-color: pink;content: "";border-radius: 50%;position: absolute;width: 50px;height: 50px;top: 0px;left: 25px;}.heart::before {content: "";background-color: pink;border-radius: 50%;position: absolute;width: 50px;height: 50px;top: -25px;left: 0px;}
</style>
<div class="heart"></div>

可可爱爱的粉色小❤️ 就出来啦 ~

练习链接：https://chinese.freecodecamp.org/learn/responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html

freeCodeCamp “使用 CSS 和 HTML 创建更复杂的形状”练习-----创建“爱心”❤️形状相关推荐

手动创建线程更好哦_如何通过创建更好的工作流程找到下一个大想法
手动创建线程更好哦 by Kashyap Bhansali 由Kashyap Bhansali 如何通过创建更好的工作流程找到下一个大想法 (How to find your next big ide ...
sketch浮动布局_使用智能布局和调整大小在Sketch中创建更好的可重用符号
sketch浮动布局 Sketch is a widely used tool for UI designs. It implemented the Sketch是用于UI设计的广泛使用的工具. 它实 ...
upan启动写入usb驱动_为什么创建可启动USB驱动器比创建可启动CD更复杂？
upan启动写入usb驱动 Creating bootable CDs and DVDs tends to be a simple, straightforward process, but why ...
睡眠研究可以帮助创建更好的AI模型吗？
我们为什么要睡觉?一个明显的原因是恢复我们身体和四肢的力量.但是睡眠的另一个非常重要的作用是巩固记忆并组织清醒时大脑摄入的所有信息.缺乏适当睡眠的人会认知能力下降,记忆力下降. 睡眠的奇观和奥秘仍然是 ...
图像分割更好的细分_为博客文章创建更好图像的16种工具
图像分割更好的细分 Do you want to create better images for your blog posts? Images create a huge impact on h ...
恒讯科技讲解：如何创建更安全的Web服务器？
如何创建更安全的Web服务器?小编给大家总结了以下8个最重要的关键: 1.加密信息使用加密信息进出您的网站是提高Web 服务器安全性的最有效方法之一.sFTP.https.ssh 等安全协议可确保您 ...
java创建子类对象的步骤_一顿Spring骚操作：我敢说没有人比我更懂Java对象的创建！
一.开篇一问一个Spring Bean是Java对象吗?那么一个对象是Spring Bean吗? 带着这个问题我们一起来回顾Spring的生命周期流程,彻底了解一个类在Spring中究竟做了那些操作 ...
gradle创建web工程_Gradle入门：创建Web应用程序项目
gradle创建web工程这篇博客文章描述了如何使用Gradle创建一个Web应用程序项目. 更具体地说,我们想创建一个使用Java的Web应用程序项目,将我们的Web应用程序打包到WAR文件中,并 ...
SQL 创建索引的作用以及如何创建索引
SQL 创建索引的作用以及如何创建索引 SQL 创建索引的作用一.使用索引的优点: 1.通过唯一性索引(unique)可确保数据的唯一性 2.加快数据的检索速度 3.加快表之间的连接 4.减少分组和 ...
点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...

freeCodeCamp “使用 CSS 和 HTML 创建更复杂的形状”练习-----创建“爱心”❤️形状

freeCodeCamp “使用 CSS 和 HTML 创建更复杂的形状”练习-----创建“爱心”❤️形状相关推荐

最新文章

热门文章