这是我正在使用的笔,我想为我的作品集创造一些更有趣的东西,但当我想让屏幕右侧的相同元素进行相同的扩展,但向另一个方向(镜像/翻转/还原/相反(时,我一直坚持这一部分。
完整的代码可以在笔中查看。https://codepen.io/benjaminj/pen/oNqWPRb
正如你所看到的,我使用了比例,但这也翻转了,里面的文本并不是这个项目的最终目标。同样,当悬停在右边的元素时,会发生奇怪的颤抖,我也不知道是从哪里来的。
-
我设计了一个具有展开侧的容器,其中显示了容器的文本。在我看来,网格也是定位元素的最佳方式。下面是HTML代码:
-
因为(对我来说(非常奇怪和复杂的设计,我在文本中使用了:before和:after。
-
左边的元素是一种魅力,但当我试图";镜像;那些元素在右边,并扩展到屏幕的中心,麻烦就开始了。
但对于右侧的元素,我只使用了scaleX(-1(
.main3 {
display: block;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
transform: scaleX(-1);
}
这是代码
.gridContainer {
display: grid;
grid-template-columns: 100px auto auto 100px;
grid-template-rows: repeat(4, auto);
row-gap: 100px;
}
.main {
display: block;
grid-column-start: 2;
grid-column-end: 3;
}
.main2 {
display: block;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 3;
}
.main3 {
display: block;
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
transform: scaleX(-1);
}
.main3 span {
}
.main3 .background::before {
width: 35%;
}
.test {
z-index: 100;
width: 400px;
height: 100px;
background-color: #67ade0;
position: absolute;
border-bottom-style: solid;
border-color: #93cff1;
border-width: 100px;
clip-path: polygon(10% 0%, 5% 50%, 10% 100%, 5% 100%, 0% 50%, 5% 0%);
}
.background {
display: inline-block;
margin-left: 20px;
width: 0px;
height: 200px;
background-color: #e1effa;
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);
transition: width 6.5s, transform 5s;
z-index: 10;
opacity: 0.8;
}
.diamondStatic {
margin-left: 20px;
display: inline-block;
position: absolute;
height: 200px;
width: 400px;
background-color: #c4e0f5;
clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}
.diamondAnimate {
margin-left: -20px;
display: inline-block;
z-index: 100px;
height: 200px;
width: 400px;
background-color: #c4e0f5;
clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
transition: margin-left 6.5s, transform 5s;
}
.test:hover ~ .background {
width: 400px;
}
.test:hover ~ .diamondAnimate {
margin-left: -45px;
}
.background::after {
margin-top: 10px;
margin-left: 140px;
position: absolute;
content: 'Managed Services';
}
.background::before {
width: 15%;
margin-top: 50px;
margin-left: 50px;
position: absolute;
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.';
}
.innerBtn {
display: inline;
position: absolute;
margin-top: 150px;
margin-left: 160px;
}
<div class="gridContainer">
<div class="main">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main2">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main3">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
</div>
从代码笔的视觉框中可以看到,右侧的元素在颤抖,文本被倒置。这个问题似乎超出了我的知识范围,这就是我鼓起勇气在这里发帖的原因。
附言:我也试过用另一种方法重建整个容器(https://codepen.io/benjaminj/pen/zYWwyeQ)但在这里,我偶然发现了一个背景,我希望只在不断扩大的区域中可见。
对于正在翻转的测试:您只需要transform:scaleX(-1)
以及内部div.background
对于悬停抖动,是因为水平滚动显示然后隐藏,所以在.main
中使用overflow: hidden
我还改进了你的代码,删除了重复的属性和其他次要的东西
body {
margin: 0;
overflow: hidden
}
.gridContainer {
display: grid;
grid-template-columns: 100px auto auto 100px;
grid-template-rows: repeat(4, auto);
row-gap: 100px;
}
.main {
grid-column: 2 / 3;
overflow: hidden
}
.main2 {
grid-row: 2 / 3;
}
.main3 {
grid-column: 3 / 4;
transform: scaleX(-1);
}
.main3 .background {
transform: scaleX(-1);
}
.test {
z-index: 100;
width: 400px;
height: 100px;
background-color: #67ade0;
position: absolute;
border-bottom-style: solid;
border-color: #93cff1;
border-width: 100px;
clip-path: polygon(10% 0%, 5% 50%, 10% 100%, 5% 100%, 0% 50%, 5% 0%);
}
.background {
display: inline-flex;
margin-left: 20px;
width: 0;
height: 200px;
background-color: #e1effa;
clip-path: polygon(95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%, 5% 0);
transition: width 6.5s, transform 5s;
opacity: 0.8;
}
.diamondStatic,
.diamondAnimate {
display: inline-block;
position: absolute;
height: 200px;
width: 400px;
background-color: #c4e0f5;
clip-path: polygon(5% 0, 10% 50%, 5% 100%, 0% 50%);
}
.diamondStatic {
margin-left: 20px;
}
.diamondAnimate {
margin-left: -20px;
transition: margin-left 6.5s, transform 5s;
}
.test:hover~.background {
width: 400px;
}
.test:hover~.diamondAnimate {
margin-left: -45px;
}
.background::before {
max-width: 75%;
margin-top: 50px;
margin-left: 50px;
content: attr(data-text)
}
.background::after {
margin-top: 10px;
margin-left: 140px;
position: absolute;
content: attr(data-title);
}
.innerBtn {
display: inline;
position: absolute;
margin-top: 150px;
margin-left: 160px;
}
<div class="gridContainer">
<div class="main">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main main2">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
<div class="main main3">
<div class="test"></div>
<div class="diamondStatic"></div>
<span class="background" data-title="Managed Services" data-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget erat maximus, mattis ex sed, aliquet arcu. Maecenas eleifend ornare nulla, id placerat turpis pretium quis. Class aptent taciti sociosqu.">
<button class="innerBtn">CLICK ME</button>
</span>
<div class="diamondAnimate"></div>
</div>
</div>