CSS3 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能
我要評論需求背景
使用 vue 做的項目，業(yè)務需求有一個拼圖效果，默認是深色的背景圖，上面分五個區(qū)域，每次會亮一個區(qū)域，整張圖都亮，拼圖完成。先來看一下最終的效果圖。
應用到的知識點：
- background-size
- background-position
- transform：rotate
實現(xiàn)思路：
外層大盒子用來放暗色背景圖，里面的5塊拼圖，是5個div，每塊拼圖都使用背景定位的方式展示背景圖的固定區(qū)域，中間的拼圖做了旋轉(zhuǎn)。但是旋轉(zhuǎn)后，又遇到了個問題：背景圖片也跟著旋轉(zhuǎn)了，像下面這樣：
解決背景旋轉(zhuǎn)的思路：可以在第5塊拼圖的外層套一個盒子，將外層盒子向右旋轉(zhuǎn)45度，再將背景的元素向左旋轉(zhuǎn)45度。操作完又發(fā)現(xiàn)了新的問題，下面圖中的黑色邊框是外層盒子（為了方便看，把其他的拼圖塊都設(shè)置為不可見）。如果給外層盒子設(shè)置 overflow:hidden ，那么中間拼圖的上下左右四個角都會缺失。
我們需要把第五塊拼圖的寬高設(shè)置大一些，再設(shè)置它外層的盒子 overflow:hidden。寬高設(shè)置大的話，對應的 background-size 也要改變。
最后，就可以實現(xiàn)剛開始的效果了，完整的 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 菱形拼圖實現(xiàn)只旋轉(zhuǎn)div 背景圖片不旋轉(zhuǎn)功能的文章就介紹到這了,更多相關(guān)CSS3旋轉(zhuǎn)圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了css3實現(xiàn)背景圖片顏色修改的多種方式,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起2021-04-13
CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例
這篇文章主要介紹了CSS3只讓背景圖片旋轉(zhuǎn)180度的實現(xiàn)示例。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一2021-03-09
前段時間在開發(fā)中，遇到需要給背景層加顏色遮罩的項目，現(xiàn)在特定總結(jié)一下給背景圖層加顏色遮罩的方法，感興趣的朋友跟隨小編一起看看吧2019-11-05
css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性實例演示
這篇文章主要介紹了css3實現(xiàn)一個div設(shè)置多張背景圖片及background-image屬性,同時對于css3背景漸變也做了詳細的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- 這篇文章主要介紹了CSS3對背景圖片的裁剪及尺寸和位置的設(shè)定方法,在IE瀏覽器中要注意一下兼容性,需要的朋友可以參考下2016-03-07
- CSS背景動畫很長時間以來都是一個熱門話題，很多時候都是因為效果特別絢麗，而且不需要額外的技術(shù)。最近有人問我是否可以給頁面上一個指定的元素安排多重背景動畫，答案是y2014-04-04
- 使用css3 屬性：background-size可以輕松實現(xiàn)像桌面壁紙一樣拉伸，下面為大家詳細介紹下具體的相關(guān)實現(xiàn)過程，有此需求的朋友可以參考下，希望對大家有所幫助2013-08-19
css3背景圖片透明疊加屬性cross-fade簡介及用法實例
據(jù)說iOS6系統(tǒng)(iPhone5)增加了兩個CSS3屬性，一個是CSS3 filters – CSS3濾鏡另外一個是CSS3 Cross-fade – CSS3交叉淡入淡出,接下來為您介紹cross-fade屬性，感興趣的朋友2013-01-08- 背景圖片/紋理有很多種使用方式，常常用于為添加網(wǎng)站的最佳的界面美化?，F(xiàn)在它在CSS3中被重視，我們可以應用多背景圖和背景圖片尺寸來實現(xiàn)更完美的效果,需要的朋友可以了解2012-12-19
