情人节快到了
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>
.
相关推荐
这个“基于HTML+JS+CSS的浪漫表白神器”就是一个很好的例子,它将技术与浪漫相结合,为程序员提供了一种独特的情人节礼物。让我们深入了解一下这个项目所涉及的知识点。 首先,HTML(HyperText Markup Language)是...
"html+css+JavaScript实现表白代码"是一个有趣的项目,它结合了这些技术,以创建一个具有浪漫氛围的表白页面。这个项目通常包括一个精心设计的布局,动态效果,以及可能的背景音乐,以增强情感表达。 首先,HTML...
这段浪漫代码是通过HTML、CSS和JavaScript编写的,通过结合这三种前端技术,我们创建了一个令人心动的情人节表白页面。包含了逐行打印文字、变色效果和玫瑰花的飘落等特效。它能够营造出浪漫的氛围,并用创意的方式...
在这个浪漫表白网页中,CSS可能被用来设定背景颜色、字体样式、元素位置,以及爱情树的动画效果。CSS3的新特性,如过渡(transition)、动画(animation)、以及阴影(box-shadow)等,都可以增强视觉效果。比如,...
在这个"HTML+CSS+JS实现时钟表白效果源码+素材"的项目中,我们将探讨如何利用这些技术来创建一个创新且浪漫的表白方式。 首先,HTML(HyperText Markup Language)是网页的基础,它定义了网页的结构。在这个表白...
在这个"html+css+js表白翻页相册"项目中,我们将深入探讨这三个技术如何协同工作,创造出一个浪漫而互动的表白工具。 首先,HTML(HyperText Markup Language)是网页的基础,它定义了网页的结构和内容。在表白相册...
在这个浪漫表白页面中,CSS可能会被用来创建柔和的颜色搭配,以及可能的心形、爱心动画效果,甚至可能有随着鼠标移动而改变的视觉效果,以增强浪漫氛围。 JavaScript是一种客户端脚本语言,它可以增加网页的动态...
- **动态效果**: 除了CSS提供的动画之外,还可以通过JavaScript来实现更加复杂的动态效果。 - **多媒体控制**: 如播放/暂停背景音乐或视频等。 ### 知识点五:工具与环境 - **开发工具**: Dreamweaver、HBuilder、...
这个“阿狸表白网页2”项目,显然是利用这两项技术来制作的一个浪漫的表白页面,允许用户进行一定程度的自定义。 HTML5是超文本标记语言(HyperText Markup Language)的第五个版本,它引入了许多新的元素和功能,...
通过CSS,你可以调整告白网页的颜色搭配、字体风格、布局模式,甚至实现动态效果,比如背景颜色的渐变、文字动画等。例如,使用`background-color`设置背景色,`font-family`选择合适的字体,以及`transition`或`...
此外,CSS3还可以用于设置字体样式、颜色、布局和响应式设计,确保表白页面在不同设备上都能良好显示。 JavaScript 是这个项目中的动态元素,它使得网页具有交互性。在这个表白页面中,JavaScript 可能用于响应用户...
- **CSS**:美化网页外观,包括布局、颜色、字体等。 - **JavaScript**:增加网页交互功能,如响应用户输入、播放动态效果等。 ### 知识点二:HTML+CSS+JavaScript基础应用技巧 #### HTML基础: - **文档类型声明*...
通过CSS,你可以改变字体、颜色、背景、布局等视觉效果,使得表白页面呈现出浪漫的氛围。这套源码的CSS可能包含了精心设计的颜色搭配、动画效果以及响应式布局,确保在不同设备上都能展示得美观和谐。 JavaScript是...
同时,CSS3引入了动画和过渡效果,如`transition`和`animation`,可以实现平滑的动态效果。在这个告白网页中,可能会使用到这些效果来增加互动性和情感表达。例如,当鼠标悬停在特定元素上时,可能会有爱心飞出或...
表白页面的"酷炫"效果很大程度上依赖于CSS,通过设置颜色、字体、动画效果,以及布局方式,可以使页面呈现出浪漫的视觉效果,比如闪烁的爱心、动态背景等。 3. **JavaScript 动态交互**:JavaScript 是实现网页动态...
通过CSS,程序员可以实现丰富的颜色、字体、布局以及动画效果。在表白代码中,可能会用到CSS的动画效果,如淡入淡出、旋转、滑动等,来营造浪漫氛围。例如,使用`@keyframes`规则创建自定义动画,配合`transition`...
在表白页面中,CSS 可以用来设置字体、颜色、动画效果等,以营造浪漫氛围。例如,你可以通过CSS3的`transition`和`animation`属性实现动态的心形漂浮效果,或者使用`filter`和`blur`属性来为背景图片添加柔和的滤镜...
"表白树"是一种创意的网页应用,通常用于浪漫的告白场景。这个压缩包文件包含了一个完整的"表白树"项目,其中包括HTML、JavaScript和CSS这三个关键的前端技术。以下是关于这些技术及其在"表白树"中应用的详细知识点...
【HTML+CSS+JS实现的七夕聊天表白机器人详解】 在网页开发中,HTML、CSS和JavaScript是构建交互式Web应用的三大核心技术。本项目利用这三者的优势,创造了一个富有创意的七夕聊天表白机器人,旨在为情侣提供一个...
而JavaScript是一种强大的脚本语言,能够实现动态交互效果,提升用户体验。 在这个项目中,首先,你需要使用HTML来创建网页的基本框架。这包括设置页面标题、编写段落、插入图片、创建链接等。例如,你可以创建一个...