温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何使用CSS画心形

发布时间:2021-05-18 16:46:34 阅读:154 作者:Leah 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

如何使用CSS画心形?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

1.一颗div一颗心

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

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

<div></div>

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

div {
  position:relative;
  top100px;
  left50%;
  width100px;
  height100px;
  background-color: tomato;
}

如何使用CSS画心形

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

div:before {
  content"";
  position:absolute;
  top: -50px;
  left0;
  width100px;
  height100px;
  border-radius50%;
  background-color: blue;
}
div:after{
  content"";
  position: absolute;
  top0px;
  left50px;
  width100px;
  height100px;
  background-color: yellow;
  border-radius50%;
}

如何使用CSS画心形

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

div:before {
  ...
  background-color: tomato;
}
div:after{
  ...
  background-color: tomato;
}

如何使用CSS画心形

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

div {
  position:relative;
  top100px;
  left50%;
  width100px;
  height100px;
  background-color: tomato;
  transformrotate(-45deg);
}

如何使用CSS画心形 

2.一颗心不够,那我们就画一屏

一颗心不够表达我的心意,那么就给她画出一屏幕的心。

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

❤❤❤❤❤❤❤❤❤❤❤❤

我对你有表达不完的心意,就有写不完的div:

HTML

<h2>爱无处不在...</h2>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
<div class="heart"></div>
...

浮动让它们填满整个屏幕:

.heart{
  position: relative;
  width100px;
  height90px;
  float: left;
}

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

.heart:before,
.heart:after{
  position: absolute;
  content"";
  left50px;
  top0;
  width50px;
  height80px;
  background#fc2e5a;
  border-radius50px 50px 0 0;
  transform-origin0 100%;
}
.heart:after{
  left0;
  transform-origin :100% 100%;
}

如何使用CSS画心形

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

.heart:before,
.heart:after{
  ...
  transformrotate(-45deg);
}
.heart:after{
  ...
  transformrotate(45deg);
}

如何使用CSS画心形 

3.我对你的爱有多深

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

无论有多少颗心都不能表达出我对你的爱意有多深,于是,我要让你看到我的心都是由每一个爱你的细胞所组成的:

<div class="heart"></div>

CSS:

.heart {
  position: absolute;
  left50%;
  top50%;
  width105px;
  height105px;
  margin: -52.5px 0 0 -52.5px;
}

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

.heart::before {
  content'';
  display: block;
  transition: all 400ms;
  width15px;
  height15px;
  margin: -15px 0 0 -15px;
  box-shadow30px 15px #8e1a1945px 15px #ac050075px 15px #f73f0c90px 15px #fa5f2715px 30px #74010030px 30px #8e050045px 30px #8e191860px 30px #ca130075px 30px #f34f2b90px 30px #df351f105px 30px #f77c2a15px 45px #4b000030px 45px #69010045px 45px #8e0f0b60px 45px #bf100075px 45px #f8401090px 45px #f04222105px 45px #fa572415px 60px #45131230px 60px #5a010045px 60px #840e0c60px 60px #a51d1a75px 60px #ed280590px 60px #d9321e105px 60px #f4462230px 75px #3b000045px 75px #5d1a1b60px 75px #8e1a1975px 75px #a8070090px 75px #b90a0045px 90px #3d000060px 90px #55141575px 90px #67010060px 105px #340000;
  animation: pulse 1.2s steps(1) infinite;
}

css的选择器有哪些

css的选择器可以分为三大类,即id选择器、class选择器、标签选择器。它们之间可以有多种组合,有后代选择器、子选择器、伪类选择器、通用选择器、群组选择器等等

看完上述内容,你们掌握如何使用CSS画心形的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

原文链接:https://www.jb51.net/css/686529.html

css
AI

开发者交流群×