css3之爱心表白动画特效

最新推荐文章于 2024-05-05 01:43:57 发布

云之前端

最新推荐文章于 2024-05-05 01:43:57 发布

阅读量2.7k

点赞数 2

分类专栏： css3 学习总结文章标签： css3爱心跳动 @keyframes规则的使用 transform属性的使用

本文链接：https://blog.csdn.net/qq_44586361/article/details/87935133

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

css3

3 篇文章 0 订阅

订阅专栏

春天了，又到了告白的季节，你是不是还在苦恼不知如何向心中的她（他）表白心意呢，哈哈，下面我就教大家做一个爱心表白特效

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style>
html{height: 100%;background: rgb(40,240,245);}
.heart{position:relative;width:200px;height:200px;margin:50px auto;animation: move 2s infinite alternate;}
.heart:before,
.heart:after
{content: '' ;position:absolute;left:0;top:0;width:100px;height:160px;background:red;border-radius:50px 50px 0px 0px;}
.heart:before{content: '';transform:rotate(-45deg);}
.heart:after{content: '';transform: translateX(43px) rotate(45deg);}
.heart p{position: absolute;left: 0;top:30px;}
@keyframes move{
0%{transform:scale(1.1);}
25%{transform:scale(1.2);}
50%{transform:scale(1.3);}
75%{transform:scale(1.2);}
100%{transform:scale(1.1);}
}
</style>
</head>
<body>
<div class="heart">
<p>LOVE</p>
</div>
</body>
</html>

效果图：大家可以把代码放到自己电脑上，即可查看爱心跳动的画面
该图在这里插入图片描述
各位小哥哥，小姐姐，赶快行动起来吧

云之前端

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
css3之爱心表白动画特效

春天了，又到了告白的季节，你是不是还在苦恼不知如何向心中的她（他）表白心意呢，哈哈，下面我就教大家做一个爱心表白特效&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt;&lt;style&gt;html{height: 100%;background: rgb(40,240,245);}.h...
复制链接

扫一扫