CSS实现动态字体浪漫表白

编程语言 2018-05-09 14:15:05 阅读次数: 1

情人节快到了

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 id="container">

</div>

<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

<div class="container">
    <div class="grid">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="grid">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
    <div class="grid">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</div><script type="text/javascript"></script>
</body></html>

.

猜你喜欢

转载自570109268.iteye.com/blog/2410707
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022