div+css实现图文卡片悬浮上升动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现图文卡片悬浮上升动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;600&display=swap"); html { box-sizing: border-box; font-size: 100%; } html, body { height: 100%; } *, *:before, *:after { box-sizing: inherit; } img { max-width: 100%; height: auto; } body { -webkit-text-size-adjust: 100%; font-variant-ligatures: none; text-rendering: optimizeLegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-size: 100%; font-family: "Fira Sans", sans-serif; } h1, h2, h3, h4, h5 { font-weight: 800; margin-top: 0; margin-bottom: 0; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0; padding: 0; height: 100vh; color: #1F1D42; background-color: #F0F8E1; } .card-hover { width: 360px; height: 500px; position: relative; overflow: hidden; box-shadow: 0 0 32px -10px rgba(0, 0, 0, 0.08); border-radius: 5rem; } .card-hover:has(.card-hover__link:hover) .card-hover__extra { transform: translateY(0); transition: transform 0.35s; } .card-hover:hover .card-hover__content { background-color: #DEE8C2; bottom: 100%; transform: translateY(100%); padding: 50px 60px; transition: all 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97); } .card-hover:hover .card-hover__link { opacity: 1; transform: translate(-50%, 0); transition: all 0.3s 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97); } .card-hover:hover img { transform: scale(1); transition: 0.35s 0.1s transform cubic-bezier(0.1, 0.72, 0.4, 0.97); } .card-hover__content { width: 100%; text-align: center; background-color: #86B971; padding: 0 60px 50px; position: absolute; bottom: 0; left: 0; transform: translateY(0); transition: all 0.35s 0.35s cubic-bezier(0.1, 0.72, 0.4, 0.97); will-change: bottom, background-color, transform, padding; z-index: 1; } .card-hover__content::before, .card-hover__content::after { content: ""; width: 100%; height: 120px; background-color: inherit; position: absolute; left: 0; z-index: -1; } .card-hover__content::before { top: -80px; -webkit-clip-path: ellipse(60% 80px at bottom center); clip-path: ellipse(60% 80px at bottom center); } .card-hover__content::after { bottom: -80px; -webkit-clip-path: ellipse(60% 80px at top center); clip-path: ellipse(60% 80px at top center); } .card-hov.........完整代码请登录后点击上方下载按钮下载查看
网友评论0