Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
body {
	background-color:pink;
}
.box {
	width:120px;
	height:120px;
	background-color:#f00;
	margin:200px auto;
	margin-bottom:80px;
	transform:rotate(135deg) scale(0.9);
	animation:love 1s infinite;
	box-shadow:0 0 30px 5px rgba(255,0,0,.7);
}
.box:before,.box:after {
	content:'';
	position:absolute;
	width:120px;
	height:120px;
	border-radius:50%;
	background-color:#f00;
	box-shadow:0 0 30px 5px rgba(255,0,0,.7);
}
.box:after {
	left:-68px;
}
.box:before {
	top:68px;
}
@keyframes love {
	0% {
	transform:rotate(135deg) scale(0.85);
}
50% {
	transform:rotate(135deg) scale(1);
}
100% {
	transform:rotate(135deg) scale(0.85);
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

css实现跳动的爱心

更新时间:2022-05-13 01:37:38

0