用CSS3画一个爱心


Posted in HTML / CSS onApril 27, 2021

实现效果

用CSS3画一个爱心

需求/功能:

怎么用CSS+HTMl绘画出一个爱心.

分析:

爱心可以通过一个正方形+两个圆形组合成.
先画一个正方形+圆形, 摆放位置如下:

用CSS3画一个爱心

再添加上一个圆形.

用CSS3画一个爱心

最后再将整个图形顺时针旋转45度即可.

用CSS3画一个爱心

初步实现:

先画一个正方形:

<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;  // 向左位移正方形一半的长度
    }

此时图形长这样:

用CSS3画一个爱心

再添加一个圆形, 这里使用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;
    }

用CSS3画一个爱心

最后一步, 旋转一下, 然后上个颜色.去掉之前为了看清楚加的边框.

/*给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画一个爱心的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
CSS3悬停效果案例应用
Nov 21 HTML / CSS
CSS3 透明色 RGBA使用介绍
Aug 06 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
Oct 08 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
CSS3点击按钮圆形进度打钩效果的实现代码
Mar 30 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 HTML / CSS
HTML5中 rem适配方案与 viewport 适配问题详解
Apr 27 #HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
You might like
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
在JavaScript中,为什么要尽可能使用局部变量?
2009/04/06 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
Bootstrap CSS组件之导航(nav)
2016/12/17 Javascript
详解使用Vue Router导航钩子与Vuex来实现后退状态保存
2017/09/11 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
javascript 设计模式之享元模式原理与应用详解
2020/04/08 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
2018/02/24 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
一个SQL面试题
2014/08/21 面试题
个人能力自我鉴赏
2014/01/25 职场文书
小学生感恩演讲稿
2014/04/25 职场文书
离职保密承诺书
2014/05/28 职场文书
旷工辞退通知书
2015/04/17 职场文书
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Python必备技巧之函数的使用详解
2022/04/04 Python