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