使用HTML和CSS3類比心跳的實現方法

來源:互聯網
上載者:User
本文通過代碼給大家介紹了HTML+CSS3類比心的跳動的實現方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧

廢話不多說了,直接給大家貼代碼了,具體代碼如下所示:

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <title>類比心的跳動</title></head><style type="text/css">    * {    margin: 0;    padding: 0;}body {    background-color: #D4CECE;}.big {    width: 200px;    height: 200px;    margin: 0 auto;    position: relative;    animation: heartAnimation 0.7s linear 0s infinite;}.big #heart {    margin: 5px 0;    width: 100%;    height: 100%;    background-color: #FF0606;    position: absolute;}.left,.right {    border-radius: 100px 100px 0 0;  /*左上 右上 右下 左下*/    box-shadow: 0px 0px 20px #FD0707;}.bottom {    box-shadow: 0px 0px 20px #FD0707;}.left {    transform: translate(-50px,150px) rotate(-45deg);  /*translate()位移 rotate() 旋轉角度*/}.right {    transform: translate(50px,150px) rotate(45deg);}.bottom {    transform: translate(0,214px) rotate(45deg) scale(.9,.9)  /*scale:定義 2D 縮放轉換。*/}/*動畫效果*/@keyframes heartAnimation{    form {            transform: scale(0.9,0.9);    }    to {            transform: scale(1.1,1.1);    }}</style><body>    <p class="big">        <p id="heart" class="left"></p>        <p id="heart" class="right"></p>        <p id="heart" class="bottom"></p>    </p></body></html>

以上就是本文的全部內容,希望對大家的學習有所協助,更多相關內容請關注topic.alibabacloud.com!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.