社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
首頁 web前端 H5教程 詳解html5+css3實現跑動的愛心和動態水滴效果的範例程式碼分享

詳解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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

顯示更多

熱門文章

如何修復KB5055523無法在Windows 11中安裝？
3 週前 By DDD
如何修復KB5055518無法在Windows 10中安裝？
3 週前 By DDD
<🎜>：死鐵路 - 如何馴服狼
1 個月前 By DDD
R.E.P.O.的每個敵人和怪物的力量水平
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：種植花園 - 完整的突變指南
2 週前 By DDD
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

Java教學
1662
14
CakePHP 教程
1419
52
Laravel 教程
1311
25
PHP教程
1262
29
C# 教程
1234
24
顯示更多
Related knowledge
HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡，我們以 HTML 中的表格邊框為例，討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡，我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡，我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡，我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles