css实现图片拼凑鼠标悬浮放大弹出文字介绍效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图片拼凑鼠标悬浮放大弹出文字介绍效果代码
代码标签: css 图片 拼凑 鼠标 悬浮 放大 弹出 文字 介绍
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Poppins&display=swap'> <style> * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #ccc; font-family: 'Poppins',sans-serif; } .wrapper { width: 600px; height: 400px; /* border: 2px solid #666; */ background-color: #aaa; position: relative; cursor: pointer; } .post { width: 100%; height: 100%; background: center/cover #aaa; position: absolute; left: 0; top: 0; transition: .5s ease-in; } .post1 { background-image: url(//repo.bfw.wiki/bfwrepo/image/64dae3ef49dc3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90); clip-path: polygon(0 0, 54% 0, 14% 100%, 0% 100%); } .post2 { background-image: url(//repo.bfw.wiki/bfwrepo/image/64d8c31c1e518.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90); clip-path: polygon(54% 0, 100% 0, 54% 100%, 14% 100%); } .post3 { background-image: url(//repo.bfw.wiki/bfwrepo/image/64d8c2d800df3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_600,h_400,/quality,q_90); clip-path: polygon(100% 0%, 100% 0, 100% 100%, 44% 100%); } .wrapper .post:hover{ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%) !important; } .wrapper:hover .post { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); } .post-content { font-size: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0