图片tip文字锚点效果代码-html代码-BFW代码库

图片tip文字锚点效果代码

代码语言：html

代码描述：图片tip文字锚点效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
body {
  background: #919793;
  padding: 2em;
}

ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.ancatomy {
  position: relative;
  text-align: center;
  font-size: 1vw;
  color: #fff;
}
.ancatomy img {
  display: block;
  width: 30em;
  margin: 0 auto;
}
.ancatomy .cute-bit {
  position: absolute;
  min-width: 15em;
  transition: all 0.25s ease-out;
}
.ancatomy .cute-bit:hover {
  min-width: 21em !important;
}
.ancatomy .cute-bit.grow-left {
  text-align: left;
}
.ancatomy .cute-bit.grow-left h2 {
  padding-right: 1em;
}
.ancatomy .cute-bit.grow-left h2:after {
  right: 0;
  transform: translate(50%, 50%);
}
.ancatomy .cute-bit.grow-right {
  text-align: right;
}
.ancatomy .cute-bit.grow-right h2 {
  padding-left: 1em;
}
.ancatomy .cute-bit.grow-right h2:after {
  left: 0;
  transform: translate(-50%, 50%);
}
.ancatomy .cute-bit h2 {
  position: relative;
  padding: 0 0 0.4em;
  border-bottom: solid 0.2em;
  margin: 0 0 0.4em;
  text-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
}
.ancatomy .cute-bit h2:after {
  position: absolute;
  bottom: -0.1em;
  content: "";
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: #fff;
}
.ancatomy .cute-bit p {
  margin: 0;
  padding: 0;
  text-shadow: 0 0 1em 1em rgba(0, 0, 0, 0.1);
}
.ancatomy .cute-bit.cute-ears {
  r.........完整代码请登录后点击上方下载按钮下载查看