css实现悬浮圆点放大显示图文效果代码-html代码-BFW代码库

css实现悬浮圆点放大显示图文效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮圆点放大显示图文效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        body,
        html {
          overflow: hidden;
          background-color: #fdf0d5;
          margin: 0;
          font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
        }
        .f {
          position: fixed;
          top: 5px;
          right: 10px;
          font-family: 'Arial';
          font-size: 0.8em;
          color: #f0544f;
        }
        .f a {
          color: #000;
        }
        .Project {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 20px;
          height: 20px;
          cursor: pointer;
        }
        .Project:hover .imgMasked {
          -webkit-clip-path: circle(100px at center);
                  clip-path: circle(100px at center);
        }
        .Project:hover .Project-hail {
          width: 200px;
          height: 200px;
          border-radius: 200px;
        }
        .Project:hover .Project-hail2 {
          width: 200px;
          height: 200px;
          border-radius: 200px;
          border: 80px solid #fff4e6;
          opacity: 0;
        }
        .Project:hover .Project-name {
          left: 200%;
          opacity: 1;
        }
        .Project:hover .Project-name:before {
          width: 100%;
        }
        .Project-hail {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: #f0544f;
          width: 40px;
          height: 40px;
          border-radius: 40px;
          transition: 0.5s;
          opacity: 0.2;
        }
        .Project-hail2 {
          position:.........完整代码请登录后点击上方下载按钮下载查看