css怎么实现心形插图

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

前期预备知识：

  • 明白正方形的画法。

  • 明白圆形的画法。

  • 明白什么是定位。

  • 明白怎么旋转。

话不多说，先教大家怎么用css画一个圆形。

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

1.png

由于我们的爱心是由两个圆和一个正方形组成的，所以我们还需要再来一个圆形。

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

2.png

第三步我们就需要做一个正方形了。

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

2-1.png

做完这些的效果已经基本上出来了，但是我们还需要调整一下爱心的角度，这时就需要用到我们css样式中的transform中的rotate属性了。

我们由于需要把三个div都旋转角度，所以我们把这三个div放在一个div里面。具体代码如下：

.main{
    transform: rotate(45deg);
    margin: 300px;
}

做到现在，我们的爱心就已经做出来咯。效果图如下：

3.png

全部代码如下（包含HTML代码和CSS代码）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
			*{
			    margin: 0px;
			    padding: 0px;
			}
			.main{
			    transform: rotate(45deg);
			    margin: 300px;
			}
			.disc1{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin:300px 0px 0px 300px;
			    border-radius:100%;
			    float:left;
			}
			.disc2{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin:250px 0px 0px 0px;
			    border-radius:100%;
			    float:left;
			    position: relative;
			    right: 50px;
			}
			.square{
			    width: 100px;
			    height: 100px;
			    border:1px solid red;
			    background-color: red;
			    margin: 300px 0px 0px 0px;
			    float: left;
			    position: relative;
			    right: 152px;
			}
		</style>
    </head>
    <body>
        <div class="main">
            <div class="disc1"></div>
            <div class="disc2"></div>
            <div class="square"></div>
        </div>
    </body>
</html>

（学习视频分享：css视频教程）

以上就是css怎么实现心形的详细内容，更多请关注亿码酷站其它相关文章！



css怎么实现心形
—–文章转载自PHP中文网如有侵权请联系ymkuzhan@126.com删除

下载声明：
  • 本站资源如无特殊说明默认解压密码为www.ymkuzhan.com建议使用WinRAR解压；
  • 本站资源来源于用户分享、互换、购买以及网络收集等渠道，本站不提供任何技术服务及有偿服务，资源仅提供给大家学习研究请勿作它用。
  • 赞助本站仅为维持服务器日常运行并非购买程序及源码费用因此不提供任何技术支持，如果你喜欢该程序，请购买正版!
    • 版权声明：
  • 下载本站资源学习研究的默认同意本站【版权声明】若本站提供的资源侵犯到你的权益，请提交版权证明文件至邮箱ymkuzhan#126.com(将#替换为@)站长将会在三个工作日内为您删除。
    • 免责声明：
  • 您好，本站所有资源(包括但不限于：源码、素材、工具、字体、图像、模板等)均为用户分享、互换、购买以及网络收集而来，并未取得原始权利人授权，因此禁止一切商用行为，仅可用于个人研究学习使用。请务必于下载后24小时内彻底删除，一切因下载人使用所引起的法律相关责任，包括但不限于:侵权,索赔,法律责任,刑事责任等相关责任,全部由下载人/使用人,全部承担。以上说明,一经发布视为您已全部阅读，理解、同意以上内容，如对以上内容持有异议，请勿下载，谢谢配合！支持正版，人人有责，如不慎对您的合法权益构成侵犯，请联系我们对相应内容进行删除，谢谢！