詳解html5+css3實現跑動的愛心和動態水滴效果的範例程式碼分享-H5教程-PHP中文網

首頁

web前端

H5教程

詳解html5+css3實現跑動的愛心和動態水滴效果的範例程式碼分享

黄舟

Mar 22, 2017 pm 03:33 PM

　　大風起兮雲飛揚，安得猛士兮走四方!html5+css3，不學不行。做web開發已經好幾年了，見證了太多語言的崛起和隕落。其實身為程式設計師最苦逼的事情莫過於每天要不停的追趕各大公司新出的框架和語言(這首當其衝的就是.net程式設計師，當然很不幸，我就是.net成員，這剛把mvc 4.0整明白現在5.0又出來了。 so, 程序猿們，繼續學習。

　　html5+css3時代，簡稱3+5時代(3+5是我自己瞎編的，沒有任何依據- -)顯然已經鋪天蓋地而來，2014年10月29日，萬維網聯盟宣布，經過接近8年的艱苦努力，該標準規範終於製定完成。這也就以為是，我們又該趕快學習了，不然又要奧特曼了。其實我很早以前就開始接觸html5了。

　　我寫這篇博客，我不想在這叨叨html5與html4的區別，我想這些工作已經有很多人做了。我只是憑藉自己的興趣愛好+項目的需要在這裡demo一下。

　　#程式碼效果：ps:水滴效果如果無法顯示，可以在下方下載原始程式碼。

詳解html5+css3實現跑動的愛心和動態水滴效果的範例程式碼分享

#　　Html 部分：

<!--爱心-->
        <div class="heart" id="heart"></div>
        <!--左边的箭头-->
        <span class="arrow arrow-down"></span>
        <!--右边的箭头-->
        <span class="arrow arrow-down" style="margin-left:152px;"></span>
        <!--水滴效果-->
        <div class="">
            <span class="water" style="margin-left:10px;"></span>
            <span class="water" style="margin-left:200px;"></span>
            <span class="water" style="margin-left:50px;"></span>
            <!--原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou-->
            <span class="water" style="margin-left:120px;"></span>
            <span class="water" style="margin-left:30px;"></span>
            <span class="water" style="margin-left:170px;"></span>
            <span class="water" style="margin-left:200px;"></span>
        </div>

　　css部分：ps:css3裡面一些核心的屬性我都加了註釋，如果大家有不明白的可以留言。另外，程式碼加入了許多這種內容（類似「原文出自......」），相信大家都懂的，這是為了防止惡意爬行剽竊的行為！支援正版 :)

