用CSS3画一个爱心
发布时间:2021-04-26 16:53:49 作者:一筐芒果 我要评论
这篇文章主要介绍了如何用CSS3画一个爱心,帮助大家更好的理解和学习使用CSS3制作网页,感兴趣的朋友可以了解下
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
实现效果
需求/功能:
怎么用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
最新评论