我正在尝试在屏幕中间画一条斜线，当您将鼠标悬停在某个部分时，它应该会变长(我想我会知道如何制作)。
问题是获取屏幕中心的斜线并使其响应。
这是我当前的代码:
https://jsfiddle.net/kh657fL2/
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;
}
它看起来不错，但在移动设备上没有响应 - 颜色之间有一个空白区域，而且它并不总是位于屏幕中央。请帮忙!
最佳答案
看起来您需要计算窗口宽度的一半，减去大部分高度的 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
关于jquery - 屏幕中间的CSS斜线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45041162/