波浪頭與陰影css

有人能讓我走上正軌嗎？我怎麼能在標題的底部創建這個wave？波浪頭與陰影css

這是我到目前爲止有：https://codepen.io/zimex/pen/XaQjZL

<header id="header"> 
    <div class="container"> 
    <div class="logo"> 
    </div> 

    <div class="mobile-wrap"> 
     <div class="inner"> 
     <div class="user"> 
      <div class="wrap"> 
      <span>Hi</span> 
      </div> 
     </div> 
     <div class="nav"> 
      <ul> 
      <li><a href="#">Menu</a></li> 
      <li><a href="#">Items</a></li> 
      <li><a href="#">Are</a></li> 
      <li><a href="#">Located</a></li> 
      <li><a href="#">Here</a></li> 
      </ul> 
     </div> 
     </div> 
    </div> 
    <div class="burger"> 
     <span></span> 
    </div> 
    </div> 
</header>

來源

2017-09-05 GiedriusM

也許這個鏈接是有用的嗎？ [CSS形狀]（https://css-tricks.com/examples/ShapesOfCSS/） – Granny

使用SVG實現類似的效果 –

@AnuragDaolagajao如何使用濾鏡添加陰影？ – GiedriusM

1）你可以使用IMG這個 - 不好解決，但工作

2）檢查http://dev.wavemaker.com/wiki/bin/wmdoc_6.3/CSS

3）

html, body { 
    height: 100%; 
} 

html { 
    background: #eee; 
} 

body { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 

.box { 
    width: 300px; 
    height: 300px; 
    border-radius: 5px; 
    box-shadow: 0 2px 30px rgba(black, .2); 
    background: lighten(#f0f4c3, 10%); 
    position: relative; 
    overflow: hidden; 
    transform: translate3d(0, 0, 0); 
} 

.wave { 
    opacity: .4; 
    position: absolute; 
    top: 3%; 
    left: 50%; 
    background: #0af; 
    width: 500px; 
    height: 500px; 
    margin-left: -250px; 
    margin-top: -250px; 
    transform-origin: 50% 48%; 
    border-radius: 43%; 
    animation: drift 3000ms infinite linear; 
} 

.wave.-three { 
    animation: drift 5000ms infinite linear; 
} 

.wave.-two { 
    animation: drift 7000ms infinite linear; 
    opacity: .1; 
    background: yellow; 
} 

.box:after { 
    content: ''; 
    display: block; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to bottom, rgba(#e8a, 1), rgba(#def, 0) 80%, rgba(white, .5)); 
    z-index: 11; 
    transform: translate3d(0, 0, 0); 
} 

.title { 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
    line-height: 300px; 
    text-align: center; 
    transform: translate3d(0, 0, 0); 
    color: white; 
    text-transform: uppercase; 
    font-family: 'Playfair Display', serif; 
    letter-spacing: .4em; 
    font-size: 24px; 
    text-shadow: 0 1px 0 rgba(black, .1); 
    text-indent: .3em; 
} 
@keyframes drift { 
    from { transform: rotate(0deg); } 
    from { transform: rotate(360deg); } 
}

sample

來源

2017-09-05 09:39:34

波浪頭與陰影css

回答

相關問題