div+css实现鼠标点击交互动画效果代码-html代码-BFW代码库

div+css实现鼠标点击交互动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现鼠标点击交互动画效果代码，无js代码实现。

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        :root {
          --sizeVar: 0.2vmin;
        }
        input {
          display: none;
        }
        input + label:hover .animDiv {
          -webkit-animation-name: none;
                  animation-name: none;
        }
        input + label:active .animDiv {
          pointer-events: none;
        }
        .baseElem {
          position: absolute;
          width: calc(var(--sizeVar) * 140);
          height: calc(var(--sizeVar) * 140);
          border-radius: calc(var(--sizeVar) * 40);
          background: #69d2e7;
          background: linear-gradient(
            180deg,
            rgba(105, 210, 231, 1) 50%,
            rgba(79, 166, 183, 1) 100%
          );
          top: calc(50% - calc(var(--sizeVar) * 70));
          left: calc(50% - calc(var(--sizeVar) * 70));
          transform-origin: bottom center;
          -webkit-animation: baseAnim 1500ms linear;
                  animation: baseAnim 1500ms linear;
        }
        .jumpElem {
          position: absolute;
          width: calc(var(--sizeVar) * 40);
          height: calc(var(--sizeVar) * 40);
          border-radius: calc(var(--sizeVar) * 12);
          background: #fa6900;
          background: linear-gradient(
            180deg,
            rgba(250, 105, 0, 1) 70%,
            rgba(196, 86, 7, 1) 100%
          );
          bottom: 100%;
          left: calc(50% - calc(var(--sizeVar) * 20));
          -webkit-animation: jumpAnim 1500ms linear;
                  animation: jumpAnim 1500ms linear;
        }
        .tagline {
          position: absolute;
          top: calc(50% + calc(var(--sizeVar) * 100));
          left: 50%;
          transform: translateX(-50%);
          font-size: calc(var(--sizeVar) * 20);
          text-transform: uppercase;
          font-family: sans-serif;
          text-align: center;
          color: #ffffff;
        }
        body {
          overflow: hidden;
          background-color: #24484f;
        }
        
        @-webkit-keyframes jumpAnim {
          0% {
            transform: scale(1, 1) translateY(0) rotate(0);
            background: linear-gradient(
              180deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          7% {
            transform: scale(1.2, 0.9) translateY(10%) rotate(0);
            background: linear-gradient(
              180deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          15% {
            transform: scale(0.5, 1.6) translateY(-20%) rotate(0);
            background: linear-gradient(
              180deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          23% {
            transform: scale(1, 1) translateY(-150%) rotate(90deg);
            background: linear-gradient(
              90deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          27% {
            transform: scale(1, 1) translateY(-150%) rotate(90deg);
            background: linear-gradient(
              90deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
        
          35% {
            transform: scale(0.5, 1.6) translateY(-20%) rotate(180deg);
            background: linear-gradient(
              0deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          43% {
            transform: scale(1.2, 0.9) translateY(10%) rotate(180deg);
            background: linear-gradient(
              0deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          50% {
            transform: scale(1, 1) translateY(0) rotate(180deg);
            background: linear-gradient(
              0deg,
              rgba(250, 105, 0, 1) 70%,
              rgba(196, 86, 7, 1) 100%
            );
          }
          100% {
            transform: scale(1, 1) translateY.........完整代码请登录后点击上方下载按钮下载查看