怎么用css画一个跳动的心

发布时间:2022-03-10 12:00:53 作者:小新
来源:亿速云 阅读:507

这篇文章主要介绍了怎么用css画一个跳动的心,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

    代码实例:

    <!DOCTYPEhtml>

    <html>

    <head>

    <metacharset="UTF-8">

    <title>纯css画一下心</title>

    <style>

    body{

    height:100%;

    margin:0;

    }

    .demo{

    width:1px;

    height:1px;

    margin:300pxauto;

    position:relative;

    animation:tiaodong.8slinearinfinite;

    }

    .demo::before,.demo::after{

    content:'';

    position:absolute;

    width:80px;

    height:120px;

    background-color:red;

    border-radius:50px50px00;

    }

    .demo::after{

    left:28px;

    transform:rotate(45deg);

    }

    .demo::before{

    transform:rotate(-45deg);

    box-shadow:-5px-5px10pxgrey;

    }

    @keyframestiaodong{

    0%{

    transform:scale(1);

    }

    50%{

    transform:scale(1.05);

    }

    100%{

    transform:scale(1);

    }

    }

    </style>

    </head>

    <body>

    <divclass="demo"></div>

    </body>

    </html>

    用的是after和before伪元素实现的,没有考虑兼容性,在IE10之前就显示不出来了。

    可以用span元素替换掉after和before解决掉。

    需要加上:-ms-transform。

    若是用span元素画的话,需要右边的块设置z-index属性。


怎么用css画一个跳动的心怎么用css画一个跳动的心




感谢你能够认真阅读完这篇文章,希望小编分享的“怎么用css画一个跳动的心”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

推荐阅读:
  1. 怎么用纯css画一个跳动心
  2. 用CSS纯代码画一个旋转的太极图的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:怎么用callbacks.add添加回调的集合

下一篇:JavaScript工厂函数怎么用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》