情人节快到了
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>
.
相关推荐
1、资源内容地址:https://blog.csdn.net/2301_79696294/article/details/144633369 2、数据特点:今年全新,手工精心整理,放心引用,数据来自权威,且标注《数据来源》,相对于其他人的控制变量数据准确很多,适合写论文做实证用 ,不会出现数据造假问题 3、适用对象:大学生,本科生,研究生小白可用,容易上手!!! 4、课程引用: 经济学,地理学,城市规划与城市研究,公共政策与管理,社会学,商业与管理
1.Matlab实现DBN-ELM深度置信网络融合极限学习机多输入单输出回归预测(Matlab完整源码和数据)。 2.输出对比图、误差图,运行环境Matlab2023b及以上。 3.代码特点:参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍:机器学习之心,博客专家认证,机器学习领域创作者,2023博客之星TOP50,主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析,文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年,更多仿真源码、数据集定制私信.
2024 Java offer 收割指南.pdf
2011-2023年各省金融监管水平数据(含原始数据+计算过程+计算结果) 1、时间:2011-2023年 2、来源:国家统计J、统计NJ 3、指标:金融业增加值、金融监管支出、金融监管水平 4、计算方法:金融监管水平=金融监管支出/金融业增加值
花生好坏缺陷识别数据集,7262张图片,支持coco json格式的标注,识别准确率在95.7% 两种标签: Good,Bad 花生好坏缺陷识别数据集,7262张图片,支持yolo,coco json,pasical voc xml格式的标注,识别准确率在95.7% 详情查看地址:https://backend.blog.csdn.net/article/details/144983881
Java项目-基于SSM的进销存管理系统
学术海报模板
该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip,个人大四毕业设计项目、经导师指导并认可通过的高分设计项目,评审分99分,代码完整确保可以运行,小白也可以亲自搞定,主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者,也可作为课程设计、期末大作业。 毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Python+vue的共享单车时空数据分析与管理系统源码.zip毕业设计基于Pytho
matlab代码资源。基于支持向量机的语音情感识别MATLAB代码。基于支持向量机(SVM)的语音情感识别是一种监督学习技术,它通过在特征空间中寻找最优分割超平面来区分不同情感类别。SVM算法通过最大化分类边界的间隔,提高模型的泛化能力,有效处理高维语音特征数据。这种方法能够识别语音中的情感特征,如快乐、悲伤或愤怒,广泛应用于呼叫中心情感分析和人机交互系统。
单相PET电力电子变压器 输入级单相pwm整流器双闭环控制 输出400V 中间级移相全桥 输出500V 输出级单相逆变器 220交流电 开关频率10k
包含项目论文和毕业答辩PPT,详情请看博客:https://blog.csdn.net/2401_87429224/article/details/144995193 论文主要包括以下内容: 1、中英文摘要; 2、目录; 3、绪论,包括背景、意义、开发工具、国内外现状等; 4、系统分析,包括可行性分析、设计原则、需求分析、业务流程分析等; 5、系统设计,包括功能设计、数据库设计等; 6、系统实现,包括各模块实现; 7、软件测试,包括测试环境、测试条件、运行情况等。
在Android平台上开发一款天气预报应用是一项常见的任务,它涉及到多个技术层面,包括用户界面设计、数据获取、数据解析以及实时更新等。以下是对这个"较简单的天气预报APP"可能涉及的关键知识点的详细解释: 1. **Android Studio**:作为Android应用开发的主要集成开发环境(IDE),Android Studio提供了丰富的工具来帮助开发者编写、调试和发布应用。它内置了Gradle构建系统,使得项目管理和依赖管理更加方便。 2. **布局设计**:UI设计是天气应用的重要部分,通常会使用XML布局文件来定义各个屏幕的组件和布局。例如,可能包含一个用于显示城市名的TextView,一个用于展示当前温度的ImageView,以及用于显示未来几天预报的RecyclerView。 3. **数据获取**:天气信息通常来自于网络API,如OpenWeatherMap或AccuWeather等。开发者需要编写HTTP请求代码,使用像OkHttp或者Retrofit这样的网络库来获。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。
云计算的文件,上次漏的
该项目包含完整的前后端代码、数据库脚本和相关工具,简单部署即可运行。功能完善、界面美观、操作简单,具有很高的实际应用价值,非常适合作为Java毕业设计或Java课程设计使用。 所有项目均经过严格调试,确保可运行!下载后即可快速部署和使用。 1 适用场景: 毕业设计 期末大作业 课程设计 2 项目特点: 代码完整:详细代码注释,适合新手学习和使用 功能强大:涵盖常见的核心功能,满足大部分课程设计需求 部署简单:有基础的人,只需按照教程操作,轻松完成本地或服务器部署 高质量代码:经过严格测试,确保无错误,稳定运行 3 技术栈和工具 前端:HTML + Vue.js 后端框架:Spring Boot 开发环境:IntelliJ IDEA 数据库:MySQL(建议使用 5.7 版本,更稳定) 数据库可视化工具:Navicat 部署环境:Tomcat(推荐 7.x 或 8.x 版本),Maven
永磁同步电机+SMO滑膜观测算法+simulink仿真
hi3518e-v200 demo
使用WebUI插件,UE与网页发参收参写法; 使用像素流插件,UE与网页发参收参写法。
2种方法SCL编写和CFC编写5个电机逆启顺停的顺控程序 方法一:使用西门子的电机功能块和联锁块编写5个电机逆启顺停的顺控程序 方法二、使用SCL编写逆启顺停的功能块,然后在CFC调用,采用SFC方式连线,构成逆启顺停功能程序