css+js实现模拟手机下拉选择删除列表效果代码
代码语言:html
所属分类:布局界面
代码描述:css+js实现模拟手机下拉选择删除列表效果代码
代码标签: css js 模拟 手机 下拉 选择 删除 列表
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet" /> <style> :root { margin: 0; padding: 0; box-sizing: border-box; --color-black: #1f1f1e; --color-white: #fafbfc; --color-yellow: #feca45; --color-gray: #5c595a; --phone-background: linear-gradient( to right bottom, #4a3972, #473279, #432a7f, #3e2185, #39178b ); --color-accent: #39178b; --color-red: #ed054e; } body { font-family: "Open Sans", sans-serif; font-size: 1rem; color: var(--color-black); background-color: var(--color-yellow); } .phone { max-width: 250px; height: 550px; margin: 1rem auto; border: 10px solid var(--color-black); border-radius: 24px; background-image: var(--phone-background); } .phone__indicators { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; margin: 5px auto; color: var(--color-white); } .phone__icons { display: flex; gap: 10px; } .time { font-size: 0.8rem; } .notification__center { max-width: 200px; margin: 0 auto; padding: 5% 3%; > button { display: flex; justify-content: center; align-items: center; gap: 8px; font: inherit; width: 100%; border-radius: 4px; cursor: pointer; font-weight: bold; color: var(--color-accent); border: 2px solid var(--color-accent); background-color: var(--color-white); } > button:hover { color: var(--color-white); border: 2px solid var(--color-white); background-color: var(--phone-background); } } .notifications__container { width: 100%; margin: 1rem auto; animation: bounce 0.5s linear forwards; } .notification__item { padding: 1rem; margin-bottom: 10px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; font-size: 0.5rem; border: 1px solid transparent; border-radius: 4px; background-color: var(--color-white); } .notification__image { width: 50px; height: 50px; border: none; border-radius: 50%; overflow: hidden; margin-right: 11px; > img { height: 100%; width: 100%; object-fit: cover; } } .notification__content { width: 40px; } .user__name { font-weight: bold; color: var(--color-accent); } .actions { display: flex; align-items: center; justify-content: center; > button { border: none; background-color: transparent; cursor: pointer; font-size: 1.2rem; } } .hidden { display: none; } .delete { animation: shake 0.5s infinite; } @keyframes bounce { 0%, 40%, 75%, 95% { transform: translateY(0); } 15% { transform: translateY(-20px); } 65% { transform: translateY(-15px); } 85% { transform: translateY(-5px); } 100% { transform: translateY(0); } } @keyframes slideout { 0% { transform: translateX(0); } 50% { opacity: 0; } 100% { transform: translateX(-200px); opacity: 0; } } @keyframes heartbeat { from { transform: scale(1); } to { transform: scale(1.3); } } @keyframes shake { 0% { transform: rotateZ(0); } 34% { transform: rotateZ(-15deg); } 68% { transform: rotateZ(15deg); } 100% { transform: rotateZ(0); } } </style> </head> <body translate="no"> <div class="phone"> <div class="phone__indicators"> <div class="time">10:02</div> <div class="phone__icons"> <div class="signal"> <svg viewBox="0 0 640 512" width="20" title="signal"> <path d="M216 288h-48c-8.84 0-16 7.16-16 16v192c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V304c0-8.84-7.16-16-16-16zM88 384H40c-8.84 0-16 7.16-16 16v96c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16v-96c0-8.84-7.16-16-16-16zm256-192h-48c-8.84 0-16 7.16-16 16v288c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V208c0-8.84-7.16-16-16-16zm128-96h-48c-8.84 0-16 7.16-16 16v384c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V112c0-8.84-7.16-16-16-16zM600 0h-48c-8.84 0-16 7.16-16 16v480c0 8.84 7.16 16 16 16h48c8.84 0 16-7.16 16-16V16c0-8.84-7.16-16-16-16z" fill="white" /> </svg> </div> <div class="battery"> <svg viewBox="0 0 640 512" width="20" title="battery-full"> <path d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48zm-48 96H96v128h416V192z" fill="white" /> </svg> </div> </div> </div> <div class="notification__center"> <button> <p>Recent Activity</p> <svg viewBox="0 0 448 512" width="20" title="chevron-down"> <path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="#B197FC" /> </svg> </button> <div class="notifications__container hidden"> <div class="notification__item"> <div class="notification__image"> <img src="//repo.bfw.wiki/bfwrepo/image/60d41f497bade.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" alt="man standing with dark background" /> </div> <div class="notification__content"> <p class="user__name">Abdul</p> <p class="message">liked your post</p> </div> <div class="actions"> <button class="like"></button> <button class="delete"> <svg viewBox="0 0 448 512" width="20" title=".........完整代码请登录后点击上方下载按钮下载查看
网友评论0