CSS3实现跳动的红心

最新推荐文章于 2024-05-11 20:27:16 发布

Java-sky

最新推荐文章于 2024-05-11 20:27:16 发布

阅读量863

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_42187731/article/details/81201774

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>跳动的心</title>
		<!--添加样式
			给浏览器界面添加背景body
        -->
		<style>
			body{
				background-image: url("img/333 - 副本.jpg");
				
			}
			.heart{
				width:200px;
				height:200px;
				background-color: red;
				/*添加阴影*/
				/*box-shadow: 0px 0px 70px #d5093c;*/
				
				/*实现跳动, 跳动名称,一次秒数,无限循环*/
				animation: haha 1s infinite;
			}
			
			.center1{
				transform: rotate(45deg);
				/*定位*/
				position:absolute;
				left:481px;
				top:270px;
				
			}
			.left1{
				border-radius: 100px;
				/*定位*/
				position:absolute;
				left:414px;
				top:201px;
				box-shadow: 0px 0px 70px #d5093c;
			}
			.right1{
				border-radius: 100px;
				/*定位*/
				position:absolute;
				left:550px;
				top:200px;
				box-shadow: 0px 0px 70px #d5093c;
			}
		
			
			@keyframes haha{
				0%{transform: scale(1)rotate(45deg)}
				50%{transform: scale(1.3)rotate(45deg)}
				100%{transform: scale(1)rotate(45deg)}
			}
			
		</style>
	</head>
	<body>
		<!--
			class中可以加两个, 如果重复代码,可以直接写入heart中,如上style中.
		-->
		<div class="heart left1"></div>
		<div class="heart right1"></div>	
	    <div class="heart center1"></div>
	</body>
</html>

Java-sky

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3实现跳动的红心

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;跳动的心&lt;/title&gt; &lt;!--添加样式给浏览器界面添加背景body --&gt; &lt;style&gt; b
复制链接

扫一扫

专栏目录