div+css实现铃铛新消息点击弹出消息列表交互效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现铃铛新消息点击弹出消息列表交互效果代码
代码标签: div css 铃铛 新 消息 点击 弹出 列表 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --off: #3e537e; --on: #ffffff; --dark: #324671; --cl: var(--off); } body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 100%, #1d2232, #000); } .notification { width: 50vmin; height: 50vmin; display: flex; align-items: center; justify-content: center; } label { width: 10vmin; height: 10vmin; background: #00800000; position: relative; cursor: pointer; transform: scale(0.6); transition: all 0.5s ease 0s; animation: bell-bounce-down 0.5s ease-in-out 0s; animation-fill-mode: forwards; --cl: var(--dark); filter: drop-shadow(2vmin 2vmin 1vmin #0008); } #btn:checked + label { animation: bell-bounce-up 0.5s ease-in-out 0s; animation-fill-mode: forwards; } @keyframes bell-bounce-up { 0% { margin-top: 0; } 30% { margin-top: -33vmin; } 60% { margin-top: -31vmin; } 100% { margin-top: -35vmin; } } @keyframes bell-bounce-down { 0%, 20% { margin-top: -35vmin; } 50% { margin-top: -3vmin; } 80% { margin-top: -4vmin; } 100% { margin-top: 0vmin; } } label:before { content: ""; position: absolute; width: 10vmin; height: 10vmin; left: 0; background: conic-gradient(from 125deg at 50% 50%, var(--cl) 0 109deg, #fff0 0 100%), linear-gradient(90deg, #fff0 0 calc(1vmin - 0px), var(--cl) 1vmin calc(100% - 1vmin), #fff0 calc((100% - 1vmin) + 1px) 100%); border-radius: 50% 50% 50% 50% / 100% 100% 10% 10%; animation: bell-move 1s ease-out 1s 1, bell-color 1s linear 1s 1; animation-fill-mode: forwards; transform-origin: 50% 1vmin; } label:after { content: ""; position: absolute; width: 2vmin; height: 12.85vmin; left: 4vmin; top: -1vmin; background: radial-gradient(circle at 50% 100%, var(--cl) 0 1.5vmin, #fff0 calc(1.5vmin + 1px) 100%), radial-gradient(circle at 50% 1vmin, #fff0 0 0.4vmin, var(--cl) calc(0.4vmin + 1px) 1vmin, #fff0 calc(1vmin + 1px) 100%); border-radius: 5vmin; background-repeat: no-repeat; background-size: 100% 1.25vmin, 100% 100%; background-position: 0 100%, 0 0; z-index: -1; animation: bell-move 1s ease-out 1.2s 1 reverse, bell-color 1s linear 1s 1; animation-fill-mode: forwards; transform-origin: 50% 1vmin; } @keyframes bell-move { 0%, 100% { transform: rotate(0deg); } 20%, 60% { transform: rotate(10deg); } 40%, 80% { transform: rotate(-10deg); } } @keyframes bell-color { 0%, 100% { --cl: var(--on); } } #btn:checked + label:before, #btn:checked + label:after { animation: none; --cl: var(--on); } label:hover:before, label:hover:after, #btn:checked + label:hover:before, #btn:checked + label:hover:after { --cl: var(--off) !important; } .counter { background: #ff2323; color: #fff; width: 6vmin; height: 6vmin; position: absolute; border-radius: 100%; font-size: 3.75vmin; displ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0