用CSS如何实现菱形拼图的效果?
发布时间:2023-08-02 14:56:24 所属栏目:语言 来源:
导读:本文给大家分享怎样用CSS实现拼图的内容,本文实现的拼图效果是菱形拼图,需要实现的需求有div旋转拼图,但是图片不旋转,具体的实现效果及代码如下,感兴趣的朋友可以了解看看。
需求背景
使用 vue 做的项目
需求背景
使用 vue 做的项目
本文给大家分享怎样用CSS实现拼图的内容,本文实现的拼图效果是菱形拼图,需要实现的需求有div旋转拼图,但是图片不旋转,具体的实现效果及代码如下,感兴趣的朋友可以了解看看。 需求背景 使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成。先来看一下最终的效果图。 应用到的知识点: background-size background-position transform:rotate 实现思路: 外层大盒子用来放暗色背景图,里面的5块拼图,是5个div,每块拼图都使用背景定位的方式展示背景图的固定区域,中间的拼图做了旋转。但是旋转后,又遇到了个问题:背景图片也跟着旋转了,像下面这样: 解决背景旋转的思路:可以在第5块拼图的外层套一个盒子,将外层盒子向右旋转45度,再将背景的元素向左旋转45度。操作完又发现了新的问题,下面图中的黑色边框是外层盒子(为了方便看,把其他的拼图块都设置为不可见)。如果给外层盒子设置 overflow:hidden ,那么中间拼图的上下左右四个角都会缺失。 我们需要把第五块拼图的宽高设置大一些,再设置它外层的盒子 overflow:hidden。宽高设置大的话,对应的 background-size 也要改变。 最后,就可以实现刚开始的效果了,完整的 vue 代码如下: <template> <section class="box"> <div class="bg" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item1Show" class="item item1" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item2Show" class="item item2" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item3Show" class="item item3" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item4Show" class="item item4" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> <div v-if="item5Show" class="item item5wrap"> <div class="item5" :style="{ backgroundImage: `url(${bgImg}) ` }"></div> </div> </section> </template> <script> import bgImg from "@/assets/bg.jpeg"; export default { data() { return { bgImg, item1Show: false, item2Show: true, item3Show: true, item4Show: true, item5Show: true }; } }; </script> <style lang="less"> @borderColor: #333; .box { margin: 0px auto; width: 300px; height: 200px; background-color: #000; position: relative; .bg { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-position: center center; background-repeat: no-repeat; background-size: 100% 100%; opacity: 0.5; } .item { width: 50%; height: 50%; box-sizing: border-box; background-size: 200% 200%; border-right: 1px solid @borderColor; border-bottom: 1px solid @borderColor; position: absolute; } .item1 { background-position: 0 0; left: 0; top: 0; } .item2 { background-position: 100% 0; left: 50%; top: 0; } .item3 { background-position: 0 100%; left: 0; top: 50%; } .item4 { background-position: 100% 100%; left: 50%; top: 50%; } .item5wrap { width: 100px; height: 100px; border-left: 1px solid @borderColor; border-top: 1px solid @borderColor; transform: rotate(45deg); left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); overflow: hidden; .item5 { width: 150px; height: 150px; background-position: 50% 50%; background-size: 200% 133%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } } } </style> (编辑:聊城站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