宝哥软件园

js实现三维(三维的缩写)悬浮效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-06

效果如下:

代码如下:

!DOCTYPE html html head meta charset=' UTF-8 ' title/title style * { margin 3360 0;padd : 0;} ul、李{列表式:无;} .容器{ perspective: 1300-web套件-perspective :1300;} .boxList { position:absolute宽度: 630像素;高度:630 px左侧:50%;左边距:-315像素;-web套件-转换-style : preserve-3d;变换样式: preserve-3d;/*动画: a1 2s 1;*/transit :所有2s;} .boxList li {左侧浮动:宽度: 200像素;高度: 200像素;margin:5px背景技术:暗青色;-网络套件-transit :全0.3跃迁:全部0.3s}。在李:上悬停{-web kit-transform :平移3d(0,0,30px);transform: translate3d(0,0,30px);background : deeppskybluebox-shadow : 30px 30px 10px rgba(0,0,0,0.5);} .在{ web套件-transform : rotateX(75度)rotateY(0度)rotateZ(45度)上;transform : rotateX(75度)rotateY(0度)rotateZ(45度);}/style/head body div=' container ' ul class=' box list ' Li/Li Li/Li Li/Li Li/Li/ul/div/body script var list=document。queryselector(' .方框列表’);窗户。onload=function(){ setInterval(transition,1000)} function transition(){ list。类名='在盒子列表上';}/脚本/html以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!

更多资讯
游戏推荐
更多+