用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实现瀑布流布局与无限加载图片相册的实例代码
Dec 22 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
浅谈css3中的渐进增强和优雅降级
Dec 01 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
关于前端上传文件全面基础扫盲贴(入门)
Aug 01 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
几个解决兼容IE6\7\8不支持html5标签的几个方法
Jan 07 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
Unicode中的CJK(中日韩统一表意文字)字符小结
Dec 06 HTML / CSS
css样式important规则的正确使用方式
Jun 10 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 变量类型的强制转换
2009/10/23 PHP
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
php图片上传类 附调用方法
2016/05/15 PHP
深入分析PHP设计模式
2020/06/15 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
2012/03/05 Javascript
web性能优化之javascript性能调优
2012/12/28 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
jquery判断元素是否隐藏的多种方法
2014/05/06 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python获取指定时间差的时间实例详解
2017/04/11 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
wxpython布局的实现方法
2019/11/01 Python
Python编程快速上手——PDF文件操作案例分析
2020/02/28 Python
学习Python列表的基础知识汇总
2020/03/10 Python
Keras实现将两个模型连接到一起
2020/05/23 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
超市员工管理制度
2015/08/06 职场文书
学校标语口号大全
2015/12/26 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
Golang中interface{}转为数组的操作
2021/04/30 Golang
vue项目配置sass及引入外部scss文件
2022/04/14 Vue.js