css实现双色球开奖号码动画抽奖中奖数字效果代码
代码语言：html
所属分类：动画
代码描述：css实现双色球开奖号码动画抽奖中奖数字效果代码
代码标签： cs 双色球 开奖 号码 动画 抽奖 中奖 数字
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
<style>
* {
box-sizing: border-box;
}
body {
padding-top: 15%;
height: 100vh;
background: linear-gradient(135deg, #333 10%, #000 100%);
}
.ball-wrap {
width: 150px;
height: 150px;
background: linear-gradient(to bottom, #000 0%, #11020A 100%);
border-radius: 50%;
padding: 10px;
margin: 10px auto;
display: block;
}
.ball-wrap .ball-balls {
border-radius: 50%;
width: 130px;
height: 130px;
background: #00193C;
position: relative;
overflow: hidden;
}
.ball-wrap .ball-balls *:before, .ball-wrap .ball-balls *:after, .ball-wrap .ball-balls .ball-light, .ball-wrap .ball-balls .ball-dark, .ball-wrap .ball-balls .ball-sm {
content: "";
position: absolute;
border-radius: 50%;
}
.ball-wrap .ball-balls .ball-sm {
width: 20px;
height: 8px;
background: rgba(255, 255, 255, 0.8);
z-index: 2;
transform: rotate(320deg);
top: 15%;
left: 15%;
}
.ball-wrap .ball-balls .ball-digital {
width: 100px;
position: relative;
margin: 0 auto;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0;
text-align: center;
left: 0;
}
.ball-wrap .ball-balls .ball-digital li {
border-radius: 50%;
width: 100px;
height: 100px;
border: 3px solid #fff;
margin: 15px 0;
display: block;
padding: 7px;
}
.ball-wrap .ball-balls .ball-digital li span {
border-radius: 50%;
width: 80px;
height: 80px;
background: #fff;
font-size: 50px;
display: block;
font-weight: 800;
line-height: 80px;
}
.ball-wrap .ball-balls .ball-light {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.ball-wrap .ball-balls .ball-light:before {
top: 0;
right: -10px;
width: 100%;
height: 100%;
background: radial-gradient(circle at 100% 0px, rgba(132, 254, 254, 0.6), rgba(132, 254, 254, 0) 58%);
filter: blur(5px);
}
.ball-wrap .ball-balls .ball-light:after {
top: 3px;
left: 3px;
width: 90%;
height: 90%;
background-image: linear-gradient(-180deg, rgba(44, 254, 219, 0.6) 10%, rgba(44, 254, 219, 0) 50%);
transform: rotate(320deg);
filter: blur(2px);
}
.ball-wrap .ball-balls .ball-dark {
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.ball-wrap .ball-balls .ball-dark:before {
bottom: 2px;
left: 2px;
width: 90%;
height: 90%;
background: radial-gradient(circle at 100% 0px, rgba(252, 22, 136, 0.6), rgba(252, 22, 136, 0) 60%);
filter: blur(3px);
transform: rotate(150deg);
}
.ball-wrap .ball-balls .ball-dark:after {
bottom: -10px;
right: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at 100% 0px, #fd58e7, rgba(253, 88, 231, 0) 50%);
filter: blur(5px);
transform: rotate(90deg);
}
.ball-wrap .ball-balls .ball-ani {
-webkit-animation: ball-0 0.5s both, ball-1 1s 1.5s, ball-2 1s 2.5s, ball-3 1s 3.5s, ball-4 1s 4.5s, ball-5 1s 5.5s, ball-6 1s 6.5s, ball-7 1s 7.5s, ball-8 1s 8.5s, ball-9 1s 9.5s, ball-10 1s 10.5s, ball-11 1s 11.5s, ball-12 1s 12.5s, ball-13 1s 13.5s, ball-14 1s 14.5s, ball-15 1s 15.5s, ball-16 1s 16.5s, ball-17 1s 17.5s, ball-18 1s 18.5s, ball-19 1s 19.5s, ball-20 0.5s 20s forwards;
animation: ball-0 0.5s both, ball-1 1s 1.5s, ball-2 1s 2.5s, ball-3 1s 3.5s, ball-4 1s 4.5s, ball-5 1s 5.5s, ball-6 1s 6.5s, ball-7 1s 7.5s, ball-8 1s 8.5s, ball-9 1s 9.5s, ball-10 1s 10.5s, ball-11 1s 11.5s, ball-12 1s 12.5s, ball-13 1s 13.5s, ball-14 1s 14.5s, ball-15 1s 15.5s, ball-16 1s 16.5s, ball-17 1s 17.5s, ball-18 1s 18.5s, ball-19 1s 19.5s, ball-20 0.5s 20s forwards;
}
@-webkit-keyframes ball-0 {
0% {
top: 115px;
}
80%, 100% {
top: 0px;
}
}
@keyframes ball-0 {
0% {
top: 115px;
}
80%, 100% {
top: 0px;
}
}
@-webkit-keyframes ball-1 {
0% {
top: 0px;
}
80%, 100% {
top: -115px;
}
}
@keyframes ball-1 {
0% {
top: 0px;
}
80%, 100% {
top: -115px;
}
}
@-webkit-keyframes ball-2 {
0% {
top: -115px;
}
80%, 100% {
top: -230px;
}
}
@keyframes ball-2 {
0% {
top: -115px;
}
80%, 100% {
top: -230px;
}
}
@-webkit-keyframes ball-3 {
0% {
top: -230px;
}
80%, 100% {
top: -345px;
}
}
@keyframes ball-3 {
0% {
top: -230px;
}
80%, 100% {
top: -345px;
}
}
@-webkit-keyframes ball-4 {
0% {
top: -345px;
}
80%, 100% {
top: -460px;
}
}
@keyframes ball-4 {
0% {
top: -345px;
}
80%, 100% {
top: -460px;
}
}
@-webkit-keyframes ball-5 {
0% {
top: -460px;
}
80%, 100% {
top: -575px;
}
}
@keyframes ball-5 {
0% {
top: -460px;
}
80%, 100% {
top: -575px;
}
}
@-webkit-keyframes ball-6 {
0% {
top: -575px;
}
80%, 100% {
top: -690px;
}
}
@keyframes ball-6 {
0% {
top: -575px;
}
80%, 100% {
top: -690px;
}
}
@-webkit-keyframes ball-7 {
0% {
top: -690px;
}
80%, 100% {
top: -805px;
}
}
@keyframes ball-7 {
0% {
top: -690px;
}
80%, 100% {
top: -805px;
}
}
@-webkit-keyframes ball-8 {
0% {
top: -805px;
}
80%, 100% {
top: -920px;
}
}
@keyframes ball-8 {
0% {
top: -805px;
}
80%, 100% {
top: -920px;
}
}
@-webkit-keyframes ball-9 {
0% {
top: -920px;
}
80%, 100% {
top: -1035px;
}
}
@keyframes ball-9 {
0% {
top: -920px;
}
80%, 100% {
top: -1035px;
}
}
@-webkit-keyframes ball-10 {
0% {
top: -1035px;
}
80%, 100% {
top: -1150px;
}
}
@keyframes ball-10 {
0% {
top: -1035px;
}
80%, 100% {
top: -1150px;
}
}
@-webkit-keyframes ball-11 {
0% {
top: -1150px;
}
80%, 100% {
top: -1265px;
}
}
@keyframes ball-11 {
0% {
top: -1150px;
}
80%, 100% {
top: -1265px;
}
}
@-webkit-keyframes ball-12 {
0% {
top: -1265px;
}
80%, 100% {
top: -1380px;
}
}
@keyframes ball-12 {
0% {
top: -1265px;
}
80%, 100% {
top: -1380px;
}
}
@-webkit-keyframes ball-13 {
0% {
top: -1380px;
}
80%, 100% {
top: -1495px;
}
}
@keyframes ball-13 {
0% {
top: -1380px;
}
80%, 100% {
top: -1495px;
}
}
@-webkit-keyframes ball-14 {
0% {
top: -1495px;
}
80%, 100% {
top: -1610px;
}
}
@keyframes ball-14 {
0% .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0