欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3 菱形拼圖實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能

  發(fā)布時(shí)間：2021-03-29 15:16:26   作者：蒲公英芽   我要評(píng)論
這篇文章主要介紹了CSS3 菱形拼圖實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

需求背景

使用 vue 做的項(xiàng)目，業(yè)務(wù)需求有一個(gè)拼圖效果，默認(rèn)是深色的背景圖，上面分五個(gè)區(qū)域，每次會(huì)亮一個(gè)區(qū)域，整張圖都亮，拼圖完成。先來(lái)看一下最終的效果圖。

CSS3 菱形拼圖 實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)

應(yīng)用到的知識(shí)點(diǎn)：

  • background-size
  • background-position
  • transform：rotate

實(shí)現(xiàn)思路：

外層大盒子用來(lái)放暗色背景圖，里面的5塊拼圖，是5個(gè)div，每塊拼圖都使用背景定位的方式展示背景圖的固定區(qū)域，中間的拼圖做了旋轉(zhuǎn)。但是旋轉(zhuǎn)后，又遇到了個(gè)問(wèn)題：背景圖片也跟著旋轉(zhuǎn)了，像下面這樣：

CSS3 菱形拼圖 實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)
 

解決背景旋轉(zhuǎn)的思路：可以在第5塊拼圖的外層套一個(gè)盒子，將外層盒子向右旋轉(zhuǎn)45度，再將背景的元素向左旋轉(zhuǎn)45度。操作完又發(fā)現(xiàn)了新的問(wèn)題，下面圖中的黑色邊框是外層盒子（為了方便看，把其他的拼圖塊都設(shè)置為不可見(jiàn)）。如果給外層盒子設(shè)置 overflow:hidden ，那么中間拼圖的上下左右四個(gè)角都會(huì)缺失。

我們需要把第五塊拼圖的寬高設(shè)置大一些，再設(shè)置它外層的盒子 overflow:hidden。寬高設(shè)置大的話，對(duì)應(yīng)的 background-size 也要改變。

CSS3 菱形拼圖 實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)
 

最后，就可以實(shí)現(xiàn)剛開(kāi)始的效果了，完整的 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>

到此這篇關(guān)于CSS3 菱形拼圖實(shí)現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能的文章就介紹到這了,更多相關(guān)CSS3旋轉(zhuǎn)圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論