div+css实现深海可爱卡通鲸鱼游动动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现深海可爱卡通鲸鱼游动动画效果代码
代码标签: div css 深海 可爱 卡通 鲸鱼 游动 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; width: 100vw; height: 100vh; overflow: hidden; justify-content: center; align-items: center; background: radial-gradient(circle at center, #f9efe4 50%, #ecc9a5); min-height: 400px; min-width: 400px; } body h1 { position: absolute; bottom: 20px; font-size: 10px; } body details { position: absolute; width: 325px; height: 200px; z-index: 9; top: calc(50% - 100px); left: calc(50% - 162.5px); opacity: 1; color: transparent; font-size: 85px; outline: none; } body details:focus { outline: none; } body details summary { outline: none; } body details summary:before, body details summary:after { opacity: 0; content: ""; position: absolute; width: 10px; height: 10px; background: rgba(255, 255, 255, 0.75); right: 50px; top: 25px; border-radius: 100%; box-shadow: -20px 10px 0 -2.5px rgba(255, 255, 255, 0.75), -10px 20px 0 -1px rgba(255, 255, 255, 0.75); } @-webkit-keyframes bubbling { 0% { opacity: 0; transform: translateY(0px); box-shadow: -20px 10px 0 -2.5px rgba(255, 255, 255, 0.75), -10px 20px 0 -1px rgba(255, 255, 255, 0.75); } 50% { opacity: 1; transform: translateY(-25px); box-shadow: -25px 0px 0 -2.5px rgba(255, 255, 255, 0.75), -5px -10px 0 -1px rgba(255, 255, 255, 0.75); } 100% { opacity: 0; transform: translateY(-50px); box-shadow: -25px 10px 0 -2.5px rgba(255, 255, 255, 0.75), -10px 20px 0 -1px rgba(255, 255, 255, 0.75); } } @keyframes bubbling { 0% { opacity: 0; transform: translateY(0px); box-shadow: -20px 10px 0 -2.5px rgba(255, 255, 255, 0.75), -10px 20px 0 -1px rgba(255, 255, 255, 0.75); } 50% { opacity: 1; transform: translateY(-25px); box-shadow: -25px 0px 0 -2.5px rgba(255, 255, 255, 0.75), -5px -10px 0 -1px rgba(255, 255, 255, 0.75); } 100% { opacity: 0; transform: translateY(-50px); box-shadow: -25px 10px 0 -2.5px rgba(255, 255, 255, 0.75), -10px 20px 0 -1px rgba(255, 255, 255, 0.75); } } body details summary:after { right: 40px; } body details[open] { -webkit-animation: noclick 1.5s linear 1 forwards; animation: noclick 1.5s linear 1 forwards; } body details[open] summary:before, body details[open] summary:after { -webkit-animation: bubbling 3s linear infinite; animation: bubbling 3s linear infinite; } body details[open] summary:after { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } @-webkit-keyframes noclick { 0% { pointer-events: none; } 90% { pointer-events: none; } 100% { pointer-events: normal; } } @keyframes noclick { 0% { pointer-events: none; } 90% { pointer-events: none; } 100% { pointer-events: normal; } } body details[open] ~ .wrap .narwhal { -webkit-animation: shake 0.1s ease-out 10 forwards; animation: shake 0.1s ease-out 10 forwards; } @-webkit-keyframes shake { from { transform: translateX(1px) translateY(-1px); } to { transform: translateX(-1px) translateY(1px); } } @keyframes shake { from { transform: translateX(1px) translateY(-1px); } to { transform: translateX(-1px) translateY(1px); } } body details[open] ~ .wrap .narwhal .tail { -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } @-webkit-keyframes wag { from { transform: rotate(0deg); } to { transform: rotate(-5deg); } } @keyframes wag { from { transform: rotate(0deg); } to { transform: rotate(-5deg); } } body details[open] ~ .wrap .narwhal .horn { transition-delay: 0.9s; transform: rotate(45deg) scaleY(1); } body details[open] ~ .wrap .narwhal .face:before, body details[open] ~ .wrap .narwhal .face:after { transition-delay: 1.1s; } body details[open] ~ .wrap .narwhal .face:before { transform: scaleX(1); border-radius: 100%; } body details[open] ~ .wrap .narwhal .face:after { transform: translateY(-6px) translateX(-4px); box-shadow: 26px 0 0 #437962; } body details[open] ~ .wrap .narwhal .face .eyes { -webkit-animation: squint 1.4s ease-in-out 1 forwards; animation: squint 1.4s ease-in-out 1 forwards; } @-webkit-keyframes squint { 10% { border-radius: 3px; transform: scaleX(1.5) scaleY(0.5); } 80% { border-radius: 3px; transform: scaleX(1.5) .........完整代码请登录后点击上方下载按钮下载查看
网友评论0