🍅 作者主頁：Java李楊勇?

🍅 簡介：Java領域優質創作者🏆、【java李楊勇】公號作者? ?簡歷模板、學習資料、面試題庫、技術互助【關注我，都給你】

🍅 歡迎點贊 👍 收藏 ?留言 📝 ??

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

代碼目錄：

主要代碼實現：

主頁展示：

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環境*/animation: play 10s linear infinite;/*動畫名稱 執行時間 勻速 無限執行*/}.box ul li {list-style: none;position: absolute;top: 0;left: 0;}/*start box*//*定義一個關鍵幀*/@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">時光不老，我們不散</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實現?:

<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個數//當前的li對象 添加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 = "能夠遇見你是我最大的幸運，有了你生活變得豐富多彩，有了你，世界變得如此迷人；你是我的世界，我的世界是你，對我來說，不是在最美好的時光遇見了你，而是遇見你后都是最美好的時光！";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>

?作品來自于網絡收集、侵權立刪?

獲取完整源碼：

大家點贊、收藏、關注、評論啦 、查看👇🏻👇🏻👇🏻微信公眾號獲取👇🏻👇🏻👇🏻

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

?專欄推薦閱讀訂閱：

java畢設項目精品實戰案例《100套》

web前端期末大作業網頁實戰《100套》

HTML5+CSS網頁特效實戰分享《100套》

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。