js+css实现三维图片左右切换悬浮filter彩色幻灯效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现三维图片左右切换悬浮filter彩色幻灯效果代码,本来图片都是filter设置grayscale为灰色,三维前后切换,鼠标悬浮上来后变成原色彩色。
代码标签: js css 三维 图片 左右 切换 悬浮 filter 彩色 幻灯
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.5.1.css"> <style> body { margin: 0; display: flex; flex-direction: column; align-items: center; text-align: center; height: 100vh; justify-content: center; background-color: black; overflow: hidden; } .image-container { width: 200px; height: 200px; transform-style: preserve-3d; transform: perspective(1000px) rotateY(0deg); transition: transform .7s; } .image-container span { position: absolute; top: 0; left: 0; width: 100%; transform: rotateY(calc(var(--i) * 90deg)) translateZ(400px); } .image-container span img { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1/1; -o-object-fit: cover; object-fit: cover; filter: grayscale(100%); } .btn-container { position: relative; width: 80%; } .btn { position: absolute; bottom: -140px; background-color: slateblue; color: white; border: none; padding: 10px 30px; border-radius: 5px; cursor: pointer; font-size: 20px; } .btn:hover { filter: brightness(1.5); } .image-container span img:hover { filter: none; } #prev { left: 20%; } #next { right: 20%; } </style> </head> <body translate="no"> <div class="image-container"> <span style="--i: 1"> <img src="//repo.bfw.wiki/bfwrepo/image/62aa842c22705.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_300,h_300,/quality,q_90"> </s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0