CSS 带渐变蒙版的垂直滚动字幕
CSS Vertical Scrolling Marquee with Gradient Mask
我正在尝试在全出血背景上创建一个垂直滚动的选取框。滚动文本将包含在页面的中心,并且必须通过顶部和底部的渐变不透明遮罩。
我可以在顶部或底部应用渐变蒙版,但不能同时应用两者。
有没有办法只用 CSS / HTML 来做到这一点?
请参见 fiddle 将不透明蒙版应用到容器底部 - 目标是在容器的顶部和底部设置该蒙版。
.bgimage{
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
z-index:-2;
}
.container {
width: 100%;
height: 10vw;
margin: 1em auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
text-align:center;
-webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear infinite;
}
/* Make it move! */
@keyframes marquee {
0% { top: 18vw }
100% { top: -65vw }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
color: white;
font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
<div class="microsoft container">
<p class="marquee">ONE<br /><br />TWO<br /><br />THREE<br /><br />FOUR<br /><br />FIVE<br /><br />SIX.</p>
</div>
<div class="bgimage">
</div>
只需像下面这样更新渐变:
.bgimage{
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
z-index:-2;
}
.container {
width: 100%;
height: 10vw;
margin: 1em auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
text-align:center;
-webkit-mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear infinite;
}
/* Make it move! */
@keyframes marquee {
0% { top: 18vw }
100% { top: -65vw }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
color: white;
font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
<div class="microsoft container">
<p class="marquee">ONE<br><br>TWO<br><br>THREE<br><br>FOUR<br><br>FIVE<br><br>SIX.</p>
</div>
<div class="bgimage">
</div>
我正在尝试在全出血背景上创建一个垂直滚动的选取框。滚动文本将包含在页面的中心,并且必须通过顶部和底部的渐变不透明遮罩。
我可以在顶部或底部应用渐变蒙版,但不能同时应用两者。
有没有办法只用 CSS / HTML 来做到这一点?
请参见 fiddle 将不透明蒙版应用到容器底部 - 目标是在容器的顶部和底部设置该蒙版。
.bgimage{
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
z-index:-2;
}
.container {
width: 100%;
height: 10vw;
margin: 1em auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
text-align:center;
-webkit-mask-image: -webkit-gradient(linear, left 20%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear infinite;
}
/* Make it move! */
@keyframes marquee {
0% { top: 18vw }
100% { top: -65vw }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
color: white;
font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
<div class="microsoft container">
<p class="marquee">ONE<br /><br />TWO<br /><br />THREE<br /><br />FOUR<br /><br />FIVE<br /><br />SIX.</p>
</div>
<div class="bgimage">
</div>
只需像下面这样更新渐变:
.bgimage{
position: fixed;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
background-image: url(https://static.pexels.com/photos/880861/pexels-photo-880861.jpeg);
z-index:-2;
}
.container {
width: 100%;
height: 10vw;
margin: 1em auto;
overflow: hidden;
position: relative;
box-sizing: border-box;
text-align:center;
-webkit-mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
mask-image:linear-gradient(transparent, rgba(0,0,0,1) 40% 60%,transparent);
}
.marquee {
top: 6em;
position: relative;
box-sizing: border-box;
animation: marquee 20s linear infinite;
}
/* Make it move! */
@keyframes marquee {
0% { top: 18vw }
100% { top: -65vw }
}
/* Make it look pretty */
.microsoft .marquee {
margin: 0;
padding: 0 1em;
line-height: 1.5em;
color: white;
font: 5vw 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
<div class="microsoft container">
<p class="marquee">ONE<br><br>TWO<br><br>THREE<br><br>FOUR<br><br>FIVE<br><br>SIX.</p>
</div>
<div class="bgimage">
</div>