<style>
        /*爱心*/
        #heart {
            position: relative;
            width: 100px;
            height: 90px;
            margin-left: 200px;
            transform: rotate3d(0.7, 0.5, 0.7, 45deg);
            -ms-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* IE 9 */
            -moz-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Firefox */
            -webkit-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Safari and Chrome */
            -o-transform: rotate3d(0.7, 0.5, 0.7, 45deg); /* Opera */
            /*这里需要插入一段小广告了，不得不说html5+css3实现了各个浏览器更好的兼容模式，这给开发者减少了很多痛苦*/
            -webkit-transition-duration: 250ms;
            -webkit-transition-function: ease-out;
            -ms-transition-duration: 250ms;
            -ms-transition-function: ease-out;
            -moz-transition-duration: 250ms;
            -moz-transition-function: ease-out;
            -o-transition-duration: 250ms;
            -o-transition-function: ease-out;
            -webkit-user-select: none;
            /*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/
            -ms-user-select: none;
            -moz-user-select: none;
            -o-user-select: none;
            opacity: 1;
            animation: myHeart 5s;
            -moz-animation: myHeart 5s; /* Firefox */
            -webkit-animation: myHeart 5s; /* Safari 和 Chrome */
            -o-animation: myHeart 5s; /* Opera */
            -webkit-animation-name: myHeart;
            -ms-animation-name: myHeart;
            animation-name: myHeart;
            -webkit-animation-duration: 5s;
            -ms-animation-duration: 5s;
            animation-duration: 5s;
            /*nimation-iteration-count: 属性定义动画的播放次数  infinite为无限次播放*/
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: ease-in-out;
            -ms-animation-timing-function: ease-in-out;
            animation-timing-function: ease-in-out;
            /*animation-dela: 属性定义动画何时开始*/
            -webkit-animation-delay: 0s;
            -ms-animation-delay: 0s;
            animation-delay: 0s;
            -webkit-animation-play-state: running;
            -ms-animation-play-state: running;
            animation-play-state: running;
        }

            #heart:before,
            #heart:after {
                position: absolute;
                content: "";
                left: 50px;
                top: 0;
                width: 50px;
                height: 80px;
                /*园友们可以注意: 这里是实现颜色渐变效果的地方*/
                background: radial-gradient(#f5ebeb,#f77979,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);
                /*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/
                -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);
                /*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/
                transform: rotate(45deg);
                /*transform-origin：属性允许您改变被转换元素的位置*/
                -webkit-transform-origin: 100% 100%;
                -moz-transform-origin: 100% 100%;
                -ms-transform-origin: 100% 100%;
                -o-transform-origin: 100% 100%;
                transform-origin: 100% 100%;
            }

            #heart:hover {
                -webkit-transform: scale(1.2);
                opacity: 0.9;
            }

        /*这里是每执行到一个百分比时，所执行的效果，其实在这里可以做很多事情*/
        @keyframes myHeart {
            0% {
                transform: scale(0.05);
                width: 10px;
                height: 10px;
                opacity: 0.05;
                margin-left: 20px;
            }

            10% {
                transform: scale(0.1);
                width: 50px;
                height: 50px;
                opacity: 0.1;
            }

            20% {
                transform: scale(0.2);
                opacity: 0.2;
            }

            30% {
                transform: scale(0.3);
                opacity: 0.3;
            }

            40% {
                transform: scale(0.4);
                opacity: 0.4;
            }

            50% {
                transform: scale(0.5);
                opacity: 0.5;
            }

            60% {
                transform: scale(0.6);
                opacity: 0.6;
            }

            70% {
                transform: scale(0.7);
                opacity: 0.7;
            }

            80% {
                transform: scale(0.8);
                opacity: 0.8;
            }

            90% {
                transform: scale(0.9);
                opacity: 0.9;
            }

            100% {
                transform: scale(1.0);
                opacity: 1.0;
            }
        }

        @-moz-keyframes myHeart /* Firefox */
        {
            0% {
                -moz-transform: scale(0.05);
                width: 10px;
                height: 10px;
                /*****  原文出自 博客园 请叫我头头哥： www.cnblogs.com/toutou  ******/
                opacity: 0.05;
                margin-left: 20px;
            }

            10% {
                -moz-transform: scale(0.1);
                width: 50px;
                height: 50px;
                opacity: 0.1;
            }

            20% {
                -moz-transform: scale(0.2);
                opacity: 0.2;
            }

            30% {
                -moz-transform: scale(0.3);
                opacity: 0.3;
            }

            40% {
                -moz-transform: scale(0.4);
                opacity: 0.4;
            }

            50% {
                -moz-transform: scale(0.5);
                opacity: 0.5;
            }

            60% {
                -moz-transform: scale(0.6);
                opacity: 0.6;
            }

            70% {
                -moz-transform: scale(0.7);
                opacity: 0.7;
            }

            80% {
                -moz-transform: scale(0.8);
                opacity: 0.8;
            }

            90% {
                -moz-transform: scale(0.9);
                opacity: 0.9;
            }

            100% {
                -moz-transform: scale(1.0);
                opacity: 1.0;
            }
        }

        @-webkit-keyframes myHeart /* Safari 和 Chrome */
        {
            0% {
                -webkit-transform: scale(0.05);
                width: 10px;
                height: 10px;
                opacity: 0.05;
                margin-left: 20px;
            }

            10% {
                -webkit-transform: scale(0.1);
                width: 50px;
                height: 50px;
                opacity: 0.1;
            }

            20% {
                -webkit-transform: scale(0.2);
                opacity: 0.2;
            }

            30% {
                -webkit-transform: scale(0.3);
                opacity: 0.3;
            }

            40% {
                -webkit-transform: scale(0.4);
                opacity: 0.4;
            }

            50% {
                -webkit-transform: scale(0.5);
                opacity: 0.5;
            }

            60% {
                -webkit-transform: scale(0.6);
                opacity: 0.6;
            }

            70% {
                -webkit-transform: scale(0.7);
                opacity: 0.7;
            }

            80% {
                -webkit-transform: scale(0.8);
                opacity: 0.8;
            }

            90% {
                -webkit-transform: scale(0.9);
                opacity: 0.9;
            }

            100% {
                -webkit-transform: scale(1.0);
                opacity: 1.0;
            }
        }

        @-o-keyframes myHeart /* Opera */
        {
            0% {
                -o-transform: scale(0.05);
                width: 10px;
                height: 10px;
                opacity: 0.05;
                margin-left: 20px;
            }

            10% {
                -o-transform: scale(0.1);
                width: 50px;
                height: 50px;
                opacity: 0.1;
            }

            20% {
                -o-transform: scale(0.2);
                opacity: 0.2;
            }

            30% {
                -o-transform: scale(0.3);
                opacity: 0.3;
            }

            40% {
                -o-transform: scale(0.4);
                opacity: 0.4;
            }

            50% {
                -o-transform: scale(0.5);
                opacity: 0.5;
            }

            60% {
                -o-transform: scale(0.6);
                opacity: 0.6;
            }

            70% {
                -o-transform: scale(0.7);
                opacity: 0.7;
            }

            80% {
                -o-transform: scale(0.8);
                opacity: 0.8;
            }

            90% {
                -o-transform: scale(0.9);
                opacity: 0.9;
            }

            100% {
                -o-transform: scale(1.0);
                opacity: 1.0;
            }
        }

        .arrow {
            width: 40px;
            height: 40px;
            position: relative;
            display: inline-block;
            margin: 10px 10px;
        }

            .arrow:before, .arrow:after {
                content: &#39;&#39;;
                border-color: transparent;
                border-style: solid;
                position: absolute;
            }

        .arrow-down:before {
            border: none;
            background-color: red;
            height: 50%;
            width: 30%;
            top: 0;
            left: 35%;
        }

        .arrow-down:after {
            left: 0;
            top: 50%;
            border-width: 20px 20px;
            border-top-color: red;
        }

        .water {
            height: 40px;
            width: 40px;
            display: block;
            position: relative;
        }

            .water:before {
                content: &#39; &#39;;
                height: 26px;
                width: 26px;
                position: absolute;
                top: 2px;
                left: 0px;
                z-index: 1;
                line-height: 26px;
                background: radial-gradient(#dbf5f5,#77f5f5,#21f1f1);
                border-radius: 40px;
                -webkit-border-radius: 40px;
                -moz-border-radius: 40px;
                color: #0defef;
                text-align: center;
            }

            .water:after {
                content: &#39;&#39;;
                height: 0px;
                width: 0px;
                position: absolute;
                bottom: 2px;
                left: 3px;
                border: 10px transparent solid;
                border-top-color: #0defef;
                border-width: 15px 10px 0px 10px;
            }
    </style>

以上是詳解html5+css3實現跑動的愛心和動態水滴效果的範例程式碼分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。