3d-tv实现一个三维电视墙立体相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:3d-tv实现一个三维电视墙立体相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> html { overflow:hidden; } body { position:absolute; margin:0px; padding:0px; background:#4f5a70; width:100%; height:100%; } a { color:rgba(255,255,255,0.6); outline:none; text-decoration:none; -webkit-transition:0.2s; transition:0.2s; } a:hover,a:focus { color:#74777b; text-decoration:none; } #screen { position:absolute; left:10%; top:10%; width:80%; height:80%; background:#3e495d; } #screen img { position:absolute; cursor:pointer; visibility:hidden; width:0px; height:0px; } #screen .tvover { border:solid #876; opacity:1; filter:alpha(opacity=100); } #screen .tvout { border:solid #fff; opacity:0.7; } #bankImages { display:none; } </style> </head> <body> <div id="screen"></div> <div id="bankImages"> <img alt="" src="//repo.bfw.wiki/bfwrepo/image/5e62eef0d452a.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_200,/quality,q_90"> <img alt="" src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_200,/quality,q_90"> <img alt="" src="//repo.bfw.wiki/bfwrepo/image/5fb34aff14a0f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_200,/quality,q_90"> <img alt="" src="//repo.bfw.wiki/bfwrepo/icon/6056bf753c238.jpg?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_200,/quality,q_90"> <img alt="" src="//repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_200,/quality,q_90"> <img alt="" src="//repo.bfw.wiki/bfwrepo/image/61ac6310a18c5..........完整代码请登录后点击上方下载按钮下载查看
网友评论0