图片焦点滚动放大效果
代码语言:html
所属分类:图片放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Merriweather&display=swap'> <style> body { margin: 0; } .background { align-items: center; background: #04FEBA; display: flex; height: 100%; justify-content: center; width: 100vw; } .container { align-items: center; display: flex; flex-direction: column; height: 600vh; justify-content: space-around; text-align: center; text-transform: uppercase; width: 100vmin; } .container p { font-family: Merriweather,sans-serif; font-size: 20px; line-height: 1.5; max-width: 70vmin; text-align: justify; text-transform: none; } .image { background: white; box-shadow: 3px 10px 10px rgba(0, 0, 0, 0.25); border: 15px solid white; border-width: 1vmin 1vmin 10vmin 1vmin; height: 70vmin; overflow: hidden; width: 70vmin; } .image img { height: 100%; object-fit: cover; width: 100%; } </style> </head> <body translate="no"> <div class="background"> <div class="container"> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png" data-scroll-zoom /> </div> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png" data-scroll-zoom /> </div> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png" data-scroll-zoom /> </div> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653ba895333.png" data-scroll-zoom /> </div> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png" data-scroll-zoom /> </div> <div class="image"> <img src="http://repo.bfw.wiki/bfwrepo/image/5d653b5271e3b.png" data-scroll-zoom /> </div> <div> <p> .........完整代码请登录后点击上方下载按钮下载查看
网友评论0