CSS3 倒计时 / 技能冷却

最新推荐文章于 2021-08-07 10:01:07 发布
最新推荐文章于 2021-08-07 10:01:07 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： # CSS3 动画 文章标签： countdown 技能冷却
转载请注明出处——https://blog.csdn.net/chy555chy
本文链接：https://blog.csdn.net/chy555chy/article/details/83792080
版权

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
:root {
	--count-down-ring-size: 10em;
	--count-down-ring-border: calc(var(--count-down-ring-size) / 2);
	--count-down-ring-bg-color: lightgray;
	--count-down-ring-fg-color: red;
}
.count-down-ring {
	width: var(--count-down-ring-size);
	height: var(--count-down-ring-size);
	position: relative;
}
.count-down-left, .count-down-right {
	width: 50%;
	height: 100%;
	position: absolute;
	overflow: hidden;
}
.count-down-left, .count-down-left-ring {
	left: 0;
}
.count-down-right, .count-down-right-ring {
	/* 即使边框为0，两个div间还是会露出缝，因此 */
	right: 1px;
}
.count-down-left-ring, .count-down-right-ring {
	width: 200%;
	height: 100%;
	position: absolute;
	border-width: var(--count-down-ring-border);
	border-style: solid;
	border-radius: 50%;
	border-left-color: var(--count-down-ring-bg-color);
	border-top-color: var(--count-down-ring-bg-color);
	border-right-color: var(--count-down-ring-fg-color);
	border-bottom-color: var(--count-down-ring-fg-color);
	/* 这里必须采用border-box，把border限制在内部区域，否则会超出边界 */
	box-sizing: border-box;
}
.count-down-left-ring {
	transform: rotate(135deg);
	animation: anim-count-down-left-ring 1s linear infinite;
	display: block;
}
.count-down-right-ring {
	transform: rotate(-45deg);
	animation: anim-count-down-right-ring 1s linear infinite;
	display: block;
}
@keyframes anim-count-down-left-ring {
	from,50% {
		transform: rotate(135deg);
	}
	/*50%, to {*/
	to {
		transform: rotate(-45deg);
	}
}
@keyframes anim-count-down-right-ring {
	/*from, 50% {*/
	from {
		transform: rotate(-45deg);
	}
	50%,to {
		transform: rotate(-225deg);
	}
}
.count-down-ring::after {
	content: attr(data-content);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: calc(var(--count-down-ring-size) / 2);
	font-weight: bold;
}
</style>
<script>
window.onload = ()=> {
	const COUNTDOWN_MAX = 10;
	let countdownValue = COUNTDOWN_MAX;
	const countdowns = document.querySelectorAll(".count-down-ring");
	const countdownId = setInterval(()=>{
		countdownValue--;
		if(countdownValue < 0) {
			countdownValue = COUNTDOWN_MAX; 
		}
		countdowns.forEach((countdown)=>{
			//data-*和class属性在javascript里面会有一层特殊处理，分别存储到dataset和classList对象中（注意单词拼写与大小写）
			countdown.setAttribute("data-content", countdownValue);
			//countdown.dataset.content = countdownValue;
		});
	}, 1000);
};
</script>
</head>
<body>
<div class="count-down-ring" data-content="10">
	<div class="count-down-left">
		<div class="count-down-left-ring"></div>
	</div>
	<div class="count-down-right">
		<div class="count-down-right-ring"></div>
	</div>
</div>
<pre>
	(1)当border-width较小的时候是圆环，当border-width较大的时候是整圆
	(2)交换动画50%的位置(与from并列 或 与to并列)可以让动画的起始位置上下颠倒
	
	当然，它还可以贴上背景图片，做游戏中的技能冷却按钮
