cooltipz纯css实现浮动提示框多种效果
代码语言:html
所属分类:悬停
代码描述:cooltipz纯css实现浮动提示框多种效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/cooltipz.min.css"> <style> :root { --cooltipz-fontawesome: FontAwesome; } .custom--small { --cooltipz-small: 4.5rem; } .custom--medium { --cooltipz-medium: 8rem; } .custom--large { --cooltipz-large: 12rem; } .custom--revert { --cooltipz-bg-color: #fff; --cooltipz-text-color: #000; } .custom--help { --cooltipz-cursor: help; } .custom--delay { --cooltipz-delay-show: 1s; --cooltipz-delay-hide: 2s; } .custom--far { --cooltipz-slide: 50px; } .custom--still { --cooltipz-slide: 0; } .custom--opposite { --cooltipz-slide: -50px; } .custom--big { --cooltipz-font-size: 1.6rem; --cooltipz-arrow-size: 1rem; } .custom--arrow { --cooltipz-arrow-size: 1.5rem; --cooltipz-border-radius: 0; } .custom--round { --cooltipz-border-radius: 5rem; } .custom--sharp { --cooltipz-border-radius: 0; } .custom--pointy { --cooltipz-arrow-size: 0.82rem; --cooltipz-border-radius: 0; } .custom--slow { --cooltipz-timing: 3s; } /* Nothing to do with Cooltipz.css, just making the examples look pretty */ body { min-height: 100%; font-family: Verdana, Arial, sans-serif; padding-bottom: 2rem; } body, main, section { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; } main div { margin: 2rem; } @keyframes octocat-wave { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-25deg); } 40%, 80% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0