CSS画心形的三种方法，超级简单

一、一颗div一颗心

用一个div画出一个心，核心的方法就是使用伪元素

首先，我们在页面上先写出一个div

使用CSS，将这个div变为一个橘红色的正方形：

接着我们利用元素的两个伪元素:before和:after，画出一个蓝色的圆和一个黄色的圆，并且将它们的圆心分别定位在正方形的上边和右边。

再来，将刚刚实现的两个圆变成和正方形一样的颜色

最后，将元素div旋转45度，我们要的心形就实现了！就是这么简单

全部代码如下，拿去跟女朋友表白吧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {position: relative;top: 100px;left: 50%;width: 100px;height: 100px;background-color: tomato;}div:before {content: "";position: absolute;top: -50px;left: 0;width: 100px;height: 100px;border-radius: 50%;background-color: blue;}div:after {content: "";position: absolute;top: 0px;left: 50px;width: 100px;height: 100px;background-color: yellow;border-radius: 50%;}div:before {background-color: tomato;}div:after {background-color: tomato;}div {position: relative;top: 100px;left: 50%;width: 100px;height: 100px;background-color: tomato;transform: rotate(-45deg);}</style>
</head><body><div></div>
</body></html>

二、一颗心不够表达我的心意，那么就给她画出一屏幕的心

浮动让它们填满整个屏幕

两个伪元素代表我的左心房和右心房

让左右心房都旋转45度，就形成了我满满的一屏幕心

三、“以前我看事物，是用肉眼去看，但是在我死去的那一刹那，我开始用心眼去看这个世界，所有的事物，真的可以看得前所未有的那么清楚。” —周星驰

像素级的世界可以由box-shadow属性实现

CSS画心形的三种方法，超级简单相关推荐

css画心形原理,CSS画心形的三种方法
下面,介绍三种CSS画心形的方法.实现过程都非常简单,保证你一看就会. 1.一颗div一颗心用一个div画出一个心,核心的方法就是使用伪元素. 首先,我们在页面上先写出一个div: 使用CSS,将这 ...
word流程图整体怎么拆分_word流程图-不会做流程图？这三种方法超级简单！
在平时的办公过程中,我们一定是要会做流程图的,因为很多地方都需要使用到流程图,下面小编教大家三种方法做流程图,非常简单,一看就会! 一,在Word中制作流程图 1,新建画布首先点击"插入& ...
如何将文字转化为语音？三种方法超级简单，立刻就能学会！
是不是有很多小伙伴在剪辑视频时,想要把旁白给文字转成语音,因为可能会担心如果自己录制配音的话,自己普通话不标准.或者声音不好听,害怕会影响视频的质量.这时,智能文字转语音配音工具就派上用场了,输入文字 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
二次型化标准形的三种方法
二次型化标准形的三种方法将二次型化为标准形有利于我们了解二次型的简单形式.二次型的各种参数如正负惯性指数.得到二次型的规范形.对称矩阵合同的简单形等等.另外,化标准形也是解析几何化简二次曲线和二次曲 ...
css设置行间距的三种方法
css设置行间距的三种方法 1.使用数值来设置行间距 CSS <!DOCTYPE html> <html><head><meta charset=" ...
使用Vue三种方法实现简单计算器
使用Vue三种方法实现简单计算器代码实现了一个简单的计算器,用户可以在输入框中输入两个数字,选择一个操作符,并点击"等于"按钮,Vue.js会根据用户的输入进行计算,并将结果显示 ...
怎么给视频配音？短视频作者在用的三种方法，简单易操作
怎么给视频配音?短视频作者在用的三种方法,简单易操作如果你也是做短视频的作者,那么相信你也一定知道,做短视频并不仅仅只是简单的拍摄剪辑发布而已,其中要做的工作还有很多,比如配音就是其中的一项.虽然并 ...
三种方法构建简单的WEB服务器！
<Essential ASP.NET 本质论>举例了Socket编程的基本知识,我稍加修改弄了个简单的应用. 你可以将生成的EXE文件拷贝到服务器上,这样通过任意的WEB浏览器都可以获得该 ...

CSS画心形的三种方法，超级简单

CSS画心形的三种方法，超级简单

一、一颗div一颗心

二、一颗心不够表达我的心意，那么就给她画出一屏幕的心

三、“以前我看事物，是用肉眼去看，但是在我死去的那一刹那，我开始用心眼去看这个世界，所有的事物，真的可以看得前所未有的那么清楚。” —周星驰

CSS画心形的三种方法，超级简单相关推荐

最新文章

热门文章