當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️

發布時間：2025/3/12 HTML 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️ 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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

代碼目錄：

主要代碼實現：

HTML代碼 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Document</title> </head><style type="text/css">* {margin: 0;padding: 0;}.pic {width: 120px;height: 180px;border: 1px red solid;margin: 150px auto 0;position: relative;/*transform 旋轉元素*/transform-style: preserve-3d;transform: perspective(800px) rotateX(-10deg) rotateY(0deg);}body {background-color: black;overflow: hidden;}.pic img {position: absolute;width: 100%;height: 100%;border-radius: 5px;box-shadow: 0px 0px 10px #fff;/*倒影的設置*/-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);}.pic p {width: 1200px;height: 1200px;background: -webkit-radial-gradient(center center, 600px 600px, rgba(255, 255, 255, .5), rgba(0, 0, 0, 0));position: absolute;top: 100%;left: 50%;margin-top: -600px;margin-left: -600px;border-radius: 600px;transform: rotateX(90deg);} </style><body><div class="pic"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /><img src="img/8.jpg" /><img src="img/9.jpg" /><img src="img/10.jpg" /><img src="img/11.jpg" /><p></p></div><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function() {var imgL = $(".pic img").size();var deg = 360 / imgL;var roY = 0,roX = -10;var xN = 0,yN = 0;var play = null;$(".pic img").each(function(i) {$(this).css({$(this).attr('ondragstart', 'return false');});$(document).mousedown(function(ev) {var x_ = ev.clientX;var y_ = ev.clientY;clearInterval(play);console.log('我按下了');$(this).bind('mousemove', function(ev) {/*獲取當前鼠標的坐標*/var x = ev.clientX;var y = ev.clientY;/*兩次坐標之間的距離*/xN = x - x_;yN = y - y_;roY += xN * 0.2;roX -= yN * 0.1;console.log('移動');//$('body').append('<div style="width:5px;height:5px;position:absolute;top:'+y+'px;left:'+x+'px;background-color:red"></div>');$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});/*之前的鼠標坐標*/x_ = ev.clientX;y_ = ev.clientY;});}).mouseup(function() {$(this).unbind('mousemove');var play = setInterval(function() {xN *= 0.95;yN *= 0.95if (Math.abs(xN) < 1 && Math.abs(yN) < 1) {clearInterval(play);}roY += xN * 0.2;roX -= yN * 0.1;$('.pic').css({transform: 'perspective(800px) rotateX(' + roX + 'deg) rotateY(' + roY + 'deg)'});}, 30);});});</script></body></html>

上面的圖片文件和js文件需要引入?

源碼獲取

查看博主主頁或下方鏈接獲取

精彩推薦更新中：

HTML5大作業實戰100套

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

大家可以點贊、收藏、關注、評論我啦、需要完整文件或技術資料點擊下方微信獲取~！

總結

以上是生活随笔為你收集整理的HTML+CSS+JS实现 ❤️3D万花筒图片相册展示特效❤️的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： linux安装服务程序,将 Go 程序安
下一篇： HTML+CSS+JS实现 ❤️3D建筑