</pre>
</body>
</html>
福州司马懿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 倒计时
03-21
纯 CSS3 实现 圆形时间进度条-倒计时 有需要的可以下载看看
css - - - - - 环形倒计时进度条实现
最新发布
Dark_programmer的博客
07-16 803
css - - - - - 环形倒计时进度条实现
【分享】巧用CSS边框 制作技能冷却效果
weixin_34281537的博客
03-11 110
　　上面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。 　　显然这种效果不复杂，一张背景图片，加上前面带有透明度的多边形图层，在脚本控制下就可以转起来了。但问题在于用什么方法来构建这个多边形？ 　　在IE下可以用VML，其他浏览器可以用Canvas等等。虽然行的通，但都不是最简单的。仔细分析下，该效果本质就是若干个三角形拼接而成。而三角形，如果你熟悉CSS...
NGUI技能冷却
yuanyuanluoluo的博客
08-04 462
倒计时部分可以看成技能图片在一点一点转出来，背景是遮挡的图片，乍一看以为遮挡图片慢慢转出来，其实不是 这个技能发放的按钮包括三部分，表示技能的图片，技能冷却的遮挡图片，表示冷却时间的标签，这两个图片的上下层次很重要，我经常弄混， 正确的顺序是，第一层是蓝绿色的遮挡，第二层是技能图片，第三层是标签， 在技能图片上挂上盒子碰撞器和button脚本， 因为运行时是点击这张图片， 标签的顺序好像有
CSS3-技能冷却样式
weixin_34250709的博客
03-17 520
最近学到了一个css的小动画，在这里分享给大家。 时下最火的网络游戏当属英雄联盟了，这次分享的就是游戏中技能CD倒计时的动画。 效果如下图所示 动画原理分析 看起来只有两种颜色，但HTML中可不止两个部分。下面是该动画的结构图。 看懂了这个结构图，大致的动画流程也就清晰了。 1.技能进入CD中，图标变为深色，此时两个蒙版浮在最上层。如下图所示。 2.倒计时开始，旋转体顺时针旋转，开始慢慢覆...
用CSS3实现倒计时
weixin_52630329的博客
01-25 399
实现效果： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .digit { display
巧用CSS边框 制作技能冷却效果
09-25
下面的效果看起来还不错吧。在网页里，除了用Flash，我们还是有不少方法可以实现它。
js结合css3倒计时三秒动画特效.zip
07-05
js结合css3倒计时三秒动画特效是一款带有动画效果的倒计时时间代码。 js结合css3倒计时三秒动画特效截图
CSS3电影播放倒计时读秒特效
07-24
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一款经典的电影播放倒计时读秒特效。这种特效常用于电影首映或重要的在线视频发布，为观众营造一种期待感和复古氛围。让我们一起深入了解CSS3和JavaScript在...
CSS3倒计时警报灯样式代码
06-24
在本文中，我们将深入探讨如何使用CSS3和JavaScript来创建一个独特的倒计时警报灯效果。这个特效能够为网站或应用添加引人注目的视觉提示，尤其适用于通知用户某个重要事件即将发生。 首先，CSS3是层叠样式表的第三...
css3 实现圆形旋转倒计时
12-14
在本文中，我们将深入探讨如何使用CSS3来创建一个圆形旋转倒计时效果，这种效果常见于各种在线答题或互动H5界面中。通过巧妙地利用边框、旋转和动画，我们可以实现一个视觉上引人注目的动态计时器。 首先，让我们...
js+css3倒计时动画特效
06-11
通过分析这些文件，我们可以学习如何结合JavaScript和CSS3来创建动态的倒计时效果，这对于网页开发者来说是一项重要的技能。在实际应用中，这种特效可以灵活调整以适应不同的需求，如倒计时时间、动画速度、样式设计...
CSS3倒计时警报灯样式特效代码
03-20
【CSS3倒计时警报灯样式特效代码】是一种利用现代网页技术——CSS3和JavaScript实现的创新性视觉效果。这种特效将倒计时与警报灯元素相结合，为网站增添了一种引人注目的动态展示方式，尤其适用于强调重要事件即将...
游戏中的技能冷却效果的制作
qq_44975431的博客
08-07 412
素材：两张图片，一上一下 代码控制上图的Fill Amount属性： /* * 第一步：获得SkillItem1的Image组件 * */ // Start is called before the first frame update float cool_downTime = 5; float timer=0; bool start_timer = false; Image image; Transform lengqu
制作技能冷却特效
DynastyTing的专栏
10-22 950
//制作技能冷却特效：利用两张图片，一张带有半透明蒙层，一张为原图。  原图做进度圈旋转效果 //原图做进度圈动作 //CCProgressTimer* progress = CCProgressTimer::create(CCSprite::create("chains.png")); //progress->setType(kCCProgressTimerTypeRadial);//设置
纯CSS实现倒计时动画
热门推荐
whqet
02-25 1万+
OK，CSS3演武场今天继续，我们重点来看看css3 animation实现逐帧动画，额，按照惯例，看效果点这里，下载戳这里。 实现原理 a.外盒子div.cell，一个字的宽和高，超过不显示，确保只能显示一个字。 b.内盒子div.num,一个字的宽，行高一个字高，我们通过这个盒子的移动实现动画。 c.内盒子的移动动画的animation-timing-function使用step。 d.倒计时结束，外盒子动画消失掉。
HTML5+CSS3气泡组件DOM/CSS/JS实现与分类详解
本文主要探讨了HTML5和CSS3结合实现的气泡组件，这种组件在网页和应用开发中常见，特别是在列表展示信息时。...对于学习者来说，这是一个提升CSS技能的好案例，同时也有助于理解组件化开发和组件间的继承关系。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值