vue3实现消息图标点击展开未读消息卡片上下滚动轮播效果代码
代码语言:html
所属分类:其他
代码描述:vue3实现消息图标点击展开未读消息卡片上下滚动轮播效果代码
代码标签: vue 消息 图标 点击 展开 未读 卡片 上下 滚动 轮播
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { min-height: 100vh; display: grid; place-items: center; --black: #597093; --red-dot: #e95c4d; --window-height: 25vmin; background-color: #ffdee9; background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%); } .notification-center { width: 50vmin; display: grid; grid-template-rows: 120px var(--window-height); /* border: 1px solid silver; */ } /* Notification Bell ---------------------------------------------- */ .notification-bell { display: grid; place-items: center; transform-origin: 50% 0%; animation: shake 0.2s 1s linear forwards; animation-iteration-count: 2; } @keyframes shake { 0% { rotate: -10deg 0; } 50% { rotate: 10deg 0; } } .notification-bell svg { fill: none; width: 30px; height: 37px; cursor: pointer; } .notification-bell svg path { fill: none; stroke: var(--black); stroke-width: 5; } .notification-bell svg circle { fill: var(--black); stroke: none; } #red-dot { fill: var(--red-dot); stroke: transparent; stroke-width: 5; opacity: 0; transform-origin: 50% 50%; animation: showDot 0.5s 1.3s cubic-bezier(0.56, -0.02, 0.17, 1.41) forwards; scale: 0; } @keyframes showDot { 100% { opacity: 1; scale: 1; } } /* Notification List ---------------------------------------------- */ .notification-list { min-height: var(--window-height); overflow: hidden; } .notification-list ul { --w: 45vmin; height: 280px; list-style: none; width: var(--w); margin: 0 auto; position: relative; } .item { background-color: rgb(245, 245, 245); width: 100%; height: fit-content; display: grid; grid-template-columns: 40px 1fr; align-items: center; column-gap: 10px; border-radius: 10px; padding: 1em 1.5em; position: absolute; z-index: 5; opacity: 0; animation: slide 15s cubic-bezier(0.79, -0.36, 0, 1.08) infinite; animation-delay: calc(3s * var(--index)); box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px; color: var(--black); } .item img { height: 40px; border-radius: 50%; } .item p { font-size: 0.9rem; } .item p span { color: #3499ed; font-weight: bold; } .item p:last-child { font-size: 0.8rem; color: rgb(88, 88, 88); } .item:last-child { animation-delay: calc(-3s * var(--index)); } .item::after { content: ""; position: absolute; top: 50%; right: 5%; width: 5px; height: 5px; border-radius: 50%; background-color: var(--red-dot); } @keyframes slide { 0% { opacity: 0; transform: translateY(100%) scale(0.5); } 5%, 20% { opacity: 0.3; transform: translateY(100%) scale(0.7); } 25%, 40% { opacity: 1; transform: translateY(0%) scale(1); } 45%, 60% { opacity: 0.3; transform: translateY(-100%) scale(0.7); } 65%, 100% { opacit.........完整代码请登录后点击上方下载按钮下载查看
网友评论0