js+css实现可爱卡通三眼小孩点击眼睛减少效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现可爱卡通三眼小孩点击眼睛减少效果代码
代码标签: js css 可爱 卡通 三眼 小孩 点击 眼睛 减少
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --primary: #a0e8b6; --secondary: #8dcb9f; --bg: #fffb7d; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 36px; position: absolute; margin: 0; height: 100%; width: 100%; background-color: var(--bg); } .head { display: flex; position: relative; justify-content: center; gap: 8px; align-items: center; padding: 0 2vmin; height: 36vmin; background-color: var(--primary); border-radius: 9999px; filter: drop-shadow(0 0 20vmin #00000033); box-shadow: 0 0 5vmin #00000044 inset, 0 0 1vmin #00000022 inset; transition: transform 300ms ease-in-out; } .head::before { content: ""; position: absolute; border-radius: 50%; border-right: 4vmin solid var(--secondary); width: 6vmin; height: 6vmin; top: -5vmin; margin-left: -4vmin; transform: scale(0.5, 1); filter: drop-shadow(5vmin 0 0 var(--secondary)); } .head::after { content: ""; position: absolute; border-radius: 0 0 50% 50%; border: 0.5vmin solid #00000044; -webkit-clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%); clip-path: polygon(0 40%, 100% 40%, 100% 100%, 0% 100%); width: 6vmin; max-width: 33%; height: 6vmin; bottom: 4vmin; } .eye { position: relative; width: 12vmin; height: 12vmin; background-color: #ffffff; border-radius: 9999px; display: flex; justify-content: center; align-items: center; overflow: hidden; cursor: pointer; box-shadow: 0 0 2vmin #00000033; transition: opacity 300ms linear, width 300ms linear, display 300ms linear allow-discrete; } .eye::before { content: "•"; position: absolute; color: #ffffff; font-size: 7.4vmin; width: 4vmin; height: 4vmin; background-color: #333333; border-radius: 9999px; box-shadow: 0 0 0 1vmin lightblue; -webkit-animation: eyePupil 5000ms linear infinite; animation: eyePupil 5000ms linear infinite; } .eye::after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; background-color: var(--primary); box-shadow: 0 0 0 50vmin #00000011 inset; -webkit-animation: eyeLid 5000ms linear infinite; animation: eyeLid 5000ms linear infinite; } .eye:nth-last-of-type(2)::before, .eye:nth-last-of-type(2)::after { -webkit-animation-delay: -25ms; animation-delay: -25ms; } .eye:nth-last-of-type(3)::before, .eye:nth-last-of-type(3)::after { -webkit-animation-delay: -50ms; animation-delay: -50ms; } .eye-hidden { display:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0