当前位置： 首页 > 科技观察

精彩的！纯CSS实现拼图_0

时间：2023-03-19 22:23:10 科技观察

本文将向大家介绍一种将多种CSS技巧发挥到极致，纯CSS实现拼图的技巧。此技巧源自TemaniAfif[1]的CodePenCSSOnlyPuzzlegame[2]。一个完全用CSS实现的拼图游戏。我们要做的就是把零散的图片碎片还原成一张完整的图片，像这样：注意这里完全是用CSS实现的。下面来拆解核心难点：如何让一个元素可以拖拉？如何通过从固定位置拖动使元素停留在另一个位置？最难的是，在(2)的基础上，拖动元素释放后，只有在特定位置释放元素才会固定到新的位置，否则会回到原来的位置OhNo，上面的（2），（3）看起来不是纯CSS就能解决的问题。那么，如何巧妙的搭配组合，最终才能用CSS实现这样的效果呢？让我们逐步分解这个过程。使用draggable属性实现元素的拖动基于上面第一点，如何让一个元素成为可拖动的是最简单的解决方案。在HTML5中，标签被添加了一个draggable属性。设置为true后，即可实现元素的拖动效果。简单的说：

draggablefalse
draggabletrue
我们这样实现两个div，其中第二个设置为draggable="true"：setdraggable=For“true”元素，长按鼠标拖动元素：这样就解决了拖动的问题。CodePen演示--HTML可拖动演示[3]。要实现元素从A位置到B位置的移动OK，接下来的难点在于如何将元素从A位置移动到B位置。这里的核心是巧妙地应用过渡元素。我们看这样一个例子，如果有一个元素被translate(120px,120px)偏移了，当我们悬停这个元素时，让它回到原来的位置：div{transform:translate(120px,120px);}div:hover{transform:translate(0,0);}效果如下：这里比较有意思的是：当我们悬停元素时，由于元素的返回，元素又回到了原来的位置，失去了hover状态又回到原来的状态，然后hover状态又被触发了，如此反复，所以你会看到剧烈的跳跃。有没有办法重置它并停止跳回？是的，我们可以通过设置非常大的transition-duraiotn和非常大的transition-delay，让整个过渡效果变得非常慢，慢到我们察觉不到：div{transform:translate(120px,120px);转换：999999s999999s;}div:hover{transform:translate(0,0);transition:0s;}这样元素重置后，就再也不会跳回了（理论上）：如果，我们把上面的transition:999999s999999s表示应该设置transitionduration和transitiondelaytime**更短。比如两者都设置为2s，transition:2s2s，效果如下：这样，你应该能大致明白发生了什么。通过:active伪类实现触发器当然，以上知识还不够。首先，元素的移动不是悬停触发的，而是需要拖动到特定位置，释放鼠标的拖动效果，才能实现元素的移动。此外，元素只有在特定位置被释放时才能移动。这怎么可能？这里，我们还需要通过事件冒泡。我们简单修改一下代码，给元素添加一个父元素，然后添加一个标签元素：FLAG
.g-flag:hover~.g-box{transform:translate(0,0);过渡：0s；}.g-box{宽度：120px；高度：120px；背景：#000；转换：翻译（120px，120px）；transition:9999s9999s;}其中.g-flag是我们实现的一个触发器，我们不再通过hover元素本身来实现元素的移动，而是利用hover这个特殊的触发器来实现元素的移动。这个应该很好理解：好！最关键的一步来了！我们需要使用事件冒泡让我们的触发器在我们开始拖动.g-box元素本身时出现，并设置一个很短的停留时间，这样在鼠标放下的那一刻，就会触发元素的重置。这意味着什么？看效果图：核心代码如下：FLAG.g-wrap{位置：相对；宽度：120px；高度：120px；}.g-box{宽度：120px；高度：120px；背景：#000；转换：翻译（120px，120px）；转换：9999s9999s；}.g-flag{位置：绝对；宽度：0；高度：0；顶部：-100px；左：-100px；transition:00.5s;}.g-wrap:active.g-flag{border:1pxdashed#000;宽度：100px；height:100px;}.g-flag:hover~.g-box{transform:translate(0,0);transition:0s;}这适用于非常核心的一点，就是在拖动.g-box元素的过程中，触发了它的:active事件，同时这个事件会向上冒泡到它的父元素上。g-包装。利用事件冒泡，我们可以让元素在拖动过程中显示触发器，并在鼠标松开后立即触发触发器的悬停事件，从而使元素从位置A移动到位置B，真是妙不可言！最后我们只需要让trigger的位置和我们想要元素去的位置一致就可以实现拼图的原理：将一个完整的单个元素从A点拖到移动到B点的DEMO中，就可以了戳这里：CodePenDemo--HTMLdraggableDemo[4]。掌握了上述原理实现拼图游戏后，上述的拼图游戏就迎刃而解了。有兴趣的可以看看它的源码：CSSOnlyPuzzlegame[5]。剩下的大部分工作是将完整的图片切割成不同的部分，并将它们随机放置在不同的位置。在这里，同样的原理，我给出一个类似的DEMO，一个简单的拼字游戏，并给出完整的代码：请把文字放在正确的位置：OrangePiwuDragon

橙色皮肤吴龙.g-container{显示：flex;宽度：400px；高度：100px；}.g-wrap{位置：相对；保证金：自动；宽度：100px；高度：100px；边框：1px虚线#000；盒子尺寸：边框-box;}.??g-flag{位置：绝对；顶部：0；左：0；宽度：0；高度：0；背景：rgba(0,0,0,.15);}.g-box{宽度：100%;高度：100%；背景色：#000；光标：抓住；颜色：#fff；文本对齐：居中；行高：100px；font-size:48px;}.g-wrap:active.g-flag{width:100%;height:100%;}@for$i从1到5{.g-wrap:nth-child(#{$i}).g-box{transform:rotate(#{random(180)}deg)translate(#{random(400)-150}px,#{random(100)+60}px);}}.g-box{transition:99999s999999s;}.g-flag:hover+.g-box{transform:translate(0,0);transition:0s;}为了方便理解，每拖动一个元素，要放置的位置都会高亮显示，当然提示效果完全可以去掉：完整的DEMO，也可以点这里CodePenDemo--PureCSSSpellinggame[6]在上面的代码中，我们使用SASS快速实现了文本在不同块中的随机放置，增加了一定的随机性。同时SASS的使用减少了一些重复代码的工作量。最后，这并不难，不是吗？好了，本文到此结束，希望本文对你有所帮助：）参考文献[1]TemaniAfif：https://codepen.io/t_afif。[2]CSSOnlyPuzzlegame:https://codepen.io/t_afif/pen/JjLWpOJ。[3]CodePenDemo--HTMLdraggableDemo:https://codepen.io/Chokcoco/pen/dymmydy。[4]CodePenDemo--HTMLdraggableDemo:https://codepen.io/Chokcoco/pen/MWVVWqq。[5]CSSOnlyPuzzlegame:https://codepen.io/t_afif/pen/JjLWpOJ。[6]CodePenDemo--纯CSS拼写游戏：https://codepen.io/Chokcoco/pen/NWYyQLo。

精彩的！纯CSS实现拼图_0相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。