CSS实现动态字体浪漫表白

2018-02-27 11:07:49来源:http://570109268.iteye.com作者:青春..荒唐人点击

分享

情人节快到了

I love you

跳跃的表达

 

【备注】

缺点:代码累赘

优化:后期用JS数组控制数据展示排版,类似于点状时间显示表

          (优化涉及一维,二维,三维数组,这个我们在后面文章里做介绍)

<!DOCTYPE html><html><head><style>body {    margin: 0;    background-color: #1D1F20;}.container {    position: absolute;    margin: auto;    left: 0;    right: 0;    width: 100%;    height: 100%;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-flex-wrap: wrap;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    -webkit-box-pack: center;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    -webkit-align-content: center;    -ms-flex-line-pack: center;    align-content: center;}.grid {    width: 330px;    height: 330px;    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;    -webkit-flex-wrap: wrap;    -ms-flex-wrap: wrap;    flex-wrap: wrap;    -webkit-box-pack: center;    -webkit-justify-content: center;    -ms-flex-pack: center;    justify-content: center;    -webkit-box-align: center;    -webkit-align-items: center;    -ms-flex-align: center;    align-items: center;    -webkit-align-content: center;    -ms-flex-line-pack: center;    align-content: center;}.cell {    box-sizing: border-box;    width: 30px;    height: 30px;    background: red;    color: #F62A65;    border-radius: 50%;    margin: 3px;    -webkit-transform: scale(0.1);    transform: scale(0.1);}.grid:nth-child(1) .cell:nth-child(12) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(13) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(14) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(15) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(16) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(23) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(32) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(41) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(50) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(57) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(58) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(59) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(60) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(1) .cell:nth-child(61) {    color: red;    -webkit-animation: up 3s infinite;    animation: up 3s infinite;}.grid:nth-child(2) .cell:nth-child(12) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(13) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(15) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(16) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(20) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(21) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(22) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(23) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(24) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(25) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(26) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(29) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(30) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(31) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(32) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(33) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(34) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(35) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(39) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(40) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(41) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(42) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(43) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(49) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(50) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(51) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(2) .cell:nth-child(59) {    -webkit-animation: up 3s 0.25s infinite;    animation: up 3s 0.25s infinite;}.grid:nth-child(3) .cell:nth-child(12) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(16) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(21) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(25) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(30) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(34) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(39) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(43) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(48) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(52) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(57) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(58) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(59) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(60) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}.grid:nth-child(3) .cell:nth-child(61) {    color: red;    -webkit-animation: up 3s 0.5s infinite;    animation: up 3s 0.5s infinite;}@-webkit-keyframes up {    30% {        background-color: currentColor;        -webkit-transform: scale(1);        transform: scale(1);    }    80% {        background: red;        -webkit-transform: scale(0.1);        transform: scale(0.1);    }}@keyframes up {    30% {        background-color: currentColor;        -webkit-transform: scale(1);        transform: scale(1);    }    80% {        background: red;        -webkit-transform: scale(0.1);        transform: scale(0.1);    }}</style></head><body><!-- HTML代码片段中请勿添加<body>标签 //--><div ></div><!-- 推荐开源CDN来选取需引用的外部JS //--><script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script><div >    <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>    </div>    <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>    </div>    <div >        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>    </div></div><script type="text/javascript"></script></body></html>

 

 

 

 

 

 

 

.

 

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台