用CSS3画一个爱心
发布时间：2021-04-26 16:53:49 作者：一筐芒果 
我要评论
我要评论这篇文章主要介绍了如何用CSS3画一个爱心，帮助大家更好的理解和学习使用CSS3制作网页，感兴趣的朋友可以了解下
实现效果
需求/功能:
怎么用CSS+HTMl绘画出一个爱心.
分析:
爱心可以通过一个正方形+两个圆形组合成.
先画一个正方形+圆形, 摆放位置如下:
再添加上一个圆形.
最后再将整个图形顺时针旋转45度即可.
初步实现:
先画一个正方形:
<body>
<div id="heart"></div>
</body>
#heart{
height: 300px;
width: 300px;
border: 2px solid black;
}
给这个正方形的左边加行一个圆形.这里使用伪类:before来实现
#heart{
height: 200px;
width: 200px;
border: 2px solid black;
position: relative;
}
#heart:before{
content: '';
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%; // 正方形加圆角变成圆
position: absolute;
left: -100px; // 向左位移正方形一半的长度
}
此时图形长这样:
再添加一个圆形, 这里使用after伪类来实现.
#heart{
height: 200px;
width: 200px;
border: 2px solid black;
position: relative;
}
// 这里偷个懒.直接写一块了
#heart:before,#heart:after{
content: '';
width: 200px;
height: 200px;
border: 2px solid black;
border-radius: 50%;
position: absolute;
left: -100px;
}
// 第二个圆, 只需要向上位移正方形一半的高度
#heart:after{
left: 0;
top: -100px;
}
最后一步, 旋转一下, 然后上个颜色.去掉之前为了看清楚加的边框.
/*给heart进行旋转并加上颜色*/ transform: rotate(45deg); background-color: red;
完整代码:
<style>
body,html{
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#heart{
height: 200px;
width: 200px;
/*border: 2px solid black;*/
position: relative;
transform: rotate(45deg);
background-color: red;
}
#heart:before,#heart:after{
content: '';
width: 200px;
height: 200px;
/*border: 2px solid black;*/
border-radius: 50%;
position: absolute;
left: -100px;
background-color: red;
}
#heart:after{
left: 0;
top: -100px;
}
</style>
</head>
<body>
<div id="heart"></div>
</body>
总结:
爱心可以由一个正方形和两个圆形组成, 这里使用before和after伪类, 然后, 分别对两个伪类进行位移. 最后挤上颜色, 就可以实现一个爱心❤️.
以上就是用CSS3画一个爱心的详细内容，更多关于CSS3画一个爱心的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了基于CSS3画一个iPhone的示例代码，帮助大家更好的理解和学习使用CSS3，感兴趣的朋友可以了解下2021-04-20
css3爱心点赞图标动画特效代码是一款基于html5+css3绘制的圆形爱心图标按钮，点击图标爱心加载点亮动画特效代码。2020-08-20
HTML5 + CSS3 实现的爱心校车/班车/公交车动画效果源码
这是一款基于HTML5 + CSS3 实现的爱心校车/班车/公交车动画效果源码。画面中心一辆公交车向右行驶，公交车行驶过程中不断地上下起伏，同时远处不断有树木从视线中划过，公2020-06-02
是一段实现了全屏粉红色爱心花瓣飘舞背景动画特效代码，非常的浪漫唯美，欢迎对此特效感兴趣的朋友前来下载使用2020-05-18
这是一款基于CSS3实现的爱心熊宝宝动画效果源码。画面中心坐着一个面带微笑的小熊，小熊周围不时地有红色的爱心闪烁变换。该动画效果基于纯css3 animation属性绘制实现2020-04-29
这是一款基于CSS3实现献爱心的小狗动画效果源码。画面中一只站立的小狗手持一个爱心形状的气球，小狗上下跳跃，爱心气球不断地变大变小。整体动画基于纯css3 animation绘制2020-04-28
是一段基于css3 animation属性制作的彩色的粗线条爱心形状加载动画特效，非常有意思，欢迎有兴趣的朋友前来下载使用2019-11-28
几何爱心图形CSS3特效是一款基于keyframes属性绘制滑动的几何爱心图形特效，最美爱心送给最珍贵的你。欢迎需要的朋友下载使用2019-11-21
这是一款基于jQuery+css3实现飘落的爱心雨动画效果源码。在带有温馨色调的粉色卡通背景画面上，一棵棵密集的红色心形图案缓缓飘落，组成了一幅爱心雨动画视觉效果。画面中2019-08-02
是一段实现了点击爱心按钮点赞，多款大小不一爱心散开呈圆形旋转扩散动画效果，非常有意思，欢迎有兴趣的朋友们前来下载使用2018-10-15
最新评论