用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实现圆角的outline效果的教程
Jun 05 HTML / CSS
CSS3实现swap交换动画
Jan 19 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
Nov 05 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
thinkphp的c方法使用示例
2014/02/24 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
ThinkPHP框架安全实现分析
2016/03/14 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
Thinkphp 在api开发中异常返回依然是html的解决方式
2019/10/16 PHP
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
js实现网站最上边可关闭的浮动广告条代码
2015/09/04 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序按钮点击动画效果的实现
2019/09/04 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
python logging类库使用例子
2014/11/22 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Django中Forms的使用代码解析
2018/02/10 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
pygame实现简易飞机大战
2018/09/11 Python
Python中如何导入类示例详解
2019/04/17 Python
Python OpenCV 调用摄像头并截图保存功能的实现代码
2019/07/02 Python
Python递归函数特点及原理解析
2020/03/04 Python
爬虫代理的cookie如何生成运行
2020/09/22 Python
使用HTML5的表单验证的简单示例
2015/09/09 HTML / CSS
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
工厂仓管员岗位职责范本
2014/07/17 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2015年学校办公室工作总结
2015/05/26 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python
php修改word的实例方法
2021/11/17 PHP