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,.........完整代码请登录后点击上方下载按钮下载查看