图文详解如何用html和CSS制作爱心特效

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

CSS在页面布局中起到非常重要的作用,CSS不仅可以美化HTML搭建的页面,还可以制作出各种炫酷的效果,作为一个前端人员,你会用CSS画爱心吗?这篇文章就给大家分享如何用HTML和CSS绘制心形,以及CSS3实现爱心特效的代码,有一定的参考价值,感兴趣的朋友可以看看。

用html和CSS画爱心需要用到很多CSS中的属性,比如border-radius圆角,position定位,animation动画等等,如有不清楚的同学可以看看我之前的文章,或者访问 CSS视频教程,希望可以帮助到你!

实例讲解:爱心可以看作是由两个圆和一个正方形组成,正方形的边长是圆的直径。

HTML部分:

用三个div分别表示左边圆、右边圆和正方形

<div class="box">    <div class="round1"></div>    <div class="round2"></div>    <div class="bottom"></div> </div>

CSS部分:

用border-radius:50%将其设置为圆形, 用transform:rotate(45deg)将正方形旋转45度,将它和圆组合成心形

.box{     width:180px;     height:160px;     margin:100px auto;     animation:size 1s infinite;     animation-direction:alternate;     transition:1s all;     border: 1px solid black;    }    .round1{     width:100px;     height:100px;     border-radius:50%;     background-color:hotpink;     left: 0;     top: 0;     position:absolute;    }    .round2{     width:100px;     height:100px;     border-radius:50%;     background-color:hotpink;     position:absolute;     right: 0;     top: 0;    }    .bottom{     width:100px;     height:100px;     background-color:hotpink;     position:absolute;     top:40px;     left:40px;     transform:rotate(45deg);    }    @keyframes size{     0%{      transform:scale(0.6);     }     100%{      transform:scale(1);     }    }

最后用CSS3中的animation动画实现爱心特效,使爱心可以自动缩放,效果如图:

图文详解如何用html和CSS制作爱心特效

以上给大家介绍了如何用html和CSS画爱心,比较简单,初学者一定要自己动手尝试,看看你能不能绘制出爱心,希望这篇文章对你有所帮助!更多相关视频教程请访问 CSS3视频教程

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 图文详解如何用html和CSS制作爱心特效

发表评论

提供最优质的资源集合

立即查看 了解详情