css关键帧动画_带有关键帧动画CSS计时器

最新推荐文章于 2024-08-04 20:38:28 发布

cungui5726

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量216

点赞数

文章标签：列表 css html java css3

原文链接：https://thenewcode.com/505/CSS-Timer-With-Keyframe-Animation

版权

css关键帧动画

This article started in typical fashion for me: that is, as another topic entirely. I plan to write an article on animated CSS3 media query transitions, but I was sidetracked by the question of how to display a changing browser width using CSS alone. Thus, this CSS3 odometer; for the purpose of this article, I’ve turned it into a timer.

对我而言，本文以典型的方式开始：即完全是另一个主题。我打算写一篇有关CSS3动画查询过渡动画的文章，但我的问题是如何仅使用CSS来显示不断变化的浏览器宽度。因此，此CSS3里程表；出于本文的目的，我将其变成了计时器。

Ultimately the technique shown here could be put to a lot of uses. First, an explanation of the basic markup:

最终，此处显示的技术可以被大量使用。首先，对基本标记进行说明：

The display needs three “wheels” of numbers for each segment of the timer, so a series of HTML lists makes eminent sense. As you will see, all of the lists will move to the beat of the same CSS animation routine. They’re also all wrapped in a <div> with an id of timer. You have been on this page for

显示屏的每个计时器段需要三个“转轮”数字，因此一系列HTML列表非常有意义。如您所见，所有列表都将移至同一CSS动画例程的节拍中。它们也都包裹在一个id为timer的<div>中。您一直在此页面上

<div id="timer">
	<ul id="timer-tens">
		<li>8
		<li>9
		<li>0
		<li>1
		<li>2
		<li>3
		<li>4
		<li>5
		<li>6
		<li>7
		<li>8
		<li>9
	</ul>
	<ul id="timer-ones">
		<li>9
		<li>0
		<li>1
		<li>2
		<li>3
		<li>4
		<li>5
		<li>6
		<li>7
		<li>8
		<li>9
		<li>0
	</ul>
</div> seconds

Note that the numerals above and below the digit shown in the center of the wheel at any moment are included.

请注意，任何时候都包括在车轮中心所示数字的上方和下方的数字。

(I would have dearly loved to use a proper ordered list to display the numbers, but the fact that most browsers do not yet support the HTML5 start attribute for ordered lists, and my desire to show a glimpse of the broader counter, made that impractical. I’ve not shown the code for the hundreds-of-seconds counter to save space).

(我非常喜欢使用适当的有序列表来显示数字，但是事实是，大多数浏览器尚不支持有序列表的HTML5 start属性，而且我希望能看到更广泛的计数器，这使这不切实际。为了节省空间，我没有显示数百秒计数器的代码)。

Then the CSS. Obviously, I need to restrict the visible area of each list. That will be the job of the containing div:

然后是CSS。显然，我需要限制每个列表的可见区域。那将是包含div的工作：

div#timer {
	display: inline-block;
	height: 3.6rem;
	overflow: hidden;
}

I’ve used inline-block so the <div> will still fall in line with the surrounding text, but still be provided with a height. Let’s look at the CSS for the counters:

我使用了inline-block因此<div>仍将与周围的文本保持一致，但仍具有height 。让我们看一下计数器CSS：

div#timer ul {
	display: inline-block;
	list-style-type: none;
	width: 2rem;
	padding-left: 0;
	margin-top: 0;
	position: relative;
	top: -1.3rem;
	line-height: 32px;
}

This is pretty simple. The line-height specified here will interact with the general rules for the <body>:

这很简单。此处指定的line-height将与<body>的一般规则交互：

body {
	background: #000;
	color: #fff;
	text-align: center;
	font-size: 32px;
}

The two values guarantee that every digit in both lists is separated by the same amount of vertical space. It’s this until that we use to move the counters in the animation:

这两个值确保两个列表中的每个数字都由相同数量的垂直空间分隔开。直到我们用来在动画中移动计数器之前，都是这样：

@keyframes rollover {
	0% { top: -51px; }
	10% { top: -83px; }
	20% { top: -115px; }
	30% { top: -147px; }
	40% { top: -179px; }
	50% { top: -211px; } 
	60% { top: -243px; }
	70% { top: -275px; }
	80% { top: -307px; }
	90% { top: -339px; }
    100% { top: -371px; }
}

The spacing of the numerals means that each animation sequence will start and end on the same digit, and that every numeral will always be displayed in the center of its wheel.

数字的间距意味着每个动画序列都将在同一数字上开始和结束，并且每个数字将始终显示在其转轮的中心。

Now the really neat part: the animation of the tumblers. I wanted the movement between each numeral to be a very deliberate “tick”, so I created a custom easing curve and applied it to every step of the animation:

现在真正整洁的部分是：随行杯的动画。我希望每个数字之间的移动是一个非常刻意的“刻度”，因此我创建了一个自定义缓动曲线并将其应用于动画的每个步骤：

ul#timer-ones {
	animation: rollover 10s cubic-bezier(1.000, 0.005, 0.995, 0.090) infinite;
	}

The cool part is the fact that we apply the exact same animation sequence to the tens-of-seconds counter, as it moves in exactly the same way, just over a greater amount of time:

最酷的部分是，我们将完全相同的动画序列应用于数十秒计数器，因为它以完全相同的方式移动，只是时间更长：

ul#timer-tens {
	animation: rollover 100s cubic-bezier(1.000, 0.005, 0.995, 0.090) infinite;
	}

That’s essentially it, with the addition of a gradient for the <div> and alpha-masked, absolutely positioned PNG images inside to “shadow” the tumblers.

基本上就是这样，为<div>和内部带有alpha遮罩的，绝对定位的PNG图像添加了渐变，以“盖住”翻转开关。

(For this article I haven’t turned on the animation for the hundreds-of-seconds counter, as I don’t expect anyone to stick around on the page for that long… that said, it will be very interesting to look at my Google Analytics numbers later this week to see if the time-on-page metric has gone up due to visitors being obsessed, Hook-like, with a ticking clock).

(对于这篇文章，我并没有打开数百秒计数器的动画，因为我不希望有人在页面上停留那么长时间……也就是说，看看我的动画会非常有趣Google Analytics(分析)在本周晚些时候进行计数，以查看网页停留时间指标是否由于访问者痴迷(类似于Hook)和滴答作响的时钟而增加了)。

翻译自: https://thenewcode.com/505/CSS-Timer-With-Keyframe-Animation

css关键帧动画

cungui5726

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css关键帧动画_带有关键帧动画CSS计时器

css关键帧动画This article started in typical fashion for me: that is, as another topic entirely. I plan to write an article on animated CSS3 media query transitions, but I was sidetracked by the question o...
复制链接

扫一扫