详解CSS如何画出一个爱心的案例
更新时间:2017年1月22日 11:03 点击:1951
小编推荐的这篇文章介绍了css如何画出一个爱心的案例,附有简单易懂的实例代码,有需要的同学快看看吧
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助。
第一步:
先画一个正方形。如图:
代码如下 | 复制代码 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css画桃心</title>
<style media="screen">
.heart-body {
width:500px;
margin:100pxauto;
position:relative;
}
.heart-shape {
position:relative;
width:100px;
height:100px;
background-color:#f70e0e;
}
</style>
</head>
<body>
<div class="heart-body">
<div class="heart-shape"></div>
</div>
</body>
</html>
|
第二步:
将利用伪元素before和 :after,在正方形的左边和上边各画一个正方形,然后再利用border-radius: 50%;属性,修饰下这两个正方形,然后就得到了两个圆,如图所示:
代码如下 | 复制代码 |
.heart-shape:before,
.heart-shape:after {
position:absolute;
content:'';
width:100px;
height:100px;
background-color:#ffc0cb;
}
.heart-shape:before {
left:-45px;
}
.heart-shape:after {
top:-45px;
}
|
利用border-radius: 50%; 属性:
代码如下 | 复制代码 |
.heart-shape:before,
.heart-shape:after {
position:absolute;
content:'';
width:100px;
height:100px;
-webkit-border-radius:50%;
/**兼容苹果;谷歌,等一些浏览器认*/
-moz-border-radius:50%;
/**兼容火狐浏览器*/
-o-border-radius:50%;
/**兼容opera浏览器*/
border-radius:50%;
background-color:#ffc0cb;
}
|
第三步:
类名为:heart-shape的div 利用transform: rotate(45deg); 属性将他们旋转45度,如图所示:
代码如下 | 复制代码 |
.heart-shape {
position:relative;
width:100px;
height:100px;
background-color:#f70e0e;
-webkit-transform: rotate(45deg);
/* Safari 和 Chrome */
-moz-transform: rotate(45deg);
/* Firefox */
-ms-transform: rotate(45deg);
/* IE 9 */
-o-transform: rotate(45deg);
/* Opera */
transform: rotate(45deg);
}
|
小颖把圆的背景色和正方形的背景色没给统一的颜色,是为了大家更好的看到明显的效果图,接下来小颖将其背景色设置成统一的,最终的爱心就出来了,如图所示:
代码如下 | 复制代码 |
.heart-shape:before,
.heart-shape:after {
position:absolute;
content:'';
width:100px;
height:100px;
-webkit-border-radius:50%;
/**兼容苹果;谷歌,等一些浏览器认*/
-moz-border-radius:50%;
/**兼容火狐浏览器*/
-o-border-radius:50%;
/**兼容opera浏览器*/
border-radius:50%;
background-color:#f70e0e;
}
|
相关文章
- VPN可以虚拟出一个专用网络,让远处的计算机和你相当于处在同一个局域网中,而中间的数据也可以实现加密传输,用处很大,特别是在一些大公司,分公司处在不同的区域。...2016-01-27
解决执行maven命令时提示Process terminated的问题
这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25- 我们在作图的时候需要用到“素描”滤镜,但是点开滤镜选项就是找不到。该怎么快速找到“素描”滤镜呢?请往下看。 1、点开滤镜选项时,发现没有素描这一项。2、别急,我...2017-01-22
php 中file_get_contents超时问题的解决方法
file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢,导致php脚本超时了,但也有其它很多原因,下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25- 一般来说为了达到隐藏自身 IP,我们都会选择一些 CDN 服务,目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP,有时候分配给我们的 IP 可能表现不佳,也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP,就显得很必要了。...2022-09-23
- 这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教...2021-09-01
- 这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
php file_get_contents 设置代理抓取页面示例
file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件,如果简单的采集我们可以使用file_get_contents直接来操作,如果有防采集我们可能需要...2016-11-25- 这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09
- 这篇文章主要介绍了mybatis-plus 表名添加前缀的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-08-26
iOS APP h5快捷程序 .mobileconfig的生成
1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序,文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档,管理日益增...2021-12-23- 这篇文章主要介绍了Redis连接池配置及初始化实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-29
- 这篇文章主要介绍了详解如何清理redis集群的所有数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-18
- 这篇文章主要介绍了mybatis-plus 返回部分字段的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要介绍了mybatis的Configuration详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-04
- PHP去除html、css样式、js格式的方法很多,但发现,它们基本都有一个弊端:空格往往清除不了 经过不断的研究,最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02
pandas pd.read_csv()函数中parse_dates()参数的用法说明
这篇文章主要介绍了pandas pd.read_csv()函数中parse_dates()参数的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-05- 本篇文章主要介绍了C++中四种加密算法之AES源代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...2020-04-25