jquery实现一个抛硬币猜正反面游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现一个抛硬币猜正反面游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { padding: 0; margin: 0; font-family: 'Helvetica', sans-serif; } .wrapper { display: flex; width: 100vw; height: 100vh; align-items: center; justify-content: center; background: brown url("//repo.bfw.wiki/bfwrepo/image/5f14d32694ad3.png"); background-size: cover; flex-direction: column; } .score { font-size: 32px; margin-bottom: 40px; color: white; } .score > span:first-child { margin-right: 40px; } .coin { width: 228px; height: 228px; background-image: url("//repo.bfw.wiki/bfwrepo/image/5fd82d2eb915a.png"); overflow: hidden; border-radius: 200px; } .animate-coin { animation: flip 1.4s 1; } .tails { background-position-x: -228px; } .flip-the-coin { margin-top: 8rem; border: none; border-radius: 3px; font-size: 24px; text-transform: uppercase; padding: .5rem 3rem; background: tomato; box-shadow: 0 4px 0 0 rgba(0,0,0,1); color: white; cursor: pointer; } button:focus { outline: none; } @keyframes flip { 0% { transform: scale3d(1,1,1) rotateX(0deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); } 50% { transform: scale3d(2,2,2) rotateX(3600deg); box-shadow: 0 20px 40px rgba(0,0,0,.8); } 100% { transform: scale3d(1,1,1) rotateX(7200deg); box-shadow: 0 2px 4px rgba(0,0,0,.3); } } </style> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0