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


Posted in HTML / CSS onMarch 30, 2021

需求背景

使用 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旋转图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 HTML / CSS
CSS3教程(5):网页背景图片
Apr 02 HTML / CSS
CSS3线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
CSS3之边框多颜色Border-color属性使用示例
Oct 11 HTML / CSS
一款利用纯css3实现的超炫3D表单的实例教程
Dec 01 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 HTML / CSS
html5 音乐播放器 audio 标签使用概述
Jul 15 HTML / CSS
详解如何使用rem或viewport进行移动端适配
Aug 14 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
You might like
set_include_path在win和linux下的区别
2008/01/10 PHP
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
php简单实现快速排序的方法
2015/04/04 PHP
php无序树实现方法
2015/07/28 PHP
浅谈PHP的$_SERVER[SERVER_NAME]
2017/02/04 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
Javascript 检测键盘按键信息及键码值对应介绍
2013/01/03 Javascript
jQuery常用数据处理方法小结
2015/02/20 Javascript
vue.js单页面应用实例的简单实现
2017/04/10 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
2017/07/02 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
2017/10/09 Javascript
Angular2+如何去除url中的#号详解
2017/12/20 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
详解nodejs http请求相关总结
2019/03/31 NodeJs
JavaScript实现多球运动效果
2020/09/07 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[01:04:20]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.29
2020/12/02 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
对python中数组的del,remove,pop区别详解
2018/11/07 Python
解决python 读取excel时 日期变成数字并加.0的问题
2019/10/08 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
英国婚礼商城:Wedding Mall
2019/11/02 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
公司股东出资证明书
2014/11/01 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python