可爱棉花糖卡通宠物效果代码
代码语言:html
所属分类:动画
代码描述:可爱棉花糖卡通宠物效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body, html { height: 100%; background: #f9e2f0; margin: 0; padding: 0; } .wrapper { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } #creature { background: lightgray; border-radius: 120% 130% 40% 40%; position: relative; top: 0; animation: bounce 1s infinite alternate; } .ear { width: 60px; height: 100px; position: absolute; background: lightgray; top: -60px; border-radius: 84%/125% 134% 33% 40%; z-index: 2; } .ear-left { left: 30px; transform: rotate(0deg); } .ear-right { right: 32px; } .earinner { width: 30px; height: 60px; position: absolute; background: #88898c; top: -50px; border-radius: 84%/130% 100% 20% 20%; z-index: 2; } .earinner-left { left: 45px; transform: rotate(0deg); } .earinner-right { right: 45px; } .eye { background: #000; width: 12px; height: 12px; position: absolute; top: 50px; border-radius: 50%; z-index: 3; animation: blink 2s infinite alternate; } .eye-left { left: 55px; } .eye-right { right: 55px; } .cheek { background: #ff7bac; height: 12px; width: 30px; border-radius: 50%/60% 50%; position: absolute; top: 67px; } .cheek-left { left: 40px; } .cheek-right { right: 40px; } .mouth { width: 55px; height: 20px; background-color: #b91a5a; border-bottom-left-radius: 20px; border-bottom-right-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0