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设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
CSS3实现超酷的黑猫警长首页
Apr 26 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
Data URI scheme详解和使用实例及图片base64编码实现方法
May 08 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
CSS3实现模糊背景的三种效果示例
使用css样式设计一个简单的html登陆界面的实现
CSS实现漂亮的时钟动画效果的实例代码
CSS3点击按钮圆形进度打钩效果的实现代码
完美实现CSS垂直居中的11种方法
CSS代码检查工具stylelint的使用方法详解
You might like
用PHP+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
关于Iframe如何跨域访问Cookie和Session的解决方法
2013/04/15 PHP
PHP 在数组中搜索给定的简单实例 array_search 函数
2016/06/13 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
JS与Ajax Get和Post在使用上的区别实例详解
2016/06/08 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
VUE实现可随意拖动的弹窗组件
2018/09/25 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
python实现微信远程控制电脑
2018/02/22 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
django2.2安装错误最全的解决方案(小结)
2019/09/24 Python
Python绘制热力图示例
2019/09/27 Python
Tensorflow不支持AVX2指令集的解决方法
2020/02/03 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python 爬虫性能相关总结
2020/08/03 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
创业计划书中要认真思考的问题
2013/12/28 职场文书
2014年会策划方案
2014/05/11 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
2014个人年度工作总结
2014/12/15 职场文书
运动会新闻稿
2015/07/17 职场文书
Golang 编译成DLL文件的操作
2021/05/06 Golang
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android
JS轻量级函数式编程实现XDM二
2022/06/16 Javascript