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 开发工具收集
Apr 17 HTML / CSS
CSS3 Flex 弹性布局实例代码详解
Nov 01 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
Jan 09 HTML / CSS
HTML5和以前HTML4的区别整理
Oct 20 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
基于HTML5的齿轮动画特效
Feb 29 HTML / CSS
使用phonegap克隆和删除联系人的实现方法
Mar 31 HTML / CSS
html5 canvas的绘制文本自动换行的示例代码
Sep 17 HTML / CSS
移动端Html5中百度地图的点击事件
Jan 31 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
You might like
PHP小教程之实现链表
2014/06/09 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP获取真实客户端的真实IP
2017/03/07 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
Jquery 插件学习实例1 插件制作说明与tableUI优化
2010/04/02 Javascript
下拉菜单点击实现连接跳转功能的js代码
2013/05/19 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
2014/06/09 Javascript
javascript数组操作方法小结和3个属性详细介绍
2014/07/05 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JavaScript实现简单获取当前网页网址的方法
2015/11/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
通过BootStrap实现轮播图的实际应用
2016/09/26 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
ES10 特性的完整指南小结
2019/03/04 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
2019/06/24 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
javascript的delete运算符知识点总结
2019/11/19 Javascript
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
Django rest framework实现分页的示例
2018/05/24 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
匈牙利超级网上商店和优惠:Alza.hu
2019/12/17 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
大专毕业生自我鉴定
2013/11/21 职场文书
节能宣传周活动总结
2014/05/08 职场文书
员工三分钟演讲稿
2014/08/19 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
小学三年级数学教学反思
2016/02/16 职场文书
python实现简单倒计时功能
2021/04/21 Python