jquery+css实现三维摇骰子显示随机数动画效果代码
代码语言:html
所属分类:其他
代码描述:jquery+css实现三维摇骰子显示随机数动画效果代码
代码标签: jquery css 三维 摇 骰子 显示 随机数 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <style> @import url("https://fonts.googleapis.com/css?family=Work+Sans:400,700,900"); body { font-family: "Work Sans", sans-serif; height: 100vh; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background: #272825; color: #fa2d7d; color: #575344; } [onclick] { outline: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .viewport { perspective: 400px; perspective-origin: 50% 50%; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; } .cube { font-size: 0.5em; position: relative; margin: 0 auto; height: 10em; width: 10em; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transition: transform 1s ease-out; display: inline-block; margin: 4em; } .cube > div { overflow: hidden; position: absolute; height: 10em; width: 10em; border: 0.3em solid; b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0