javascript - 如何使用 CSS 使用重叠元素掩盖文本的可见性
问题描述
如果您看到下方提供的 GIF,则文本仅在越过黑点后才会出现。在那之前它是看不见的。这是使用 Flash 制作的,但我们如何使用 CSS 来实现呢?
这是我到目前为止所得到的:
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-text:before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-text:before {
left: 50px;
}
.ypn-text:after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-text:after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
<div class="ypn-logo">
<div class="ypn-text">RUN</div>
</div>
我想制作一个 div 并将其右边框与中间点的中心轴锁定,但这也隐藏了绿色和红色元素。有没有办法只阻止文本元素而不是其他元素?
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
height: 100vh;
background: #222;
padding: 0;
margin: 0;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
z-index: 1;
}
.ypn-text {
font-size: 3.5em;
color: white;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
margin-left: -80px;
z-index: 0;
}
.ypn-before {
background: red;
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 180px;
z-index: -1;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 30px;
left: 10px;
}
.ypn-logo:hover>.ypn-before {
left: 50px;
}
.ypn-after {
background: #222;
content: "";
position: absolute;
width: 50px;
height: 50px;
border-radius: 180px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
top: 95px;
left: 130px;
z-index: 1;
}
.ypn-logo:hover>.ypn-after {
left: 60px;
}
.ypn-logo:hover>.ypn-text {
margin-left: 80px;
}
.ypn-after:after {
width: 130px;
background: black;
height: 3em;
content: '';
position: absolute;
left: -100px;
}
<div class="ypn-logo">
<div class="ypn-before"></div>
<div class="ypn-text">YPN</div>
<div class="ypn-after"></div>
</div>
解决方案
您可以使文本成为具有背景颜色的元素的子元素。然后通过创建一个带有一个点和一个设置为父级背景颜色的 div 的元素来制作蒙版。制作父母的overflow:hidden
,以便在移动以揭开文本时看不到彩色区域。
$('.overlay').on('click', function() {
$(this).toggleClass('hidden');
});
$(window).on('load', function() {
$('.overlay').removeClass('hidden');
});
body {
background: red;
}
.container {
width: 80%;
height: 60px;
border-radius: 60px;
background: white;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
background: white;
transition: left 2s ease-out;
position: absolute;
top: 0;
left: calc( -100% + 60px);
}
.overlay.hidden {
left: 0;
}
.overlay::after {
content: '';
background: black;
height: 60px;
width: 60px;
border-radius: 60px;
position: absolute;
right: 0;
top: 0;
}
.text {
font-size: 50px;
line-height: 60px;
width: 100%;
text-align: center;
}
p {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="text">ezoom</div>
<div class="overlay hidden"></div>
</div>
<p> click the circle to toggle the animation</p>
编辑:
使用上述原理后,这是您需要的效果的最终代码:
@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
padding: 0;
margin: 0;
background: #222;
font-family: "Ubuntu Mono";
}
.ypn-logo {
background: green;
display: flex;
flex-direction: row;
position: relative;
align-items: center;
justify-content: center;
padding: 10px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.ypn-before {
background: red;
content: '';
overflow: hidden;
width: 180px;
height: 180px;
border-radius: 180px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: relative;
left: -20px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-text {
background: none;
position: absolute;
left: 20px;
font-size: 3.2em;
color: #ddd;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot {
width: 200px;
height: 200px;
position: relative;
background: red;
left: -35px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-dot:after {
content: '';
position: absolute;
background: #222;
width: 60px;
height: 60px;
border-radius: 60px;
top: 70px;
right: -25px;
transition: all 1s cubic-bezier(0.86, 0, 0.07, 1);
}
.ypn-logo:hover>.ypn-before {
left: 20px;
}
.ypn-logo:hover>.ypn-before .ypn-dot {
left: -135px;
}
.ypn-logo:hover>.ypn-before .ypn-text {
left: 80px;
}
<div class="ypn-logo">
<div class="ypn-before">
<div class="ypn-text">RUN</div>
<div class="ypn-dot"></div>
</div>
</div>
推荐阅读
- swift - 为什么节点在 SceneKit 中的位置不一致?
- c# - 使用 Linq 表达式进行 C# 动态数据库过滤
- perl - 如何通过在 Perl 中传递其十六进制等效值(IEEE 格式)来获取浮点数?
- session - 在 WebAPI 和 WebForms 之间传递数据
- r - 我已将 R 中的循环应用于 excel 表的特定列,并希望将其应用于不同的列?
- json - 在 Symfony 4.1 上执行 JSON 请求测试时“尝试获取非对象的属性”
- entity-framework - 在 EfCore 2.1 中处理 IReadOnlyCollection 属性
- linux - 配置 CMake 以遵循符号链接
- android - RecyclerView 与堆栈项(重叠)
- c# - 仅在特定 Visual Studio 解决方案中发生的 C# 上的奇怪 DllNotFoundException