单个div+css实现一个鼠标悬浮魔术帽中变出小熊动画效果代码-html代码-BFW代码库

单个div+css实现一个鼠标悬浮魔术帽中变出小熊动画效果代码

代码语言：html

所属分类：悬停

代码描述：仅仅使用一个div结合一些css代码就实现了鼠标悬浮魔术帽中变出小熊动画效果

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
          margin:0;
          height:100vh;
          display:grid;
          place-items:center;
          background:#26ada7;
        }
        
        .magic {
          width:150px;
          position:relative;
          cursor:pointer;
          height:150px;
          --p:50px;
          background:
            radial-gradient(farthest-side at top,#b78d5c 95%,#0000)50% calc(23.5% + var(--p))/9% 2%,
            radial-gradient(farthest-side at top,#000 95%,#0000)50% calc(24% + var(--p))/9% 4%,
            radial-gradient(farthest-side,#000 95%,#0000)57% calc(13% + var(--p))/6% 7%,
            radial-gradient(farthest-side,#000 95%,#0000)43% calc(13% + var(--p))/6% 7%,
            radial-gradient(farthest-side,#b78d5c 98%,#0000)50% calc(17% + var(--p))/23% 25%,
            radial-gradient(farthest-side,#b78d5c 98%,#0000)43% calc(9% + var(--p))/15% 15%,
            radial-gradient(farthest-side,#b78d5c 98%,#0000)57% calc(9% + var(--p))/15% 15%,
            radial-gradient(farthest-side,#9b6f43 98%,#0000)50% calc(0% + var(--p))/35% 35%,
            radial-gradient(farthest-side,#58341c 98%,#0000)68% calc(5% + var(--p))/15% 15%,
            radial-gradient(farthest-side,#58341c 98%,#0000)32% calc(5% + var(--p))/15% 15%,
            
            radial-gradient(farthest-side at bottom,#0000 55%,#53515.........完整代码请登录后点击上方下载按钮下载查看