css+div实现人物角色气泡文字显示动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css+div实现人物角色气泡文字显示动画效果代码。
代码标签: css div 人物 角色 气泡 文字 显示 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.bunny.net"> <link href="https://fonts.bunny.net/css?family=delicious-handrawn:400" rel="stylesheet" /> <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Rubik+Bubbles&display=swap'> <style> *, ::before, ::after{ margin: 0; padding: 0; box-sizing: border-box; } img{ max-width: 100%; max-height: 100%; object-fit: contain; } body{ min-height: 100svh; font-family: 'Delicious Handrawn', handwriting; font-size: 1.2rem; display: grid; place-content: center; background-color: teal; } .developer input[name=joke]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .developer{ --_speed: 500ms; position: relative; } .developer label{ cursor: pointer; display: block; position: relative; transition: all 300ms ease-in-out; } .avatar{ border: 4px solid black; border-top-left-radius: 155px 115px; border-top-right-radius: 175px 225px; border-bottom-right-radius: 225px 125px; border-bottom-left-radius:195px 255px; overflow: hidden; width: 150px; height: 150px; box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.16); } .developer .speech { --_bg: #EDEDED; position: absolute; top: -120px; left: -40px; width: 290px; padding: 1.5rem 3rem; border: .25rem solid #000; background-color: var(--_bg); box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.16); border-radius: 50%; font-size: 1.3rem; transition: all 500ms ease-in-out; scale: 0; display: grid; place-content: center; grid-template-areas: 'stack'; } .speech::before { content: ""; position: absolute; left: 90px; bottom: -50px; width: 8rem; height: 4rem; border-radius: 100%; rotate: -25deg; box-shadow:5px 0, 25px -5px var(--_bg), 25px -5px 0 5px; clip-path: polygon(0% 50%, 140% 50%, 150% 100%, 0% 100%); } #btn-question, #btn-answer{ transition: translate 300ms ease-in-out 500ms,opacity 300ms ease-in-out 500ms,background-color 300ms ease-in-out; text-align: center; width: fit-content; padding: .5rem .75rem; white-space: nowrap; background: #FFF; z-index: 99; border: 2px solid black; text-transform: uppercase; border-radius: 10px; font-size: 1rem; box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.16); } #btn-answer{ opacity: 0; translate: 20px -40px; pointer-events: none; } @media (min-width: 500px) { .developer .speech { top: -100px; left: 100px; width: 340px; font-size: 1.6rem; } .speech::before { left: -20px; bottom: -30px; rotate: -5deg; } } #btn-question:hover, #btn-answer:hover{ background-color: black; color: #FFF; } .speech p{ .........完整代码请登录后点击上方下载按钮下载查看
网友评论0