JS特效第124弹：jquery爱心下落表白交互式动画

马coder

于 2024-02-02 17:45:00 发布

阅读量334

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_38343072/article/details/135376141

版权

坠入爱河，爱心下落的表白动画特效，可以和鼠标交互动画，很酷的jquery网页特效，先来看看效果：

一部分关键的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery爱心下落表白交互式动画</title>

    <link rel="stylesheet" href="./css/style.css">

</head>
<body>
    <!-- partial:index.partial.html -->
    <audio id="player" preload="auto">
      <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/191814/elvispresleyfallinginlove).mp3">
      </source>
      Your browser does not support the audio element. 
	</audio>
    <div class="player_container hidden animated">
        <button data-am-button="small" id="btn-mute"><i class="fa fa-volume-off"></i></button>
        <button data-am-button="large" id="btn-play-pause"><i class="fa fa-play"></i></button>
        <button data-am-button="small" id="btn-stop"><i class="fa fa-stop"></i></button>
        <div id="progress-bar"><span id="progress"></span></div>
    </div>
    <div id="opening_screen" class="animated">
        <h2 class="spinning">
            Falling in Love<br>
            click to play
        </h2>
    </div>
    <!-- Lyrics -->
    <section id="peace">

        <!-- FIRST VERSE -->

        <h2 id="wisemensay" class="lyrics animated hidden">Wise men say</h2>
        <h2 id="onlyfools1" class="lyrics animated hidden">Only fools rush in</h2>
        <h2 id="canthelp1" class="lyrics animated hidden">But I can't help </h2>
        <h2 id="fallinginlove1" class="lyrics animated hidden">Falling in love</h2>
        <h2 id="withyou1" class="lyrics animated hidden">With you</h2>
        <h2 id="shallistay" class="lyrics animated hidden">Shall I stay</h2>
        <h2 id="beasin" class="lyrics animated hidden">Would it be a sin</h2>
        <h2 id="ificanthelp" class="lyrics animated hidden">If I can't help</h2>
        <h2 id="fallinginlove2" class="lyrics animated hidden">Falling in love</h2>
        <h2 id="withyou2" class="lyrics animated hidden">With you</h2>

        <!-- SECOND VERSE -->

        <h2 id="likeariver1" class="lyrics animated hidden">Like a river flows</h2>
        <h2 id="tothesea1" class="lyrics animated hidden">Surely to the sea</h2>
        <h2 id="darlingitgoes1" class="lyrics animated hidden">Darling so it goes</h2>
        <h2 id="somethings1" class="lyrics animated hidden">Some things</h2>
        <h2 id="meanttobe1" class="lyrics animated hidden">Are meant to be</h2>
        <h2 id="takemyhand1" class="lyrics animated hidden">Take my hand</h2>
        <h2 id="wholelife1" class="lyrics animated hidden">Take my whole life too</h2>
        <h2 id="foricanthelp1" class="lyrics animated hidden">For I can't help </h2>
        <h2 id="fallinginlove3" class="lyrics animated hidden">Falling in love </h2>
        <h2 id="withyou3" class="lyrics animated hidden">With you</h2>

        <!-- THIRD VERSE -->

        <h2 id="likeariver2" class="lyrics animated hidden">Like a river flows</h2>
        <h2 id="tothesea2" class="lyrics animated hidden">Surely to the sea</h2>
        <h2 id="darlingitgoes2" class="lyrics animated hidden">Darling so it goes</h2>
        <h2 id="somethings2" class="lyrics animated hidden">Some things</h2>
        <h2 id="meanttobe2" class="lyrics animated hidden">Are meant to be</h2>
        <h2 id="takemyhand2" class="lyrics animated hidden">Take my hand</h2>
        <h2 id="wholelife2" class="lyrics animated hidden">Take my whole life too</h2>
        <h2 id="foricanthelp2" class="lyrics animated hidden">For I can't help </h2>
        <h2 id="fallinginlove4" class="lyrics animated hidden">Falling in love </h2>
        <h2 id="withyou4" class="lyrics animated hidden">With you</h2>
        <h2 id="foricanthelp3" class="lyrics animated hidden">For I can't help </h2>
        <h2 id="fallinginlove5" class="lyrics animated hidden">Falling in love </h2>
        <h2 id="withyou5" class="lyrics animated hidden">With you</h2>
        <h2 id="bemine" class="lyrics animated hidden">Happy Valentines Day</h2>
    </section>
    <!-- partial -->
    <script src='./js/jquery.min.js'></script>
    <script src="./js/script.js"></script>
</body>
</html>

全部代码：jquery爱心下落表白交互式动画