div+css布局实现卡片式图片轮播手机Ui交互效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现卡片式图片轮播手机Ui交互效果代码
代码标签: div css 布局 卡片式 图片 轮播 手机 Ui 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background: #f0f0f0; font-family: sans-serif; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 3em; } ul { list-style: none; padding: 0; margin: 0; } .profile-card { position: relative; width: 18em; background: #fff; box-shadow: 0 0 5em rgba(0, 0, 0, 0.2); padding: 2em 1em; overflow: hidden; border-radius: 0.7em; } .profile-card .profile-img { position: absolute; top: 5em; left: 50%; transform: translatex(-50%); width: 11em; aspect-ratio: 2/3; object-fit: cover; border-radius: 1rem; z-index: 1; transition: 0.5s ease-in-out; } .profile-card h1 { font-size: 1.5rem; } .profile-card p { margin: 0.2em 0; color: #b8b8b8; } .profile-card h2 { margin-top: 16em; margin-bottom: 0.8em; font-size: 1.2rem; } .profile-card .popular + .popular { margin-top: 1em; } .profile-card .popular { position: relative; cursor: pointer; z-index: 0; } .profile-card .popular:before { position: absolute; content: ""; inset: 0; background: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; z-index: 1; border-radius: 0.6rem; } .profile-card .popular img { width: 100%; position: relative; height: 4rem; object-fit: cover; border-radius: 0.6rem; display: block; top: 0; transition: 0.5s ease-in-out; } .profile-card .popular .content { position: absolute; inset: 0; z-index: 2; padding: 1em; display: flex; flex-direction: column; justify-content: center; } .profile-card .popular .content h3 { font-size: 0.9rem; color: #fff; text-align: center; } .profile-card .popular .content p { color: #fff; font-size: 0.8rem; text-align: center; line-height: 1.4; height: 0; overflow: hidden; -moz-animation-delay: 3.5s; -webkit-animation-delay: 3.5s; -o-animation-delay: 3.5s; animation-delay: 3.5s; margin-top: 0; } .profile-card .popular .content ul { display: flex; align-items: center; justify-content: center; gap: 0.2rem; } .profile-card .popular .content ul li i { color: #d9d9d9; font-size: 0.565rem; } .profile-card .menu-btn { background: none; border: none; font-size: 1.3rem; cursor: pointer; position: absolute; top: 1.6em; right: 1em; z-index: 556; } .profile-card .more { position: absolute; inset: 0; width: 100%; height: 0; z-index: 555; overflow: hidden; color: #fff; padding: 0 1.5em; transition: 0.5s ease-in; background: rgba(0, 0, 0, 0.8); } .profile-card .more .tags { display: flex; align-items: center; gap: 0.625em; flex-wrap: wrap; } .profile-card .more .tags .tag { background: #5e5e5e; padding: 0.3125em 0.625em; border-radius: 0.3125em; font-size: 0.8rem; text-transform: capitalize; } .profile-card .more h2 { margin: 1em 0 0.5em; } .profile-card .more p { margin: 1.5em 0; color: #d6d6d6; line-height: 1.4; } .profile-card .more .icons { display: flex; justify-content: flex-end; align-items: center; gap: 1em; } .profile-card .more .icons svg { width: 1.125rem; color: #fff; } .profile-card ::-webkit-scrollbar { width: 8px; } .profile-card ::-webkit-scrollbar-track { background: #1e1e1e; } .profile-card ::-webkit-scrollbar-thumb { background: #fff; } .profile-card ::-webkit-scrollbar-thumb:hover { background: #bcbcbc; } .popular.opened img { height: 12rem; } .popular.opened .content p { height: auto; margin-top: 10px; } .menu-btn.opened { color: #fff; background: #111; padding: 0.2em 0.4em; } .overlay.opened { height: 100%; } .more.opened { padding: 4em 1.5em 1.5em 1.5em; height: 100%; overflow-y: scroll; } .wrapper .card.opened { animation-play-state: paused; } .wrapper .outer { display: flex; align-items: center; justify-content: center; } .wrapper .card { background: #fff; width: 140px; opacity: 0; pointer-events: none; position: absolute; justify-content: space-between; box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1); animation: animate 15s linear infinite; animation-delay: calc(3s * var(--delay)); } .wrapper .card:last-child { animation-delay: calc(-3s * var(--delay)); } .wrapper .card a { text-decoration: none; padding: 7px 18px; border-radius: 25px; color: #fff; background: linear-gradient(to bottom, #bea2e7 0%, #86b7e7 100%); transition: all 0.3s ease; } .wrapper .card a:hover { transform: scale(0.94); } .wrapper .card .img { height: 16em; width: 11em; position: absolute; top: 1.5em; right: 5em; border-radius: 1.2em; box-shadow: 2px 4px 18px rgba(0, 0, 0, 0.2); overflow: hidden; } .wrapper .card .img img { height: 100%; width: 100%; object-fit: cover; } .outer:hover .card { animation-play-state: paused; } @keyframes animate { 0% { opacity: 0; transform: translateX(100%) scale(0.5); } 5%, 20% { opacity: 0.4; transform: translateX(100%) scale(0.7); pointer-events: none; } 25%, 40% { opacity: 1; pointer-events: auto; transform: translateX(0%) scale(1); } 45%, 60% { opacity: 0.4; transform: translateX(-100%) scale(0.7); pointer-events: none; } 65%, 100% { opacity: 0; transform: translateX(-100%) scale(0.5); } } </style> </head> <body> <div class="profile-card"> <h1>Castle</h1> <div class="wrapper"> <div class="outer"> <div class="card" style="--delay:-1;"> <div class="content"> <div class="img"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt=""> </div> </div> </div> <div class="card" style="--delay:0;"> <div class="content"> <div class="img"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef60656fd.png" alt=""> </div> </div> </div> <div class="card" style="--delay:1;"> <div class="content&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0