WEB开发者-分享WEB开发知识,让开发变得更简单!

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

需求背景

使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成。先来看一下最终的效果图。

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能

应用到的知识点:

  • background-size
  • background-position
  • transform:rotate

实现思路:

外层大盒子用来放暗色背景图,里面的5块拼图,是5个div,每块拼图都使用背景定位的方式展示背景图的固定区域,中间的拼图做了旋转。但是旋转后,又遇到了个问题:背景图片也跟着旋转了,像下面这样:

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
 

解决背景旋转的思路:可以在第5块拼图的外层套一个盒子,将外层盒子向右旋转45度,再将背景的元素向左旋转45度。操作完又发现了新的问题,下面图中的黑色边框是外层盒子(为了方便看,把其他的拼图块都设置为不可见)。如果给外层盒子设置 overflow:hidden ,那么中间拼图的上下左右四个角都会缺失。

我们需要把第五块拼图的宽高设置大一些,再设置它外层的盒子 overflow:hidden。宽高设置大的话,对应的 background-size 也要改变。

CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
 

最后,就可以实现刚开始的效果了,完整的 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>

到此这篇关于CSS3 菱形拼图实现只旋转div 背景图片不旋转功能的文章就介绍到这了,更多相关CSS3旋转图片内容请搜索WEB开发者以前的文章或继续浏览下面的相关文章,希望大家以后多多支持WEB开发者!

本文链接:https://www.webkfz.com/WEBkF/PHP/129295.html

版权声明:站内所有文章皆来自网络转载,只供分享作用,不代表本站的观点!

发表评论 共有 0 条评论)

联系客服
网站客服 业务合作 QQ
1244305267
公众号
公众号
公众号
返回顶部