🍅 作者主頁：Java李楊勇?

🍅 簡(jiǎn)介：Java領(lǐng)域優(yōu)質(zhì)創(chuàng)作者🏆、【java李楊勇】公號(hào)作者? ?簡(jiǎn)歷模板、學(xué)習(xí)資料、面試題庫、技術(shù)互助【關(guān)注我，都給你】

🍅 歡迎點(diǎn)贊 👍 收藏 ?留言 📝 ??

效果演示：?文末獲取源碼

代碼目錄：

主要代碼實(shí)現(xiàn)：

主頁展示：

CSS樣式：

* {margin: 0;padding: 0;}body {background: url("images/1.jpg");background-size: cover;}/*start top*/.top {width: 400px;height: 100px;margin: 60px auto;font-size: 30px;font-family: "華文行楷";color: #fff;< !--background: -webkit-linear-gradient(45deg, #ff0000, #ffcc00, #ffff99, #33ccff, #00ff33, #6600ff, #333399);-webkit-background-clip: text;-->}/*end top*//*start box*/.box {width: 310px;height: 310px;margin: auto;perspective: 800px;/*景深*/}.box .pic {position: relative;transform-style: preserve-3d;/*3d環(huán)境*/animation: play 10s linear infinite;/*動(dòng)畫名稱 執(zhí)行時(shí)間 勻速 無限執(zhí)行*/}.box ul li {list-style: none;position: absolute;top: 0;left: 0;}/*start box*//*定義一個(gè)關(guān)鍵幀*/@keyframes play {from {transform: rotateY(0deg);}to {transform: rotateY(360deg);}}/*start text*/#text {width: 500px;height: 200px;color: #6fade1;margin: auto;font-size: 24px;font-family: "方正喵嗚體";}/*end text*/</style>

HTML代碼 :

圖片替換成自己喜歡的

<!--start top--><div class="top"><marquee behavior="alternate">時(shí)光不老，我們不散</marquee></div><!--end top--><!--start box--><div class="box"><div class="pic"><ul><li><img src="images/1.png" width="" height="" alt="" /></li><li><img src="images/2.png" width="" height="" alt="" /></li><li><img src="images/3.png" width="" height="" alt="" /></li><li><img src="images/4.png" width="" height="" alt="" /></li><li><img src="images/5.png" width="" height="" alt="" /></li><li><img src="images/6.png" width="" height="" alt="" /></li></ul></div></div>

javaScript實(shí)現(xiàn)?:

<script src="js/jquery.min.js"></script><!--雪花--><script src="js/snow.js"></script><script>$(".pic ul li").each(function(i) { //遍歷var deg = 360 / $(".pic ul li").size(); //size個(gè)數(shù)//當(dāng)前的li對(duì)象 添加css樣式$(this).css({"transform": "rotateY(" + deg * i + "deg) translateZ(216px)"});$.fn.snow({minSize: 10,maxSize: 15,newOn: 500,flakeColor: "#ffffff"});});var i = 0;var str = "能夠遇見你是我最大的幸運(yùn)，有了你生活變得豐富多彩，有了你，世界變得如此迷人；你是我的世界，我的世界是你，對(duì)我來說，不是在最美好的時(shí)光遇見了你，而是遇見你后都是最美好的時(shí)光！";window.onload = function typing() {//獲取divvar mydiv = document.getElementById("text");mydiv.innerHTML += str.charAt(i);i++;var id = setTimeout(typing, 100);if (i == str.length) {clearTimeout(id);}}</script>

?作品來自于網(wǎng)絡(luò)收集、侵權(quán)立刪?

獲取完整源碼：

大家點(diǎn)贊、收藏、關(guān)注、評(píng)論啦 、查看👇🏻👇🏻👇🏻微信公眾號(hào)獲取👇🏻👇🏻👇🏻

打卡 文章 更新?61/? 100天

?專欄推薦閱讀訂閱：

java畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例《100套》

web前端期末大作業(yè)網(wǎng)頁實(shí)戰(zhàn)《100套》

HTML5+CSS網(wǎng)頁特效實(shí)戰(zhàn)分享《100套》

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的HTML+CSS+JS实现love520爱心表白的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。