js+css实现可拖动跟随的锚定提示词效果代码
代码语言:html
所属分类:拖放
代码描述:js+css实现可拖动跟随的锚定提示词效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --distance: 1em; /* --debug-outlines: 1px solid red; */ } body { background: linear-gradient(0deg, #aaa 0%, #ddd 50%); min-height: 100vh; } /* Anchor */ #anchor { position: absolute; background: #fff; border-radius: 1rem; padding: 1rem; user-select: none; z-index: 1; left: 50%; top: 50%; outline: var(--debug-outlines, none); /* Make this element the anchor for the pointers and the panel */ anchor-name: --my-anchor; } /* Tip at the bottom pointing up */ @position-try --show-bottom-tip { /* Set the proper height based on the panel */ height: calc(var(--distance) + var(--distance) + anchor-size(--my-panel height)); /* Set the width based on the anchor, making the t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0