CSS steps() 함수를 영리하게 사용하여 무작위 카드 뒤집기 효과를 얻으세요!

Flop은 복권 활동에 흔히 나타나는 매우 친숙한 상호작용 효과입니다. 그렇다면 JavaScript를 사용하지 않고 무작위 카드 실패 효과를 얻을 수 있습니까? 카드 플롭 효과에는 전혀 문제가 없습니다. CSS에는 임의 기능이 없습니다. 오늘은 대안적인 대화형 구현 아이디어를 공유하겠습니다.

CSS에는 내장된 "random" 함수가 없으며 Javascript와 같은 Math.random() 함수도 없습니다. 모든 숫자나 임의의 색상에서 임의성을 생성할 수 있는 방법은 없습니다. CSS 没有内置的“随机”函数，没有像 Javascript 中的 Math.random() 函数，也根本无法生成随机数或随机颜色。

基于上面的问题，需要转换思路，让元素通过复杂的动画实现出随机的效果。实现的原理让纸牌快速地呈现出不同的状态，让这些纸牌在1秒内循环通过所有52个状态，用户点击每张纸牌就暂停动画，并让纸牌翻转。

在线预览：https://codepen.io/quintiontang/pen/OJmJRrV

此方案不足的地方就是无法避免三张牌出现相同的花色和牌面

概括

使用动画使元素看起来随机行为的这个思路是不很有趣，有点出乎意料，大部分用户看到这个效果肯定意识不到时纯 CSS 实现的。

现在 CSS 远不止我们现在看到的，它能够带来什么取决于创造性，我一直坚信没有实现不了的交互，只有想不到的交互。

要点

效果主要用到 CSS 中的动画属性 animation，自定义一个动画过程 randomAnim ，点击通过经典的 input checkbox + label 组合，动画控制器 animation-play-state: paused 和 animation-play-state: running;，下面是关键的steps()。

steps()是一个阶跃函数（timing-function），允许将动画或者过渡效果分割成段，而不是从一种状态持续到另一种状态的过渡。这个函数有两个参数：

• 第一个参数是一个正值，指定我希望动画分割的段数。
• 第二个参数是可选的，可设值：start 和 end，表示在每个间隔的起点或是终点发生阶跃变化，默认是 end。例如 steps(1,start)，动画分成1步，动画执行时为左侧端点的部分为开始；steps(1,end)，动画分成1步，动画执行时为右侧结尾端点的部分为开始。

阶跃函数（timing-function

위의 문제를 바탕으로 아이디어를 바꿔 복잡한 애니메이션을 통해 요소가 무작위 효과를 얻을 수 있도록 하는 것이 필요합니다. 구현 원리를 통해 카드는 다양한 상태를 빠르게 표시할 수 있으므로 사용자는 각 카드를 클릭하여 애니메이션을 일시 중지하고 카드를 뒤집을 수 있습니다.

온라인 미리보기: https://codepen.io/quintiontang/pen/OJmJRrV🎜🎜🎜이 솔루션의 단점은 동일한 모양과 얼굴을 가진 세 장의 카드가 나타나는 것을 피할 수 없다는 것입니다🎜🎜

요약

🎜요소가 무작위로 동작하는 것처럼 보이도록 애니메이션을 사용한다는 아이디어는 그다지 흥미롭지도 않고 약간 예상치 못한 것입니다. 대부분의 사용자는 볼 때 이 효과를 확실히 깨닫지 못할 것입니다. CSS로 구현됩니다. 🎜🎜이제 CSS는 우리가 지금 보는 것보다 훨씬 더 많은 것을 가져올 수 있습니다. 저는 달성할 수 없는 상호 작용은 없고 예상치 못한 상호 작용만 있을 뿐이라고 항상 믿어 왔습니다. 🎜

포인트

🎜효과는 주로 CSS의 애니메이션 속성 animation을 사용하여 애니메이션 프로세스를 사용자 정의합니다randomAnim, 클래식 입력 확인란 + 레이블 조합, 애니메이션 컨트롤러 animation-play-state: Paused 및 animation-play-state:를 클릭하세요. running;에서 다음은 steps() 키입니다. 🎜🎜steps()는 한 상태에서 다른 상태 전환으로 계속되는 대신 애니메이션 또는 전환 효과를 여러 세그먼트로 나눌 수 있게 해주는 단계 함수(timing-function)입니다. 이 함수에는 두 개의 매개변수가 있습니다: 🎜

• 첫 번째 매개변수는 애니메이션을 분할하려는 세그먼트 수를 지정하는 양수 값입니다.
• 두 번째 매개변수는 선택사항이며 start 및 end로 설정할 수 있습니다. 이는 해당 단계가 각 간격의 시작 또는 끝에서 발생함을 나타냅니다. 점프 변경, 기본값은 end입니다. 예를 들어 steps(1,start)의 경우 애니메이션이 1단계로 나누어지며, 애니메이션이 실행되면 왼쪽 끝부분이 시작 부분이 됩니다. 에서 애니메이션은 1단계로 나누어지며, 애니메이션이 실행되면 오른쪽 끝점에 있는 부분이 시작이 됩니다.

🎜🎜🎜🎜단계 함수(timing-function)는 전체 애니메이션이 아닌 두 개의 키 프레임 사이마다 사용됩니다. 🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 소개🎜를 방문하세요! ! 🎜

위 내용은 CSS steps() 함수를 영리하게 사용하여 무작위 카드 뒤집기 효과를 얻으세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!