您好,登录后才能下订单哦!
这篇文章主要讲解了“怎么用css制作一个简单的爱心效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用css制作一个简单的爱心效果”吧!
ccs制作一个简单的心跳效果的方法,添加一个盒子,充分利用ccs展现就可以啦。
1、首先我们在页面添加一个可视化的盒子,创建新一个文档,写代码先用<div class="heart"></div>
这串代码在框架<div>
标签。
代码示例
<body> <div class="heart"></div> </body>
Html代码完成。
2、将它先变成一颗心,使用css
设置动画及字体样式,heart属性使用将动画与div元素绑定,下面给大家怎么写代码,使用head
标签之间加入<style type"text/css"></style>
这串代码然后在style标签中输入*
、li
、a
文本的边框外部和元素距离为0
、默认值、掉删下划线,代码示例。
*{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;}
3、接着,使用head
标签之间加入heart
这串代码然后在style
标签中输入文本的相对定位、宽度、高度、外边距属性可以有1
到4
个值、过渡动画,代码示例
*{margin:0; padding:0;} li{list-style:none;} a{text-decoration:none;} .heart{ position:relative; width:100px; height:100px; margin:100px; animation:scale 1s linear infinite; /*名称 1s 匀速 无限循环*/
4、最后设置一下动画animation
,这里要说一下animation
必须和@keyframes
一起用,继续用head
标签之间在style
标签中输入绝对定位、宽度、高度、颜色、content
属性、外边框圆角、旋转元素,代码示例
.heart:after, .heart:before{ position:absolute; width:70px; height:100%; background-color:red; content:""; border-radius:50% 50% 0 0; } .heart:before{ left:0; transform:rotate(-52deg); } .heart:after{ right:0; transform:rotate(49deg);
代码效果
5、我们让它水平垂直两倍缩放
代码示例
@keyframes scale{ /*动画帧*/ 50%{transform:scale(2)} }
代码效果
感谢各位的阅读,以上就是“怎么用css制作一个简单的爱心效果”的内容了,经过本文的学习后,相信大家对怎么用css制作一个简单的爱心效果这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。