css+js实现文字气泡在圆上转圈圈动画效果代码
代码语言:html
所属分类:动画
代码描述:css+js实现文字气泡在圆上转圈圈动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> .container { height: 60vh; padding: 60px; display: flex; justify-content: center; align-items: center; } .info-bubble { --transition-time: 3s; --bubble-offset: translate(-50%, -50%); width: 120px; aspect-ratio: 1/1; border: 3px solid black; border-radius: 50%; position: relative; transform-origin: 50% 50%; transition: transform var(--transition-time) ease-in; transform: rotate(60deg); } .info-bubble.no-transition { transition: none; } .info-bubble.pos-a { transform: rotate(420deg); } .info-bubble.pos-b { transform: rotate(180deg); } .info-bubble.pos-c { transform: rotate(300deg); } .bubble { width: 50px; aspect-ratio: 1/1; border: 4px solid #339BBA; border-radius: 50%; background: white; display: flex; justify-content: center; align-items: center; transform: var(--bubble-offset) rotate(-60deg); position: absolute; top: 0; left: 50%; transform-origin: 50% 50%; transition: all var(--transition-time) ease-in-out; } .pos-c .bubble { transform: var(--bubble-offset) rotate(60deg); } .pos-b .bubble { transform: var(--bubble-offset) rotate(180deg); } .bubble:nth-child(1) { background: #339BBA; color: #fff; } .pos-b .bubble:nth-child(1), .pos-c .bubble:nth-child(1) { background: #fff; color: #000; } .bubble:nth-child(3) { top: 75%; left: 93.5%; } .pos-c .bubble:nth-child(3) { background: #339BBA; color.........完整代码请登录后点击上方下载按钮下载查看
网友评论0