css心脏的跳动

最新推荐文章于 2024-04-03 16:36:35 发布

棒老师

最新推荐文章于 2024-04-03 16:36:35 发布

阅读量1.3k

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/HTX_HelloWorld/article/details/40213333

版权

WEB 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<img src="https://img-blog.csdn.net/20141018180949160?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvSFRYX0hlbGxvV29ybGQ=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>

<html>

<head>

	<title></title>

	<style type="text/css">

		#heart {

    position: relative;

    width: 100px;

    height: 90px;

    	-webkit-animation:htx 0.2s linear infinite;

}

#heart:before,

#heart:after {

    position: absolute;

    content: "";

    left: 50px;

    top: 0;

    width: 50px;

    height: 80px;

    background: red;

    -moz-border-radius: 50px 50px 0 0;

    border-radius: 50px 50px 0 0;

    -webkit-transform: rotate(-45deg);

       -moz-transform: rotate(-45deg);

        -ms-transform: rotate(-45deg);

         -o-transform: rotate(-45deg);

            transform: rotate(-45deg);

    -webkit-transform-origin: 0 100%;

       -moz-transform-origin: 0 100%;

        -ms-transform-origin: 0 100%;

         -o-transform-origin: 0 100%;

            transform-origin: 0 100%;

}

#heart:after {

    left: 0;

    -webkit-transform: rotate(45deg);

       -moz-transform: rotate(45deg);

        -ms-transform: rotate(45deg);

         -o-transform: rotate(45deg);

            transform: rotate(45deg);

    -webkit-transform-origin: 100% 100%;

       -moz-transform-origin: 100% 100%;

        -ms-transform-origin: 100% 100%;

         -o-transform-origin: 100% 100%;

            transform-origin :100% 100%;

}

@-webkit-keyframes htx{

			to{-webkit-transform:scale(1.3);}

		}

	</style>

</head>

<body>

	<div class="heart" id="heart"></div>

</body>

</html>

棒老师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css心脏的跳动

#heart { position: relative; width: 100px; height: 90px; -webkit-animation:htx 0.2s linear infinite;}#heart:before,#heart:after { position: absolute; content: "";
复制链接

扫一扫