css实现图片鼠标悬浮标注点提示展开效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图片鼠标悬浮标注点提示展开效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&display=swap"rel="stylesheet'> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #db747a; overflow: hidden; } .card { position: relative; width: 260px; height: 320px; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014), 0 6.7px 5.3px rgba(0, 0, 0, 0.02), 0 12.5px 10px rgba(0, 0, 0, 0.025), 0 22.3px 17.9px rgba(0, 0, 0, 0.03), 0 41.8px 33.4px rgba(0, 0, 0, 0.036), 0 100px 80px rgba(0, 0, 0, 0.05); } .card--image { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .card--image img { width: 140%; height: 140%; object-fit: cover; } .card--info { --size: 20px; width: var(--size); height: var(--size); background: rgba(0, 0, 0, 0.75); border-radius: 2px; position: absolute; transition: width 550ms ease, height 550ms ease, right 550ms ease, background 550ms ease; overflow: hidden; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.014), 0 6.7px 5.3px rgba(0, 0, 0, 0.02), 0 12.5px 10px rgba(0, 0, 0, 0.025), 0 22.3px 17.9px rgba(0, 0, 0, 0.03), 0 41.8px 33.4px rgba(0, 0, 0, 0.036), 0 100px 80px rgba(0, 0, 0, 0.05), 0 0px 2.2px rgba(0, 0, 0, 0.045), 0 0px 5.3px rgba(0, 0, 0, 0.065), 0 0px 10px rgba(0, 0, 0, 0.08), 0 0px 17.9px rgba(0, 0, 0, 0.095), 0 0px 33.4px rgba(0, 0, 0, 0.115), 0 0px 80px rgba(0, 0, 0, 0.16), 0 0.2px 2.2px rgba(0, 0, 0, 0.014), 0 0.6px 5.3px rgba(0, 0, 0, 0.02), 0 1.1px 10px rgba(0, 0, 0, 0.025), 0 2px 17.9px rgba(0, 0, 0, 0.03), 0 3.8px 33.4px rgba(0, 0, 0, 0.036), 0 9px 80px rgba(0, 0, 0, 0.05); } .card--info::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 50%, transparent 100%); z-index: 1; opacity: 0; transition: opacity 550ms ease; } .card--info.info--1 { bottom: 47%; right: 80%; } .card--info.info--1 .info--image img { top: -80%; left: -20%; } .card--info.info--2 { bottom: 25%; right: 15%; } .card--info.info--2 .info--image img { right: -20%; bottom: -80%; } .card--info .icon { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .card--info .icon ion-icon { color: white; } .card--info .info--text { display: block; position: absolute; left: 10%; bottom: 5%; font-size: 0.55rem; letter-spacing: 1px; font-family: "Montserrat".........完整代码请登录后点击上方下载按钮下载查看
网友评论0