晚上好,
我目前正在尝试在我正在开发的新网站上设计对角线列效果,但我在尝试正确放置背景时遇到问题。
An image of what I am trying to achieve。
理想情况下,我想根据滚动事件和/或某些动画更改颜色,这就是为什么我尝试使用CSS实现此效果而不使用模拟图像作为背景。该网站需要做出响应,这将消除一些硬编码的可能性..
Here is a CodeSandBox包含我在尝试解决此问题时所做的尝试。遗憾的是,transform-origin属性似乎没有按预期工作。
编辑:从Sandbox添加代码以供将来参考。
EDIT2:Adding a second example image to show opposing gradients. Bryce Howitson的回答中提到了这一点。
.container {
width: 100vw;
height: 100vh;
overflow-y: hidden;
border: 1px solid black;
}
.rotated {
transform: rotate(45deg);
transform-origin: center top;
display: flex;
flex-direction: row;
}
.column {
width: 200px;
height: 1200px;
background: blue;
}
.column1 {
width: 200px;
height: 1200px;
background: red;
}
<div class="container">
<div class="rotated">
<div class="column"></div>
<div class="column1"></div>
<div class="column"></div>
<div class="column1"></div>
<div class="column"></div>
<div class="column1"></div>
</div>
</div>
谢谢阅读!
你可以用一个linear-background
做很多。这种方法的好处是你不必转换任何东西而且它是响应的,因为它填充了容器。
body {
background: #333;
}
.stripes {
width: 80%;
min-height: 300px;
margin: 40px auto;
border-radius: 10px;
background-image:
linear-gradient(-45deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 9%, rgba(224,14,14,1) 9%, rgba(224,14,14,1) 22%, rgba(0,212,255,1) 22%, rgba(0,212,255,1) 45%, rgba(255,89,0,1) 45%, rgba(255,89,0,1) 63%, rgba(2,0,36,1) 63%, rgba(2,0,36,1) 65%, rgba(0,212,255,1) 65%);
}
<div class="stripes"></div>
编辑#1:
您可以通过在同一元素上堆叠多个背景渐变来做更多事情。
body {
background: #333;
}
.stripes {
width: 80%;
min-height: 300px;
margin: 40px auto;
border-radius: 10px;
background-image:
linear-gradient(34deg, rgba(9,9,15,0.8) 0%, rgba(0,212,255,0) 70%),
linear-gradient(-45deg, rgba(2,0,36,1) 0%, rgba(2,0,36,1) 9%, rgba(224,14,14,1) 9%, rgba(224,14,14,1) 22%, rgba(0,212,255,1) 22%, rgba(0,212,255,1) 45%, rgba(255,89,0,1) 45%, rgba(255,89,0,1) 63%, rgba(2,0,36,1) 63%, rgba(2,0,36,1) 65%, rgba(0,212,255,1) 65%);
}
<div class="stripes"></div>
编辑#2:SVG似乎是解决这个问题的好方法。我喜欢它可扩展而不模糊。
body {
background: #333;
}
.stripes {
width: 80%;
min-height: 300px;
margin: 40px auto;
border-radius: 10px;
background-size: cover;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/10307/stripes.svg);
background-repeat: no-repeat;
}
<div class="stripes"></div>
不幸的是,这需要编辑SVG文件本身来添加旋转。最后一个选择是在容器内使用SVG内联。我们将使用尺寸(使其大于容器)和绝对定位,以确保它在旋转时覆盖所有内容。
body {
background: #333;
}
.stripes {
width: 80%;
min-height: 300px;
margin: 40px auto;
border-radius: 10px;
overflow:hidden;
position: relative;
}
.stripes svg {
position: absolute;
z-index: -1;
top:-50%;
left:-50%;
width: 200%;
height: 200%;
transform: rotate(45deg);
}
<div class="stripes">
<svg width="500px" height="500px" viewBox="0 0 500 500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<linearGradient x1="50%" y1="0%" x2="50%" y2="83.2079305%" id="linearGradient-1">
<stop stop-color="#E8FF04" offset="0%"></stop>
<stop stop-color="#CD1144" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50%" y1="0%" x2="50%" y2="86.756968%" id="linearGradient-2">
<stop stop-color="#3816E3" offset="0%"></stop>
<stop stop-color="#00FF81" offset="100%"></stop>
</linearGradient>
</defs>
<g id="stripes2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<rect id="R1" fill="#00CEFF" transform="translate(81.836327, 250.000000) rotate(-360.000000) translate(-81.836327, -250.000000) " x="0" y="2.84217094e-14" width="163.672655" height="500"></rect>
<rect id="R2" fill="#060120" transform="translate(168.982036, 250.000000) rotate(-360.000000) translate(-168.982036, -250.000000) " x="163.982036" y="0" width="10" height="500"></rect>
<rect id="R2" fill="url(#linearGradient-1)" transform="translate(203.441118, 250.000000) rotate(-360.000000) translate(-203.441118, -250.000000) " x="174" y="0" width="58.8822355" height="500"></rect>
<rect id="R4" fill="url(#linearGradient-2)" transform="translate(285.395210, 250.000000) rotate(-360.000000) translate(-285.395210, -250.000000) " x="233" y="0" width="104.790419" height="500"></rect>
<rect id="R5" fill="#DF0E0D" transform="translate(373.425150, 250.000000) rotate(-360.000000) translate(-373.425150, -250.000000) " x="336" y="0" width="74.8502994" height="500"></rect>
<rect id="R6" fill="#060120" transform="translate(455.500000, 250.000000) rotate(-360.000000) translate(-455.500000, -250.000000) " x="411" y="0" width="89" height="500"></rect>
</g>
</svg>
</div>