css实现图文卡片悬浮显示更多文字介绍折叠效果代码
代码语言:html
所属分类:悬停
代码描述:css实现图文卡片悬浮显示更多文字介绍折叠效果代码
代码标签: css 图文 卡片 悬浮 显示 更多 文字 介绍 折叠
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> * { padding: 0; margin: 0; box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; margin: 0; padding: 0; background: linear-gradient(to right, #008000, #00e600, #b3ffb3, #00e600, #008000); font-family: 'Martel Sans', sans-serif; } h1 { font-size: 5.25vmin; text-align: center; color: white; } p { font-size: max(10pt, 2.25vmin); line-height: 1.4; margin-bottom: 1.5rem; } .wrap { display: flex; flex-wrap: nowrap; justify-content: space-between; width: 85vmin; height: 25em; border: 8px solid; border-image: linear-gradient(-50deg, green, #00b300, forestgreen, green, lightgreen, #00e600, green) 1; margin: 2rem auto; transition: .3s ease-in-out; position: relative; overflow: hidden; } .overlay { position: relative; display: flex; width: 100%; height: 100%; padding: 1rem; background: #186218; transition: .4s ease-in-out; z-index: 1; } .overlay-content { display: flex; flex-direction: column; justify-content: space-between; width: 15vmin; height: 100%; padding: .5rem 0 0 .5rem; border: 3px solid; border-image: linear-gradient( to bottom, #AEA724 5%, forestgreen 35% 65%, #AEA724 95% ) 0 0 0 100%; /* border-left: 2px solid #1c721c; */ transition: .3s ease-in-out .2s; z-index: 1; } .image-content { position: absolute; top: 0; right: 0; width: 60vmin; height: 100%; background-image: url("//repo.bfw.wiki/bfwrepo/image/62954f9119888.png"); background-size: cover; transition: .3s ease-in-out; /* border: 1px solid green; */ } .dots { position: absolute; bottom: 1rem; right: 2rem; display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 55px; height: 4vmin; transition: .3s ease-in-out .3s; } .dot { width: 14px; height: 14px; background: yellow; border: 1px solid indigo; border-radius: 50%; transition: .3s ease-in-out .3s; } .text { position: absolute; top: 0; right: 0; width: 60vmin; height: 100%; padding: 3vmin 4vmin; background: #fff; box-shadow: inset 1px 1px 15px 0 rgba(0 0 0 / .4); } .wrap:hover { box-shadow: 0 0 0 0 rgba(0 0 0 / 0); } .wrap:hover .overlay { transform: translateX(-60vmin); } .wrap:hover .image-content { width: 30vmin; } .wrap:hover .overlay-content { border: none; transition-delay: .2s; transform: translateX(60vmin); } .wrap:hover .dots { transform: translateX(1rem); } .wrap:hover .dots .dot { background: white; } /* Animations and timing delays */ .animate { animation-du.........完整代码请登录后点击上方下载按钮下载查看
网友评论0