首页 › HTML论坛 › html5-心跳

缘来多好 發表於 2019-12-21 16:33:00

html5-心跳

<p><span style="font-size: 14pt">html5-心跳效果</span></p>
<p><span style="font-size: 14px">　　(1) 基础布局(架子)</span></p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">&lt;div class="heart"&gt;
                        &lt;div class="left"&gt;&lt;/div&gt;
                        &lt;div class="middle"&gt;&lt;/div&gt;
                        &lt;div class="right"&gt;&lt;/div&gt;//以上三个小div作用是结合css样式 布局成一个爱心的样子
                        &lt;p&gt;I Love You&lt;/p&gt;
                &lt;/div&gt;
</pre>
</div>
<p>　　(2)css基础样式</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">* {
                                margin: 0;
                                padding: 0;
                        }

                        html {
                                background: -webkit-radial-gradient(center, #153170, #000);
                        }
</pre>
</div>
<p>　设置的背景:　<img src="https://img2018.cnblogs.com/i-beta/1747639/201912/1747639-20191221162812352-1253418493.png" alt=""></p>
<p>&nbsp;</p>
<p>&nbsp; &nbsp; (3) 爱心的组成样式</p>
<p>　　　　</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.heart {
                                position: relative;
                                width: 300px;
                                height: 300px;
                                margin: 200px auto;
                                transform: rotate(45deg);
                                animation: move 2s infinite alternate;
                        }

                        .heart div {
                                position: absolute;
                                width: 200px;
                                height: 200px;
                                background: red;
                        }

                        .heart .middle {
                                right: 0;
                                bottom: 0;
                                width: 200px;
                                height: 200px;
                        }

                        .heart .left {
                                left: 0;
                                bottom: 0;
                                border-radius: 50%;
                        }

                        .heart .right {
                                top: 0;
                                right: 0;
                                border-radius: 50%;
                        }

                        .heart p {
                                width: 200px;
                                height: 30px;
                                font: bold 25px/30px "";
                                text-align: center;
                                color: #fff;
                        }

                        .heart p {
                                position: absolute;
                                right: 0;
                                bottom: 85px;
                                transform: rotate(-45deg);
                        }　　</pre>
</div>
<p>&nbsp;组合效果如图:<img src="https://img2018.cnblogs.com/i-beta/1747639/201912/1747639-20191221162944107-380853930.png" alt=""></p>
<p>组合分解如图:div.left如图:<img src="https://img2018.cnblogs.com/i-beta/1747639/201912/1747639-20191221163222440-875452479.png" alt=""></p>
<p>&nbsp;</p>
<p>其他类似</p>
<p>&nbsp;</p>
<p>　　(4)加个跳动的动画:</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">@-webkit-keyframes move {
                                10% {
                                        transform: rotate(45deg) scale(1.1);
                                        text-shadow: 0 0 5px #fff;
                                }

                                20% {
                                        transform: rotate(45deg) scale(1.2);
                                        text-shadow: 0 0 5px #fff;
                                }

                                30% {
                                        transform: rotate(45deg) scale(1.3);
                                        text-shadow: 0 0 5px #fff;
                                }

                                40% {
                                        transform: rotate(45deg) scale(1.2);
                                        text-shadow: 0 0 5px #fff;
                                }

                                50% {
                                        transform: rotate(45deg) scale(1.3);
                                        text-shadow: 0 0 5px #fff;
                                }

                                60% {
                                        transform: rotate(45deg) scale(1.2);
                                        text-shadow: 0 0 5px #fff;
                                }

                                70% {
                                        transform: rotate(45deg) scale(1.3);
                                        text-shadow: 0 0 5px #fff;
                                }

                                80% {
                                        transform: rotate(45deg) scale(1.2);
                                        text-shadow: 0 0 10px #fff;
                                }

                                90% {
                                        transform: rotate(45deg) scale(1.1);
                                        text-shadow: 0 0 5px #fff;
                                }
</pre>
</div>
<p>　　(5)组合效果就出来啦;</p>


</div>
<div id="MySignature" role="contentinfo">
    脑子是个好东西,希望我也有o(╥﹏╥)o<br><br>
来源：https://www.cnblogs.com/xy88/p/12077307.html

查看完整版本: html5-心跳