css实现可爱菠萝跳舞动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现可爱菠萝跳舞动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { background-color:#fafcb8 } .pineapple { font-size:90vmin; height:1em; margin:5vmin auto; width:.9em; position:relative } .pineapple div { position:absolute } .leaf { background-color:darkgreen; border-radius:90% 0 90% 0; height:20%; top:10%; width:20% } .leaf.left { -webkit-animation:leafLeft .25s ease-in-out alternate infinite; animation:leafLeft .25s ease-in-out alternate infinite; left:50%; transform-origin:bottom left } .leaf.middle { -webkit-animation:leafMiddle .25s ease-in-out alternate infinite; animation:leafMiddle .25s ease-in-out alternate infinite; background-color:green; left:40%; top:5%; transform:rotate(-40deg) } .leaf.right { -webkit-animation:leafRight .25s ease-in-out alternate infinite; animation:leafRight .25s ease-in-out alternate infinite; left:50%; transform-origin:bottom left } .body { -webkit-animation:body .25s ease-in-out alternate infinite; animation:body .25s ease-in-out alternate infinite; background-color:#ffa700; border-radius:40%; height:50%; left:24%; top:27%; width:54% } .body::after { background:repeating-linear-gradient(-45deg,transparent,transparent 15%,darkorange 15%,darkorange 20%),repeating-linear-gradient(45deg,transparent,transparent 15%,darkorange 15%,darkorange 20%); border-radius:40%; content:""; height:100%; position:absolute; width:100% } .eye { -webkit-animation:eye 1.04s infinite; animation:eye 1.04s infinite; background-color:black; border-radius:100%; height:15%; top:35%; width:15%; z-index:2 } .eye.left { left:25% } .eye.right { right:25% } .mouth { background-color:black; border-radius:20% 20% 80% 80%; height:12%; left:41%; top:50%; width:18%; z-index:2 } .arm { background-color:#ffa700; border-radius:100vw; height:50%; top:20%; width:20% } .arm.left { -webkit-animation:armLeft .26s ease-in-out alternate infinite; animation:armLeft .26s ease-in-out alternate infinite; left:10%; transform-origin:bottom left } .arm.right { -webkit-animation:armRight .26s ease-in-out alternate infinite; animation:armRight .26s ease-in-out alternate infinite; right:10%; transform-origin:bottom right } .leg { -webkit-animation:foot .26s alternate .13s infinite; animation:foot .26s alternate .13s infinite; background:#ffa700; border-radius:100vw; bottom:-20%; height:40%; width:20% } .leg.left { left:20% } .leg.right { right:20% } .shadow { -webkit-animation:shadow .26s ease alternate infinite; animation:shadow .26s ease alternate infinite; background-color:tan; border-radius:100%; bottom:5%; height:10%; left:28%; opacity:.5; width:46% } @-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0