div+css布局实现一个储钱罐效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局实现一个储钱罐效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> #coin { width: 50px; height: 50px; border-radius: 50%; background: #ccc; border: #999 solid 2px; top: 30px; left: 50%; position: absolute; animation: glow 1s alternate infinite; cursor: pointer; z-index: 3; } #coin.active { animation: coin-drop 10s steps(10); } .piggy { width: 400px; height: 300px; background: #ff6666; border-radius: 50%; margin: 0 auto; margin-top: 100px; position: relative; } .piggy .insert { width: 120px; height: 10px; left: 160px; top: 15px; position: absolute; background: #333; border-top: solid 3px #777; border-radius: 50% 50% 30% 30%; } .piggy .cover { background: #ff6666; width: 115px; height: 50px; position: absolute; top: 55px; left: 70px; transform: rotate(45deg); z-index: 6; } .piggy .coin-cover { position: absolute; z-index: 4; background: #ff6666; height: 80px; width: 80px; left: 190px; top: 28px; } .piggy .right-ear, .piggy .left-ear { border-radius: 50%; position: absolute; left: 100px; z-index: 5; } .piggy .inset { position: absolute; background: #ffabab; width: 100px; height: 100px; border-radius: 50%; } .piggy .outset { position: absolute; background: #ff7373; width: 115px; height: 115px; top: -10px; border-radius: 50%; } .piggy .left-ear { left: 5px; z-index: -1; } .piggy .eye1 { z-index: 10; position: absolute; background: #333; height: 25px; width: 15px; border-radius: 50%; top: 80px; left: 30px; } .piggy .eye2 { z-index: 10; position: absolute; background: #333; height: 25px; width: 15px; border-radius: 50%; top: 80px; left: 90px; } .piggy .nose { position: absolute; top: 120px; left: -20px; width: 120px; height: 100px; border-radius: 50%; background: #ff7575; } .piggy .nose .nostril1 { position: absolute; background: #444; height: 30px; width: 15px; border-radius: 50%; top: 40px; left: 15px; } .piggy .nose .nostril2 { position: absolute; background: #444; height: 30px; width: 15px; border-radius: 50%; top: 40px; left: 50px; } .piggy .foot { height: 60px; width: 80px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0