css实现小猫欢迎跳跃贺卡动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现小猫欢迎跳跃贺卡动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /*\ |*| Core \*/ @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap"); body { font-family: "Fredoka One", cursive; position: relative; overflow: hidden; height: 100vh; background: conic-gradient(from -90deg at 50% 50%, #eb5757 0deg, #f2994a 90deg, #219653 180deg, #2d9cdb 270deg, #eb5757 360deg); perspective: 100vmin; } body::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: radial-gradient(50% 50% at 50% 50%, #eb5757 0%, rgba(235, 87, 87, 0.67) 26.56%, rgba(235, 87, 87, 0) 100%); } /*\ |*| Container \*/ .container { z-index: 1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: flex; align-items: center; justify-content: center; -webkit-animation: jump 1s ease-in-out alternate infinite; animation: jump 1s ease-in-out alternate infinite; } @-webkit-keyframes jump { from { transform: scaleY(1) translateY(-10vmin); } to { transform: scaleY(0.9) translateY(10vmin); } } @keyframes jump { from { transform: scaleY(1) translateY(-10vmin); } to { transform: scaleY(0.9) translateY(10vmin); } } /*\ |*| Card \*/ .card { position: relative; background: #f5f5f5; width: 50vmin; height: 70vmin; border-radius: 25vmin 25vmin 3vmin 3vmin; border-bottom: 0.5vmin solid #777; box-shadow: rgba(0, 0, 0, 0.3) 0 0.4vmin 0.4vmin, rgba(0, 0, 0, 0.25) 0 0.8vmin 0.8vmin, rgba(0, 0, 0, 0.2) 0 1.6vmin 1.6vmin; cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAAD////MzMwAAACZZjP/zJlVVVW7u7vA84tnAAAAAXRSTlMAQObYZgAAAKBJREFUKM990DEKAjEQheHAnuARsn0G7eOOYC/ZAywyB7Cx9/6NmTS+RDBdfr6ZYkJQLYHfIq84lAvwjBxuwAomqm+AyZabQeGwYiCLAEAqFLKXB830YkzEw0wSk008OOG9ZjoOGTDsTWaITM5NQJkcAA9d6+4hfkndbSZ2zMQDdN6SfgLN3PsZKIgIstH5pb1a+f7+H8Op/hdLJ4GJj3wAtEwihNsbCogAAAAASUVORK5CYII="), default; transform: rotateX(0deg) rotateY(20deg) scale(1); transform-style: preserve-3d; transition: 1.5s ease-in-out; transition-property: transform; } .card::after, .card::before { content: ""; position: absolute; top: -2vmin; left: 8vmin; width: 12vmin; height: 7vmin; border-radius: 6vmin 6vmin 0 0; background: #f5f5f5; box-shadow: 0 -0.3vmin 0.2vmin rgba(0, 0, 0, 0.1); } .card::after { transform: rotate(-10deg); } .card::before { left: calc(50vmin - 12vmin - 8vmin); transform: rotate(10deg); } .card_back { box-shadow: none; transform: translateZ(-0.1vmin); } #card { height: 0; width: 0; position: absolute; opacity: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; left: 100%; } #card:checked + .card { transform: rotateX(360deg) rotateY(-20deg) scale(0.8); } /*\ |*| Eears' Shadow \*/ .ear-shadow { z-index: 1; position: absolute; top: -1vmin; left: 11vmin; width: 8vmin; height: 8vmin; border-radius: 50%; border-top: 0.5vmin solid rgba(180, 0, 0, 0.25); transform: rotate(-25deg); } .ear-shadow_right { transform: rotate(25deg); left: calc(50vmin - 8vmin - 11vmin); } /*\ |*| Eyes \*/ .eyes { z-index: 1; position: absolute; } .eyes::after, .eyes::before { content: ""; position: absolute; top: 15vmin; left: 10vmin; width: 10vmin; height: 10vmin; border-radius: 50%; border-top: 1vmin solid #111; } .eyes::before { left: calc(50vmin - 10vmin - 10vmin); } /*\ |*| Nose \*/ .nose { z-index: 1; position: absolute; top: 23vmin; left: 23.5vmin; width: 3vmin; height: 2vmin; border-radius: 50%; background: #d98695; box-shadow: inset 0.5vmin 0.3vmin 0.7vmin rgba(255, 255, 255, 0.8); } /*\ |*| Mouth \*/ .mouth { z-index: 1; position: absolute; } .mouth::after, .mouth::before { content: ""; position: absolute; top: 21.7vmin; left: 20.05vmin; width: 5vmin; height: 5vmin; border-radius: 50%; border-bottom: 0.7vmin solid #111; } .mouth::before { left: calc(50vmin - 5vmin - 20.05vmin); } /*\ |*| Mustache \*/ .mustache { z-index: 1; position: absolute; top: 24vmin; left: 9vmin; width: 10vmin; height: 2vmin; border-radius: 50%; border-top: 0.35vmin solid #111; transform: rotate(-10deg); } .mustache::after, .mustache::before { content: ""; position: absolute; top: 1vmin; left: 3vmin; width: 7vmin; height: 2vmin; border-radius: 50%; border-top: 0.35vmin solid #111; transform: rotate(-24deg); } .mustache::before { top: -1.7vmin; left: 2vmin; width: 8vmin; transform: rotate(19deg); } .mustache_right { left: calc(50vmin - 10vmin - 9vmin); transform: rotate(10deg) scale(-1, 1); } /*\ |*| Paws \*/ .paw { z-index: 1; position: absolute; top: 37vmin; left: 1vmin; width: 12vmin; height: 12vmin; border-radius: 50%; border-righ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0