人是为了活着本身而活着，而不是为了活着之外的任何事物而活着。
——《活着》
目录
一、前言
在我们的 html 学习过程中，会用到并见识到各种各样的实例，以及各种插件，并且有些 web 网页中的小插件又非常的吸引眼球，提升 web 网页的层次，显得非常好看并且非常使用。在本系列中，我将持续为大家更新有趣且使用的 html 实例，放在 web 网页中，凸显效果。
特点一：都是符合学校或者学生考试期末作业的水平，都是最基础的简单的 html 样例，提升web网页整理效果，都是 div+css 框架原创代码写的，内容包括 js / css，也包含 视频+音乐+flash 等元素的插入…
特点二：内容包括多种丰富类型，例如： 倒计时，404页面，Blog顶置卡片设计 (css+js)，To-Do-List设计 (css+js)，火柴盒动画 (css)，日历便签设计 (css+js)，搜索框设计 (css+js)，卡片式图片展示 (css+js)，咖啡选择 (css+js)……
可满足多种需求，欢迎大家下载！
二、往期作品回顾
有趣的HTML实例（一） 倒计时_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（二） 404页面_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（三） 加载页面动画_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（四） 旋转菜单_Enovo_飞鱼的博客-CSDN博客
有趣的HTML实例（五） 加载页面动画Ⅱ（css）_Enovo_飞鱼的博客-CSDN博客
三、作品介绍
1.作品简介 ：HTML响应式布局网站源码！兼容 pc 以及移动端，内涵 js 交互，ui 交互。直接点击即可查看效果！
2.作品编辑：个人主页网页设计题材，代码为 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：DW、HBuilder、Vscode 、Sublime 所有编辑器均可使用）。
3.作品技术：使用DIV+CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。
四、本期代码介绍
一款简单的 HTML+ CSS+JS 原生 卡片翻转时钟（css+js） 实例
1、HTML
2、CSS
3、JS
4、舒适的画面感，代码效果
5、翻页时钟
可通用多种不同情景，进行网页跳转，或时间加载，可塑性很高
五、效果显示
可使用在点击实践时，也可展示在web网页页面——>
六、编码实现
显示完整代码
注意路径(⊙o⊙)？
o(*￣▽￣*)ブ
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Enovo卡片翻转时钟</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="clock">
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
<em class="divider">:</em>
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
<em class="divider">:</em>
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
<div class="flip">
<div class="digital front" data-number="0"></div>
<div class="digital back" data-number="1"></div>
</div>
</div>
<!-- partial -->
<script src = "./script.js"></script>
</body>
</html>style.css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.clock {
display: flex;
}
/* 时钟的分隔 */
.clock .divider {
font-size: 66px;
line-height: 102px;
font-style: normal;
color: rgb(51, 50, 50);
}
/* 时钟的卡片 */
.clock .flip {
position: relative;
width: 60px;
height: 100px;
margin: 2px;
font-size: 70px;
font-weight: 700;
line-height: 100px;
text-align: center;
background: rgb(46, 45, 45);
border: 1px solid rgb(34, 33, 33);
border-radius: 10px;
box-shadow: 0 0 6px rgba(54, 54, 54, 0.5);
}
/* 时钟上的数字 */
.clock .flip .digital::before, .clock .flip .digital::after {
position: absolute;
content: attr(data-number);
left: 0;
right: 0;
color: white;
background: rgb(51, 50, 50);
overflow: hidden;
-webkit-perspective: 160px;
perspective: 160px;
}
/* 翻页前的数字 */
.clock .flip .digital::before {
top: 0;
bottom: 50%;
border-bottom: 1px solid #666;
border-radius: 10px 10px 0 0;
}
/* 翻页后的数字 */
.clock .flip .digital::after {
top: 50%;
bottom: 0;
line-height: 0;
border-radius: 0 0 10px 10px;
}
.clock .flip .back::before,
.clock .flip .front::after {
z-index: 1;
}
.clock .flip .back::after {
z-index: 2;
}
.clock .flip .front::before {
z-index: 3;
}
.clock .flip .back::after {
-webkit-transform-origin: center top;
transform-origin: center top;
-webkit-transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
.clock .flip.running .front::before {
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-animation: frontFlipDown 0.6s ease-in-out;
animation: frontFlipDown 0.6s ease-in-out;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.clock .flip.running .back::after {
-webkit-animation: backFlipDown 0.6s ease-in-out;
animation: backFlipDown 0.6s ease-in-out;
}
@-webkit-keyframes frontFlipDown {
to {
-webkit-transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
}
@keyframes frontFlipDown {
to {
-webkit-transform: rotateX(0.5turn);
transform: rotateX(0.5turn);
}
}
@-webkit-keyframes backFlipDown {
to {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
@keyframes backFlipDown {
to {
-webkit-transform: rotateX(0);
transform: rotateX(0);
}
}
script.js
var Flipper = /** @class */ (function() {
function Flipper(node, currentTime, nextTime) {
this.isFlipping = false;
this.duration = 600;
this.flipNode = node;
this.frontNode = node.querySelector(".front");
this.backNode = node.querySelector(".back");
this.setFrontTime(currentTime);
this.setBackTime(nextTime);
}
Flipper.prototype.setFrontTime = function(time) {
this.frontNode.dataset.number = time;
};
Flipper.prototype.setBackTime = function(time) {
this.backNode.dataset.number = time;
};
Flipper.prototype.flipDown = function(currentTime, nextTime) {
var _this =this;
if(this.isFlipping) {
return false;
}
this.isFlipping = true;
this.setFrontTime(currentTime);
this.setBackTime(nextTime);
this.flipNode.classList.add("running");
setTimeout(function() {
_this.flipNode.classList.remove("running");
_this.isFlipping = false;
_this.setFrontTime(nextTime);
}, this.duration);
};
return Flipper;
}());
var getTimeFromDate = function(date) {
return date
.toTimeString()
.slice(0, 8)
.split(":")
.join("");
};
var flips = document.querySelectorAll(".flip");
var now = new Date();
var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000));
var nextTimeStr = getTimeFromDate(now);
var flippers = Array.from(flips).map(function(flip, i) {return new Flipper(flip, nowTimeStr[i], nextTimeStr[i]);});
setInterval(function() {
var now =new Date();
var nowTimeStr = getTimeFromDate(new Date(now.getTime() - 1000));
var nextTimeStr = getTimeFromDate(now);
for(var i=0; i < flippers.length; i++) {
if(nowTimeStr[i] === nextTimeStr[i]) {
continue;
}
flippers[i].flipDown(nowTimeStr[i], nextTimeStr[i]);
}
},1000);七、获取源码
老规矩，先给朋友们看一下完整文件夹，
正确的文件如下图 ，复制源码的朋友们请注意了！！！
公众号获取源码
第一步，通过微信公众号下载源码压缩包，解压并打开文件夹，即为上图样式（复制源码请注意路径及文件名）
第二步，点击 html 文件 打开即可查看
2023年第十四期，希望得到大家的喜欢🙇
也是新的系列，将会持续更新，🙇
希望大家有好的意见或者建议，欢迎私信
以上就是本篇文章的全部内容了
~ 关注我，点赞博文~ 每天带你涨知识!
1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。
2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、HTML模板 、C++、数据结构、Python程序设计、Java程序设计、爬虫等！ 「在这里有好多 开发者，一起探讨 前端 开发 知识，互相学习」！
3.以上内容技术相关问题可以相互学习，可 关 注 ↓公 Z 号 获取更多源码 !
获取源码？私信？关注？点赞？收藏？
👍+✏️+⭐️+🙇
有需要源码的小伙伴可以 关注下方微信公众号 " Enovo开发工厂 "，回复 关键词 " a-shizhong1 "
704
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
