css实现放大图片
代码语言:html
所属分类:图片放大
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /** * Computes a CSS calc function that betweens a value from * A to B over viewport-width A to viewport-width B. * Requires a media query to cap the value at B. */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #bdd8f1; } .gallery { display: grid; grid-template-rows: repeat(5, 8vw); grid-template-columns: repeat(2, 20vh); transition: all 0.3s cubic-bezier(0.5, 0.8, 0.5, 0.2); background-color: #82a6cb; border-radius: 10px; padding: 0.25em; cursor: zoom-in; } @media (min-width: 40em) { .gallery { grid-template-columns: repeat(5, 18vw); grid-template-rows: repeat(2, 20vh); } } @media (min-width: 60em) { .gallery { grid-template-columns: repeat(10, 8vw); grid-template-rows: 25vh; } } img { object-fit: cover; width: 100%; height: 100%; left: 0; top: 0; transition: all 0.15s cubic-bezier(0.3, 0.1, 0.3, 0.85); position: relative; box-shadow: 0 0 0 #0000; opacity: 0.67; filter: sepia(80%) hue-rotate(180deg); } img:first-child { border-radius: 10px 10px 0 0; } img:last-child { border-radius: 0 0 10px 10px; } @media (min-width: 40em) and (max-width: 59.99em) { img:first-child { border-radius: 10px 0 0 0; } img:nth-child(5) { border-radius: 0 10px 0 0; } img:nth-child(6) { border-radius: 0 0 10px 0; } img:last-child { border-radius: 0 0 0 10px; } } @media (min-width: 60em) { img:first-child { border-radius: 10px 0 0 10px; } img:last-child { border-radius: 0 10px 10px 0; } } img:hover { opacity: 1; z-index: 1; box-shadow: 1em 1em 1em #0004; transition: all 0.3s cubic-bezier(0.3, 0.1, 0.3, 0.85); filter: sepia(0%) hue-rotate(0deg); border-radius: 5px; width: 200%; height: 600%; left: -50%; top: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0