css实现黑白猫太极阴阳悬浮效果代码
代码语言:html
所属分类:悬停
代码描述:css实现黑白猫太极阴阳悬浮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { align-items: center; background-color: #f9abab; display: flex; flex-direction: column; font-family: sans-serif; font-weight: 900; height: 100vh; justify-content: center; margin: 0; } .box { --box-width: 300px; /* background-color: #f9f; */ border-radius: 50%; /* Chromium work-around */ clip-path: circle(150px at 150px); height: var(--box-width); overflow: hidden; position: relative; width: var(--box-width); } .activator { height: 100%; position: absolute; width: 100%; } .activator.white { clip-path: polygon( 35.66% 85.67%, 44.99% 83.13%, 54.08% 90.2%, 55.1% 101.27%, 64.89% 94.58%, 74.59% 86.97%, 82.83% 78.07%, 88.86% 67.82%, 91.48% 56.61%, 90.3% 42.78%, 86.06% 31.29%, 77.45% 21.44%, 67.34% 14.67% ); } .activator.black { /* background-color: red; */ clip-path: polygon( 35% 86%, 23% 79.33%, 15.86% 70.67%, 11.63% 61.78%, 8.63% 52.71%, 8.45% 43.74%, 10.78% 32.35%, 16.65% 22.15%, 26.05% 12.86%, 34.44% 6.24%, 44.4% 0%, 47.15% 11%, 56.69% 17.26%, 66.57% 14.04% ); } .activator:hover { /* Safari work-around */ clip-path: circle(150px at 150px); cursor: alias; z-index: 1; } .drop { background-color: #ffffff00; height: 100%; pointer-events: none; position: absolute; transition: background-color 400ms cubic-bezier(0.4, 0, 0.2, 1); width: 100%; } .cats { pointer-events: none; position: absolute; transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } .activator.black:hover ~ .drop { background-color: #f2f2f2; } .activator.black:hover ~ .cats { transform: translateX(45px) translateY(95px) scale(1.4) rotate(0deg); } .activator.white:hover ~ .drop { background-color: #1a1a1a; } .activator.white:hover ~ .cats { transform: translateX(45px) translateY(95px) scale(1.4) rotate(180deg); } .text { font-size: 32px; font-weight: 600; margin-top: 32px; } </style> </head> <body > <div class="box"> <div class="activator white"></div> <div class="activator black"></div> <div class="drop"></div> <svg class="cats" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300" height="300" width="300"> <path d="M198.63 43.54c-8.535-4.018 3.727 22.035-12.55 45.9-20.702 30.36-48.977 21.0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0