用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 相关文章推荐
css动画效果之animation的常用样式
Mar 09 HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3 Columns分列式布局方法简介
May 03 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
Dec 30 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
HTML5 预加载让页面得以快速呈现
Aug 13 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
纯html+css实现Element loading效果
Aug 02 HTML / CSS
flex布局中使用flex-wrap实现换行的项目实践
Jun 21 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 curl参数的详解
2013/06/17 PHP
php命名空间学习详解
2014/02/27 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
详解PHP中的8个魔术常量
2020/07/06 PHP
JQuery上传插件Uploadify使用详解及错误处理
2010/04/27 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JS实现队列的先进先出功能示例
2017/05/10 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
2018/05/11 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
为Python的Tornado框架配置使用Jinja2模板引擎的方法
2016/06/30 Python
Python常用的内置序列结构(列表、元组、字典)学习笔记
2016/07/08 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
Selenium的使用详解
2018/10/19 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
JAVA高级程序员面试题
2013/09/06 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
公司外出活动方案
2014/08/14 职场文书
新农村建设汇报材料
2014/08/15 职场文书
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
小学教师见习总结
2015/06/23 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js