gsap+Draggable实现拖拽响应式窗口自适应可爱小蛇效果代码
代码语言:html
所属分类:响应式
代码描述:gsap+Draggable实现拖拽响应式窗口自适应可爱小蛇效果代码
代码标签: gsap Draggable 拖拽 响应式 窗口 自适应 可爱 小蛇
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://unpkg.com/normalize.css') layer(normalize); @layer normalize, base, demo; @layer demo { html { color-scheme: light only; } .dialog { overflow: hidden; resize: horizontal; display: grid; place-items: center; /* min-width: 200px; max-width: calc(600px + 0.5rem); */ min-width: 200px; width: clamp(200px, 600px, 80vw - 2rem); max-width: calc(100vw - 2rem); position: absolute; padding: 0; border-width: 4px; border-radius: 12px 12px 0 0; box-shadow: 0 10px 20px -10px hsl(0 0% 0% / 0.5); } .dialog:active .dialog__arrow { display: none; } .dialog__arrow { height: 30px; width: 20px; background: #262626; position: absolute; bottom: 15px; right: 8px; transform-origin: 50% 100%; transform: rotate(-45deg); -webkit-clip-path: polygon( 50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60% ); clip-path: polygon( 50% 100%, 100% 60%, 60% 60%, 65% 0, 35% 0, 35% 60%, 0 60% ); z-index: 999; -webkit-animation: bounce 0.5s infinite linear; animation: bounce 0.5s infinite linear; } .dialog__header { height: 44px; background: color-mix(in lch, canvasText, canvas 25%); border-bottom: 4px solid #000; z-ind.........完整代码请登录后点击上方下载按钮下载查看
网友评论0