CSS3 动态浮动粒子背景的信息卡UI模板

动态浮动粒子背景的信息卡模板

CSS3, 模板

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4751
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
body,
html {
    height: 100%;
    width: 100%;
    background: -webkit-linear-gradient(0deg, #031131, #284C75);
    background: linear-gradient(90deg, #031131, #284C75);
    font-family: 'Open Sans', Calibri;
    font-weight: 400;
    overflow: hidden;
}
.card {
    position: fixed;
    color: #4E6868;
    border-radius: 6px;
    background-color: white;
    width: 400px;
    left: 50%;
    margin-left: -200px;
    height: 500px;
    top: 50%;
    margin-top: -100px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    text-align: center;
    z-index: 9999999;
}
.card .avatar {
    position: absolute;
    width: 100%;
    top: -200px;
}
.card .avatar .cp {
    color: white;
    font-weight: 100;
    font-size: 2em;
    top: -50px;
    position: relative;
}
.card .avatar .cp span {
    font-weight: 900;
    font-size: 1.4em;
}
.card .avatar .meter {
    position: absolute;
    height: 350px;
    width: 350px;
    left: 50%;
    top: 20px;
    margin-left: -175px;
    border-top: 4px solid white;
    border-bottom: 4px solid white;
    border-left: 4px solid white;
    border-right: 4px solid rgba(255, 255, 255, 0.5);
    border-radius: 100%;
}
.card .avatar .meter:after {
    content: '';
    background-color: white;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    display: block;
    position: absolute;
    right: 45px;
    top: 40px;
}
.card .avatar img {
    width: 150px;
    margin: 0 auto;
    z-index: 9999;
    top: -50px;
    position: relative;
}
.card .pokename {
    padding: 60px 0 15px;
    font-size: 2em;
    z-index: 9999;
    position: relative;
}
.card .pokename i {
    font-size: .8em;
    color: #999;
    z-index: 9999;
    position: relative;
}
.card .hp {
    width: 200px;
    height: 5px;
    z-index: 9999;
    position: relative;
    background-color: #71EDB6;
    margin: 0 auto;
    border-radius: 2px;
    font-weight: 900;
}
.card .hp span {
    font-size: .9em;
    padding-top: 14px;
    display: block;
    z-index: 9999;
    position: relative;
}
.card .stats {
    height: auto;
    margin: 30px auto 40px;
    width: 90%;
    padding: 15px;
    z-index: 9999;
    position: relative;
}
.card .stats .stat {
    float: left;
    padding: 5px;
    width: 33.33333332%;
    box-sizing: border-box;
    border-right: 1px solid rgba(0, 0, 0, 0.15);
    font-weight: 900;
}
.card .stats .stat:nth-child(3) {
    border: none;
}
.card .stats .stat span {
    padding-top: 8px;
    display: block;
    font-size: .8em;
    font-weight: 100;
}
.card hr {
    position: relative;
    top: 15px;
    border: none;
    height: 1px;
    width: 100%;
    display: block;
    background-color: rgba(0, 0, 0, 0.15);
}
.card .star-candy {
    margin: 40px 0 60px;
}
.card .star-candy .starcandy {
    width: 50%;
    float: left;
}
.card .star-candy .starcandy span {
    top: -6px;
    font-weight: 900;
    font-size: 1.2em;
    position: relative;
}
.card .power-up {
    width: 80%;
    margin: 10px auto;
    background-color: #E8EFDF;
    height: 47px;
    font-weight: 500;
    border-radius: 50px 3px 3px 50px;
}
.card .power-up .btn {
    float: left;
    border-radius: 50px;
    padding: 15px;
    width: 50%;
    cursor: pointer;
    color: white;
    position: relative;
    z-index: 99999;
    box-sizing: border-box;
    background: -webkit-linear-gradient(0deg, #A5DA96, #3FCCA9);
    background: linear-gradient(90deg, #A5DA96, #3FCCA9);
}
.card .power-up .btn:hover {
    background: -webkit-linear-gradient(250deg, #A5DA96, #3FCCA9);
    background: linear-gradient(200deg, #A5DA96, #3FCCA9);
}
.card .power-up .reqs {
    top: 8px;
    position: relative;
    display: block;
}
.card .power-up .reqs span {
    top: -8px;
    position: relative;
    margin-right: 12px;
}
.creds {
    position: fixed;
    bottom: 2px;
    right: 2px;
    color: #ccc;
    font-size: .8em;
}
.creds a {
    color: #41CCA9;
}
.particles {
    height: 100%;
    width: 100%;
}
.particles .particle {
    border-radius: 50%;
    position: absolute;
    background-color: white;
}
.particles .particle:nth-child(1) {
    top: 22%;
    left: 22%;
    height: 1.4px;
    width: 1.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20655ms -9830s ease-in-out infinite;
    animation: sparkle 20655ms -9830s ease-in-out infinite;
}
.particles .particle:nth-child(2) {
    top: 31%;
    left: 8%;
    height: 2.8px;
    width: 2.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23563ms -6854s ease-in-out infinite;
    animation: sparkle 23563ms -6854s ease-in-out infinite;
}
.particles .particle:nth-child(3) {
    top: 48%;
    left: 15%;
    height: 4.2px;
    width: 4.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24351ms -8548s ease-in-out infinite;
    animation: sparkle 24351ms -8548s ease-in-out infinite;
}
.particles .particle:nth-child(4) {
    top: 39%;
    left: 37%;
    height: 5.6px;
    width: 5.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22199ms -255s ease-in-out infinite;
    animation: sparkle 22199ms -255s ease-in-out infinite;
}
.particles .particle:nth-child(5) {
    top: 19%;
    left: 10%;
    height: 7px;
    width: 7px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22263ms -4484s ease-in-out infinite;
    animation: sparkle 22263ms -4484s ease-in-out infinite;
}
.particles .particle:nth-child(6) {
    top: 22%;
    left: 80%;
    height: 8.4px;
    width: 8.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20568ms -1014s ease-in-out infinite;
    animation: sparkle 20568ms -1014s ease-in-out infinite;
}
.particles .particle:nth-child(7) {
    top: 2%;
    left: 95%;
    height: 9.8px;
    width: 9.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21110ms -1269s ease-in-out infinite;
    animation: sparkle 21110ms -1269s ease-in-out infinite;
}
.particles .particle:nth-child(8) {
    top: 48%;
    left: 61%;
    height: 11.2px;
    width: 11.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24073ms -8350s ease-in-out infinite;
    animation: sparkle 24073ms -8350s ease-in-out infinite;
}
.particles .particle:nth-child(9) {
    top: 15%;
    left: 35%;
    height: 12.6px;
    width: 12.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23960ms -4081s ease-in-out infinite;
    animation: sparkle 23960ms -4081s ease-in-out infinite;
}
.particles .particle:nth-child(10) {
    top: 43%;
    left: 11%;
    height: 14px;
    width: 14px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23745ms -2024s ease-in-out infinite;
    animation: sparkle 23745ms -2024s ease-in-out infinite;
}
.particles .particle:nth-child(11) {
    top: 40%;
    left: 26%;
    height: 15.4px;
    width: 15.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24166ms -4383s ease-in-out infinite;
    animation: sparkle 24166ms -4383s ease-in-out infinite;
}
.particles .particle:nth-child(12) {
    top: 16%;
    left: 70%;
    height: 16.8px;
    width: 16.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24574ms -8252s ease-in-out infinite;
    animation: sparkle 24574ms -8252s ease-in-out infinite;
}
.particles .particle:nth-child(13) {
    top: 21%;
    left: 84%;
    height: 18.2px;
    width: 18.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24263ms -3941s ease-in-out infinite;
    animation: sparkle 24263ms -3941s ease-in-out infinite;
}
.particles .particle:nth-child(14) {
    top: 49%;
    left: 38%;
    height: 19.6px;
    width: 19.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20564ms -487s ease-in-out infinite;
    animation: sparkle 20564ms -487s ease-in-out infinite;
}
.particles .particle:nth-child(15) {
    top: 50%;
    left: 79%;
    height: 21px;
    width: 21px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23446ms -4107s ease-in-out infinite;
    animation: sparkle 23446ms -4107s ease-in-out infinite;
}
.particles .particle:nth-child(16) {
    top: 7%;
    left: 25%;
    height: 22.4px;
    width: 22.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24683ms -8294s ease-in-out infinite;
    animation: sparkle 24683ms -8294s ease-in-out infinite;
}
.particles .particle:nth-child(17) {
    top: 16%;
    left: 100%;
    height: 23.8px;
    width: 23.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23225ms -3037s ease-in-out infinite;
    animation: sparkle 23225ms -3037s ease-in-out infinite;
}
.particles .particle:nth-child(18) {
    top: 33%;
    left: 59%;
    height: 25.2px;
    width: 25.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20079ms -6761s ease-in-out infinite;
    animation: sparkle 20079ms -6761s ease-in-out infinite;
}
.particles .particle:nth-child(19) {
    top: 23%;
    left: 36%;
    height: 26.6px;
    width: 26.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21000ms -1600s ease-in-out infinite;
    animation: sparkle 21000ms -1600s ease-in-out infinite;
}
.particles .particle:nth-child(20) {
    top: 43%;
    left: 48%;
    height: 28px;
    width: 28px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24370ms -9288s ease-in-out infinite;
    animation: sparkle 24370ms -9288s ease-in-out infinite;
}
.particles .particle:nth-child(21) {
    top: 49%;
    left: 77%;
    height: 29.4px;
    width: 29.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23949ms -9514s ease-in-out infinite;
    animation: sparkle 23949ms -9514s ease-in-out infinite;
}
.particles .particle:nth-child(22) {
    top: 18%;
    left: 49%;
    height: 30.8px;
    width: 30.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22419ms -5008s ease-in-out infinite;
    animation: sparkle 22419ms -5008s ease-in-out infinite;
}
.particles .particle:nth-child(23) {
    top: 47%;
    left: 47%;
    height: 32.2px;
    width: 32.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21378ms -7951s ease-in-out infinite;
    animation: sparkle 21378ms -7951s ease-in-out infinite;
}
.particles .particle:nth-child(24) {
    top: 22%;
    left: 68%;
    height: 33.6px;
    width: 33.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24432ms -1675s ease-in-out infinite;
    animation: sparkle 24432ms -1675s ease-in-out infinite;
}
.particles .particle:nth-child(25) {
    top: 50%;
    left: 13%;
    height: 35px;
    width: 35px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20732ms -1792s ease-in-out infinite;
    animation: sparkle 20732ms -1792s ease-in-out infinite;
}
.particles .particle:nth-child(26) {
    top: 42%;
    left: 92%;
    height: 36.4px;
    width: 36.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24003ms -5488s ease-in-out infinite;
    animation: sparkle 24003ms -5488s ease-in-out infinite;
}
.particles .particle:nth-child(27) {
    top: 30%;
    left: 47%;
    height: 37.8px;
    width: 37.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24871ms -5170s ease-in-out infinite;
    animation: sparkle 24871ms -5170s ease-in-out infinite;
}
.particles .particle:nth-child(28) {
    top: 37%;
    left: 31%;
    height: 39.2px;
    width: 39.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23266ms -8852s ease-in-out infinite;
    animation: sparkle 23266ms -8852s ease-in-out infinite;
}
.particles .particle:nth-child(29) {
    top: 13%;
    left: 66%;
    height: 40.6px;
    width: 40.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21027ms -2589s ease-in-out infinite;
    animation: sparkle 21027ms -2589s ease-in-out infinite;
}
.particles .particle:nth-child(30) {
    top: 27%;
    left: 77%;
    height: 42px;
    width: 42px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20936ms -2195s ease-in-out infinite;
    animation: sparkle 20936ms -2195s ease-in-out infinite;
}
.particles .particle:nth-child(31) {
    top: 33%;
    left: 8%;
    height: 43.4px;
    width: 43.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20396ms -4822s ease-in-out infinite;
    animation: sparkle 20396ms -4822s ease-in-out infinite;
}
.particles .particle:nth-child(32) {
    top: 11%;
    left: 10%;
    height: 44.8px;
    width: 44.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20510ms -3230s ease-in-out infinite;
    animation: sparkle 20510ms -3230s ease-in-out infinite;
}
.particles .particle:nth-child(33) {
    top: 22%;
    left: 70%;
    height: 46.2px;
    width: 46.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24266ms -7527s ease-in-out infinite;
    animation: sparkle 24266ms -7527s ease-in-out infinite;
}
.particles .particle:nth-child(34) {
    top: 20%;
    left: 94%;
    height: 47.6px;
    width: 47.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21275ms -7413s ease-in-out infinite;
    animation: sparkle 21275ms -7413s ease-in-out infinite;
}
.particles .particle:nth-child(35) {
    top: 6%;
    left: 9%;
    height: 49px;
    width: 49px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21653ms -8600s ease-in-out infinite;
    animation: sparkle 21653ms -8600s ease-in-out infinite;
}
.particles .particle:nth-child(36) {
    top: 45%;
    left: 61%;
    height: 50.4px;
    width: 50.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22251ms -9924s ease-in-out infinite;
    animation: sparkle 22251ms -9924s ease-in-out infinite;
}
.particles .particle:nth-child(37) {
    top: 43%;
    left: 91%;
    height: 51.8px;
    width: 51.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23311ms -851s ease-in-out infinite;
    animation: sparkle 23311ms -851s ease-in-out infinite;
}
.particles .particle:nth-child(38) {
    top: 44%;
    left: 60%;
    height: 53.2px;
    width: 53.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23125ms -2999s ease-in-out infinite;
    animation: sparkle 23125ms -2999s ease-in-out infinite;
}
.particles .particle:nth-child(39) {
    top: 7%;
    left: 3%;
    height: 54.6px;
    width: 54.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 20482ms -7141s ease-in-out infinite;
    animation: sparkle 20482ms -7141s ease-in-out infinite;
}
.particles .particle:nth-child(40) {
    top: 6%;
    left: 36%;
    height: 56px;
    width: 56px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 21408ms -8966s ease-in-out infinite;
    animation: sparkle 21408ms -8966s ease-in-out infinite;
}
.particles .particle:nth-child(41) {
    top: 34%;
    left: 63%;
    height: 57.4px;
    width: 57.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23371ms -9760s ease-in-out infinite;
    animation: sparkle 23371ms -9760s ease-in-out infinite;
}
.particles .particle:nth-child(42) {
    top: 48%;
    left: 95%;
    height: 58.8px;
    width: 58.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22357ms -3861s ease-in-out infinite;
    animation: sparkle 22357ms -3861s ease-in-out infinite;
}
.particles .particle:nth-child(43) {
    top: 47%;
    left: 84%;
    height: 60.2px;
    width: 60.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23826ms -3429s ease-in-out infinite;
    animation: sparkle 23826ms -3429s ease-in-out infinite;
}
.particles .particle:nth-child(44) {
    top: 4%;
    left: 84%;
    height: 61.6px;
    width: 61.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22908ms -19s ease-in-out infinite;
    animation: sparkle 22908ms -19s ease-in-out infinite;
}
.particles .particle:nth-child(45) {
    top: 37%;
    left: 4%;
    height: 63px;
    width: 63px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23720ms -8566s ease-in-out infinite;
    animation: sparkle 23720ms -8566s ease-in-out infinite;
}
.particles .particle:nth-child(46) {
    top: 24%;
    left: 77%;
    height: 64.4px;
    width: 64.4px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22227ms -1878s ease-in-out infinite;
    animation: sparkle 22227ms -1878s ease-in-out infinite;
}
.particles .particle:nth-child(47) {
    top: 2%;
    left: 35%;
    height: 65.8px;
    width: 65.8px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22671ms -2703s ease-in-out infinite;
    animation: sparkle 22671ms -2703s ease-in-out infinite;
}
.particles .particle:nth-child(48) {
    top: 8%;
    left: 89%;
    height: 67.2px;
    width: 67.2px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 23661ms -6906s ease-in-out infinite;
    animation: sparkle 23661ms -6906s ease-in-out infinite;
}
.particles .particle:nth-child(49) {
    top: 42%;
    left: 3%;
    height: 68.6px;
    width: 68.6px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 24207ms -9998s ease-in-out infinite;
    animation: sparkle 24207ms -9998s ease-in-out infinite;
}
.particles .particle:nth-child(50) {
    top: 32%;
    left: 51%;
    height: 70px;
    width: 70px;
    -webkit-transition: all 2s ease;
    transition: all 2s ease;
    -webkit-animation: sparkle 22280ms -6338s ease-in-out infinite;
    animation: sparkle 22280ms -6338s ease-in-out infinite;
}
@-webkit-keyframes sparkle {
    0% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        background-color: Rgba(255, 255, 255, 0.275);
        -webkit-transform: translateX(-41px) translateY(-24px);
        transform: translateX(-41px) translateY(-24px);
    }
    40% {
        background-color: Rgba(255, 255, 255, 0.26);
    }
    50% {
        background-color: Rgba(255, 255, 255, 0.616);
        -webkit-transform: translateX(-15px) translateY(-23px);
        transform: translateX(-15px) translateY(-23px);
    }
    60% {
        background-color: Rgba(255, 255, 255, 0.42);
    }
    75% {
        background-color: Rgba(255, 255, 255, 0.306);
        -webkit-transform: translateX(-50px) translateY(-37px);
        transform: translateX(-50px) translateY(-37px);
    }
    100% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes sparkle {
    0% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    25% {
        background-color: Rgba(255, 255, 255, 0.275);
        -webkit-transform: translateX(-41px) translateY(-24px);
        transform: translateX(-41px) translateY(-24px);
    }
    40% {
        background-color: Rgba(255, 255, 255, 0.26);
    }
    50% {
        background-color: Rgba(255, 255, 255, 0.616);
        -webkit-transform: translateX(-15px) translateY(-23px);
        transform: translateX(-15px) translateY(-23px);
    }
    60% {
        background-color: Rgba(255, 255, 255, 0.42);
    }
    75% {
        background-color: Rgba(255, 255, 255, 0.306);
        -webkit-transform: translateX(-50px) translateY(-37px);
        transform: translateX(-50px) translateY(-37px);
    }
    100% {
        background-color: Rgba(255, 255, 255, 0.3);
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

HTML

<div class='particles'>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
    <div class='particle'></div>
</div>
<div class='card'>
    <div class='avatar'>
        <div class='cp'>
            CP<span>9001</span>
        </div>
        <div class='meter'></div>
        <img alt='' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/bernie.png'>
    </div>
    <div class='pokename'>
        Bernie Sanders <i class="fa fa-pencil"></i>
    </div>
    <div class='hp'>
        <span>HP 9001/9001</span>
    </div>
    <div class='stats'>
        <div class='type stat'>
            Ind.
            <br>
            <span>Type</span>
        </div>
        <div class='weight stat'>
            180 lb
            <br>
            <span>Weight</span>
        </div>
        <div class='height stat'>
            1.8 m
            <br>
            <span>Height</span>
        </div>
        <hr>
        <div class='star-candy'>
            <div class='stardust starcandy'>
                <img alt='' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/stardust.jpg'>
                <span>27000</span>
                <br> Stardust
            </div>
            <div class='candy starcandy'>
                <img alt='' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/candy.png'>
                <span>398</span>
                <br> Bernie Candy
            </div>
        </div>
    </div>
    <div class='power-up'>
        <div class='btn'>Power Up</div>
        <div class='reqs'>
            <img class="img-req" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/stardust.jpg">
            <span class='req'>200</span>
            <img class="img-req" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/candy.png">
            <span class='req'>1</span>
        </div>
    </div>
    <div class='power-up'>
        <div class='btn'>Evolve</div>
        <div class='reqs'>
            <img class="img-req" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/157557/candy.png">
            <span class='req'>50</span>
        </div>
    </div>
</div>

动态浮动粒子背景的信息卡模板

CSS3, 模板

编辑器支持Emmet

快捷键

动态浮动粒子背景的信息卡模板

CSS3, 模板

CSS3 发送留言的动效页面的UI模板

CSS3 悬停时跳出半透明内容遮层的图卡UI模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：