新增第151个小实例：倒计时动画特效
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
fb35f1e54e
commit
f220981dba
|
|
@ -157,4 +157,5 @@
|
|||
147. HTML5+CSS3小实例：关门式的图文组合悬停特效
|
||||
148. HTML5+CSS3+JS小实例：简约的垂直选项卡
|
||||
149. HTML5+CSS3+JS小实例：可切换方向的无缝衔接图片滚动效果
|
||||
150. HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图
|
||||
150. HTML5+CSS3+Vue小实例：仿制B站PC端首页的吃豆人轮播图
|
||||
151. HTML5+CSS3+JS小实例：倒计时动画特效
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: linear-gradient(to bottom,#fdfbfb,#ebedee);
|
||||
}
|
||||
.container{
|
||||
position: relative;
|
||||
}
|
||||
/* 倒计时数字区域 */
|
||||
/* 默认显示 */
|
||||
.counter{
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
/* 倒计时结束后隐藏 */
|
||||
.counter.hide{
|
||||
transform: scale(0);
|
||||
/* 执行动画 */
|
||||
animation: hide 0.2s ease-out;
|
||||
}
|
||||
/* 数字 */
|
||||
.nums{
|
||||
width: 250px;
|
||||
height: 80px;
|
||||
color: #5696ff;
|
||||
font-size: 80px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.nums span{
|
||||
/* 绝对定位 */
|
||||
position: absolute;
|
||||
/* 设置旋转基点 */
|
||||
transform-origin: bottom center;
|
||||
/* 默认旋转120度 */
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
/* 数字进入 */
|
||||
.nums span.in{
|
||||
/* 执行动画：动画名 时长 加速后减速 */
|
||||
animation: goIn 0.5s ease-in-out;
|
||||
}
|
||||
/* 数字离开 */
|
||||
.nums span.out{
|
||||
animation: goOut 0.5s ease-in-out;
|
||||
}
|
||||
/* 倒计时结束区域 */
|
||||
/* 默认隐藏 */
|
||||
.final{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: scale(0);
|
||||
}
|
||||
/* 倒计时结束后显示 */
|
||||
.final.show{
|
||||
transform: scale(1);
|
||||
animation: show 0.3s ease-in;
|
||||
}
|
||||
.replay{
|
||||
width: 100%;
|
||||
background-color: #5696ff;
|
||||
color: #fff;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
margin-top: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 定义动画 */
|
||||
/* 倒计时数字区域的隐藏动画 */
|
||||
@keyframes hide {
|
||||
0%{
|
||||
transform: scale(1);
|
||||
}
|
||||
100%{
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
/* 倒计时结束区域的显示动画 */
|
||||
@keyframes show {
|
||||
0%{
|
||||
transform: scale(0);
|
||||
}
|
||||
80%{
|
||||
transform: scale(1.4);
|
||||
}
|
||||
100%{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
/* 数字进入动画 */
|
||||
@keyframes goIn {
|
||||
0%{
|
||||
transform: rotate(120deg);
|
||||
}
|
||||
30%{
|
||||
transform: rotate(-20deg);
|
||||
}
|
||||
60%{
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
90%,100%{
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
/* 数字离开动画 */
|
||||
@keyframes goOut {
|
||||
0%,30%{
|
||||
transform: rotate(0);
|
||||
}
|
||||
60%{
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(-120deg);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>倒计时动画特效</title>
|
||||
<link rel="stylesheet" href="151.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="counter">
|
||||
<div class="nums">
|
||||
<span class="in">3</span>
|
||||
<span>2</span>
|
||||
<span>1</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
<h3>准备</h3>
|
||||
</div>
|
||||
<div class="final">
|
||||
<h1>活动开始</h1>
|
||||
<button class="replay">重来</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
<script src="151.js"></script>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
// 获取要操作的元素
|
||||
const nums=document.querySelectorAll('.nums span');
|
||||
const counter=document.querySelector('.counter');
|
||||
const final=document.querySelector('.final');
|
||||
const replay=document.querySelector('.replay');
|
||||
|
||||
// 重置，重新开始
|
||||
function reset(){
|
||||
counter.classList.remove('hide');
|
||||
final.classList.remove('show');
|
||||
nums.forEach(num=>{
|
||||
num.className='';
|
||||
});
|
||||
nums[0].classList.add('in');
|
||||
}
|
||||
|
||||
// 开始倒计时
|
||||
function run(){
|
||||
nums.forEach((num,index)=>{
|
||||
// 遍历数字，为每一个数字添加动画结束监听事件
|
||||
num.addEventListener('animationend',e=>{
|
||||
if(e.animationName==='goIn'&&index!==nums.length-1){
|
||||
// 判断当前动画名为goIn，并且当前数字不是最后一个数字
|
||||
num.classList.remove('in');
|
||||
num.classList.add('out');
|
||||
}else if(e.animationName==='goOut'&&num.nextElementSibling){
|
||||
// 判断当前动画名为goOut，并且存在下一个兄弟元素（即下一个数字）
|
||||
// 为下一个数字添加in样式
|
||||
num.nextElementSibling.classList.add('in');
|
||||
}else{
|
||||
// 到这里，说明倒计时结束
|
||||
counter.classList.add('hide');
|
||||
final.classList.add('show');
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 为'重来'按钮绑定点击事件
|
||||
replay.addEventListener('click',function(){
|
||||
reset();
|
||||
run();
|
||||
})
|
||||
|
||||
// 默认开启倒计时
|
||||
run();
|
||||
Loading…
Reference in New Issue