样式增加面具容器

的高度我有这样的滤光罩，使页面的下半部分黑色和白色后打破。在添加我的闪烁文本后，我需要调整掩码的高度以使其平滑。当我调整高度时，会打破我应用中的所有样式。我究竟做错了什么？

class App extends Component { 
    render() { 
    return (
     <div className="portfoliobackground"> 
      <h1 data-heading="i">Malik</h1> 
      <div className='profile-box container'> 
      </div> 
     </div> 
    ); 
    } 
}

这低于

@keyframes fadeIn { 
    0% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 1; 
    } 
} 

@-webkit-keyframes showHide { /* Chrome, Safari */ 
    0% {width:100%} 
    40% {width:0%} 
    60% {width:0%;} 
    100% {width:100%;} 
} 

body{ 
    background: url('../images/wtc2.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    width:100%; 
    height: 100%; 
} 






.profile-box{ 
    -webkit-animation: fadeIn 3s ease-in; 
    z-index: -1; 
    background: url('../images/wtc.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: grayscale(100%); 
width: 100%; 
height: 65%; 
margin-top: 15%; 

border-top: white solid 1px; 
position: absolute; 

} 

$h1: rgba(45,45,45,1); 
$blue: #98b5cc; 
$yellow: #ffcc00; 
$outline: rgba(#fff, .4); 
$shadow: rgba($yellow, .5); 



h1 { 
    font-family: 'CoreCircus', sans-serif; 
    font-size: 14vw; 
    text-align: center; 
    line-height: 1; 
    margin: 0; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    position: absolute; 
    color: $h1; 
    letter-spacing: -.5rem; 

    &:before { 
     content: attr(data-heading); 
     position: absolute; 
     overflow: hidden; 
     color: #e22422; 
     width: 100%; 
     z-index: 5; 
     text-shadow: none; 
     left: 67%; 
     text-align: left; 
     animation: flicker 3s linear infinite; 
    } 
} 

@keyframes flicker { 
    0%, 19.999%, 22%, 62.999%, 64%, 64.999%, 70%, 100% { 
     opacity: .99; 
     text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 -2px 8px, 0 0 2px, 0 0 5px #ff7e00, 0 0 15px #ff4444, 0 0 2px #ff7e00, 0 2px 3px #000; 
    } 
    20%, 21.999%, 63%, 63.999%, 65%, 69.999% { 
     opacity: 0.4; 
     text-shadow: none; 
    } 
} 


@font-face { 
    font-family: 'CoreCircus2DDot1'; 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot'); 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_1_0.ttf') format('truetype'); 
} 

@font-face { 
    font-family: 'CoreCircus'; 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot'); 
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.eot?#iefix') format('embedded-opentype'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.woff') format('woff'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/333BF4_8_0.ttf') format('truetype'); 
}

我SCSS应该的样子是白色边框是直接在中间，并直接上线的顶部的文本。

在我添加文字动画之前，它工作得很完美。我更喜欢为了风格的目的而保持闪烁效果。

来源

2017-10-10 dutchkillsg

在将<h1>放入.profile-box div后尝试此操作。

.portfoliobackground { 
    position: relative; 

    .profile-box { 
     position: absolute; 
     top: 50%; 
     bottom: 0; 

     h1 { 
     position: absolute; 
     bottom: 100%; 
     } 
    } 
}

来源

2017-10-10 17:31:03 Dane

样式增加面具容器

回答

相关问题