纯css实现狗狗滑滑梯动画效果
代码语言:html
所属分类:动画
代码描述:纯css实现狗狗滑滑梯动画效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { --dog-color: white; --dog-accent-color: #333642; --background-color: #25A9FC; --slide-color: #FEDF01; --ladder-color: #0185B5; --heart-color: #E81C23; } body{ background: var(--background-color); } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 600px; height:600px; } /* Convenience wrapper for easy positioning */ .dog { position: absolute; right: 170px; top: 70px; width: 58px; height: 75px; animation: dogSlide 2s infinite ease-in-out; } @keyframes dogSlide { 10% { transform: translateX(-25px); } 70% { transform: rotate(-20deg) translate(-185px, 50px); } 90% { transform: translate(-205px, 125px); } 100% { transform: translate(-205px, 125px); } } .heart { opacity: 0; position: absolute; background: var(--heart-color); width: 15px; height: 15px; border-radius: 50%; top: -50px; left: 60%; transform: translateX(-60%); animation: heartAppear 2s infinite ease-in-out; } .heart::before { content: ''; position: absolute; left: 10px; background: var(--heart-color); width: 15px; height: 15px; border-radius: 50%; } .heart::after { content: ''; position: absolute; top: 10px; left: 0; background: var(--heart-color); width: 25px; height: 10px; clip-path: polygon(50% 100%, 0 0, 100% 0); } @keyframes heartAppear { 0% { opacity: 0; } 50% { opacity: 0; } 70% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } } .body { position: absolute; left: 13px; width: 44px; height: 75px; border-radius: 25% 10% 20% 20%; background: var(--dog-color); } .body::before{ content: ''; position: absolute; top: 5px; left: -3px; background: var(--dog-color); border-radius: 20%; width: 20px; height: 30px; transform: rotate(45deg); } /* Snout section */ .body::after { content: ''; position: absolute; background: var(--dog-color); width: 25px; height: 15px; top: 20px; left: -12px; border-radius: 20% 20% 50% 20%; border-bottom: 2px solid var(--dog-accent-color); animation: dogSmile 2s infinite ease-in-out; } @keyframes dogSmile { 0% { border-radius: 20% 20% 20% 20%; border-bottom: none; } 70% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0