div+css实现蝙蝠猫鼠标悬浮变形动画效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现蝙蝠猫鼠标悬浮变形动画效果代码
代码标签: div css 蝙蝠 猫 鼠标 悬浮 变形 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> :root { --gray: #4a4649; --black: #29272a; --dark: #383339; } body { margin: 0; padding: 0; background: radial-gradient(#000000 15%, #200229); overflow: hidden; display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } body *, *:before, *:after { box-sizing: border-box; position: absolute; margin: 0; padding: 0; box-sizing: inherit; } body:after { content: ""; position: absolute; width: 100%; height: 100%; background: repeating-conic-gradient(#FFF9 0%, transparent .00004%, transparent .163345%); filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 2px #fff) drop-shadow(0px 0px 3px #fff); z-index: -3; } .moon { position: absolute; width: 65vmin; height: 65vmin; left: 20vmin; left: calc(calc(50vw - 32.5vmin) - 15vw); top: 15vmin; opacity: 1; border-radius: 100%; animation: start-moon 3s ease 0s 1; background: radial-gradient(circle at 50% 50%,#fdfdfd 0% 7vmin,#ffffff00 7.25vmin 100%); background-color: #fff; box-shadow: 0 0 8em 4em #6493a9, 0 0 8em -16em #ff660000 inset, 0 0 20px 5px #fdfdfd; mix-blend-mode: exclusion; filter: blur(1px); z-index: -3; } .moon:before { content: ""; background: radial-gradient(circle at 100% 60%,#ffffff00 0% 60%,#dddddd 75% 100%); width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; border-radius: 100%; } .moon:after { content: ""; background: radial-gradient( circle at 0% 40%, #efefef 0% 60%, #ededed 75% 100% ); width: 13.5vmin; height: 13.5vmin; position: absolute; top: 18%; left: 17%; border-radius: 100%; filter: blur(2px); opacity: 0.75; } .bat-cat { width: 80vmin; height: 40vmin; animation: fly 3s linear 0s infinite; z-index: 2; } @keyframes fly { 25% { transform: translateX(-1vmin); } 33% { margin-top: -1vmin; } 66% { margin-top: 1vmin; } 75% { transform: translateX(1vmin); } } @keyframes fly-move { 25% { transform: translateX(-1vmin); } 53% { margin-top: 1vmin; } 86% { margin-top: -1vmin; } 75% { transform: translateX(1vmin); } } .bat-cat * { position: absolute; box-sizing: border-box; } .bat-cat:hover { animation: fly-move 1.5s linear -0.75s 1; } .body { width: 20vmin; height: 20vmin; background: var(--black); border-radius: 1vmin 100%; top: 15vmin; left: 30vmin; transform: rotate(45deg) skew(-5deg, -5deg); box-shadow: 1vmin -0.15vmin 0 0 var(--gray) inset; z-index: 2; transition: all 1s ease 0s; } .head { width: 14vmin; height: 13vmin; background: var(--black); border-radius: 90% 90% 100% 100%; top: 7.25vmin; left: 33vmin; box-shadow: 1.2vmin 0.5vmin 0 0 inset var(--gray); z-index: 3; } .head:before, .head:after { content: ""; position: absolute; width: 3.75vmin; height: 4.25vmin; background: radial-gradient(circle at 60% 50%, #000 1.15vmin, #fff0 calc(1.15vmin + 1px)), #fff; border-radius: 100%; top: 5vmin; left: 2.15vmin; transform: rotate(-10deg); } .head::after { transform: rotate(10deg) rotateY(180deg); left: 8vmin; } .ears { width: 18.25vmin; height: 15vmin; left: 31vmin; top: 2vmin; } .ears:before, .ears:after { content: ""; position: absolute; width: 13vmin; height: 13vmin; left: -2.1vmin; top: 1.5vmin; background: var(--black); border-radius: 0.5vmin 100%; transform: skew(-5deg, -5deg) rotate(19deg); box-shadow: 1.25vmin -0.2vmin 0 0 var(--gray) inset; } .ears:after { left: 7vmin; transform: rotate(69deg) skew(-5deg, -5deg); box-shadow: 0.125vmin -1.5vmin 0 0 var(--gray) inset; } .wings { width: 80vmin; height: 40vmin; z-index: -1; } .wing { background: #ffc10700; width: 40vmin; height: 23vmin; top: 8vmin; transform-origin: 90% 50%; animation: fly-right 1.5s ease 0s infinite; } @keyframes fly-right { 49% { transform: rotate(-25deg); } } @keyframes fly-left { 51% { transform: rotateY(180deg) rotate(-25deg); } } .wing + .wing { transform: rotateY(180deg); left: 7vmin; animation-name: fly-left; } .finger { border-radius: 3vmin 5vmin; width: 0vmin; height: 22vmin; background: #f002; transform: rotate(68deg); top: -6vmin; left: 11vmin; border: 0.85vmin solid var(--black); background: var(--black); z-index: 2; } .finger + .finger { transform: rotate(28deg); top: 0vmin; left: 16vmin; height: 19vmin; } .finger + .finger + .finger { transform: rotate(-9deg); top: 0vmin; left: 23vmin; height: 23vmin; } .finger + .finger + .finger + .finger { transform: rotate(-50deg); top: -3.75vmin; left: 29vmin; height: 23vmin; } .finger:before { content: ""; position: absolute; width: 100%; height: 100%; border: 0.85vmin solid var(--black); border-radius: 100%; } .bat-cat:hover .wing { animation: stop-fly 1.5s cubic-bezier(0.22, 0.61, 0.36, 1) 0s 1; animation-fill-mode: forwards; } @keyframes stop-fly { 100% { transform: rotateY(90deg); } } .bat-cat:before { content: ""; width: 100vw; height: 100vmin; left: 50%; transform: translateX(-50%); bottom: -200vmin; --units: 2vmin; --brick1: #414141; --brick2: #3d3d3d; --lines: #0e0e0e; --gp-ln: 50%/calc(var(--u.........完整代码请登录后点击上方下载按钮下载查看
网友评论0