Question

我试图在屏幕中间得到一条斜线，当你悬停一个零件时，它应该会增长（我想知道该怎么做）。

问题是让屏幕中心的斜线变为响应状态。

这是我目前的代码：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>HTML/CSS slicing!</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>

    <body>
        <div class="block block-red">
            Demo
        </div>

        <div class="block block-green">
            Demo
        </div>

        <script src="ui.js"></script>
    </body>
</html>

CSS

html, body {
    margin: 0;
    padding: 0;
    height:100%;
    width:100%;
    overflow:hidden;
}


.block {
    height: 100vh;
    width: calc(50% - 100px);
    position: relative;
}

.block-red {
    background-color:red;
    float:left;
}

.block-green {
    background-color:#00ff00;
    float:right;
}

.block:after {
    position: absolute;
    top: 0px;
    content:'';
    height: 100%;
    width: 200%;
    background: inherit;
}
.block-red:after {
    right: 0;
    transform-origin: bottom right;
    transform: skewX(-20deg);
     z-index: -1;
}
.block-green:after {
    left: 0;
    transform-origin: top left;
    transform: skewX(-20deg);
     z-index: 2;
}

它看起来不对，但它在移动设备上没有响应 - 颜色之间有一个空白区域，它并不总是在屏幕的中心。请帮忙！

Answer 1

看起来您需要计算窗口宽度的一半，减去大部分高度的20％。

CSS：

width: calc(50% - (90vh * 0.2));

然后你只需要计算你的倾斜元素的宽度的两倍：

width: calc(100vw * 2);

<强>加成：你可以添加这个jQuery来为高而窄的窗口设置内容：

$(window).resize(function(){
  var width = $(window).width();
  var height = $(window).height();
  var diff = ((width - (height * 0.37)) / 2);

  if (width < (height * 0.37)) {
    $('.block').css('left', - diff);
  } else {
    $('.block').css('left', '0');
  }
});

工作示例： JSFiddle

<强>更新如果要在悬停时为宽度设置动画，可以使用CSS过渡来实现。

transition: 1s ease-in-out;

悬停动画示例：JSFiddle

CSS斜线在屏幕中间

1 个答案: