1. дома
  2. Вопрос и ответ
  3. Css задержка анимация показывает нежелательное содержание

Css задержка анимация показывает нежелательное содержание

2016-10-11 3 views
1

здесь пример CSS-анимации с некоторыми задержкамиCss задержка анимация показывает нежелательное содержание

http://codepen.io/anon/pen/qaoVzQ

<div id="icon-holder"> 
    <div id="line-01"> 
     <div class="back-line-container-outer"> 
      <div class="back-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
        <title>001</title> 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
     <div class="front-line-container-outer"> 
      <div class="front-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
        <title>002</title> 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
    </div> 

    <div id="line-02"> 
     <div class="back-line-container-outer"> 
      <div class="back-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
        <title>001</title> 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
     <div class="front-line-container-outer"> 
      <div class="front-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
        <title>002</title> 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
    </div> 

    <div id="line-03"> 
     <div class="back-line-container-outer"> 
      <div class="back-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
        <title>001</title> 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
     <div class="front-line-container-outer"> 
      <div class="front-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
        <title>002</title> 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
    </div> 

    <div id="line-04"> 
     <div class="back-line-container-outer"> 
      <div class="back-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
        <title>001</title> 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
     <div class="front-line-container-outer"> 
      <div class="front-line-container-inner"> 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
        <title>002</title> 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
       </svg> 
      </div> 
     </div> 
    </div> 
</div> 


#icon-holder{ 
    width: 200px; 
    height: 200px; 
    margin-left: 40px; 
} 
#line-01,#line-02,#line-03,#line-04{ 
    width: 200px; 
    height: 30px; 
    position: relative; 

} 

#line-01 .back-line-container-outer, 
#line-02 .back-line-container-outer, 
#line-03 .back-line-container-outer, 
#line-04 .back-line-container-outer{ 
    position: absolute; 
    overflow: hidden; 
    right: 0; 
    top: 3px; 
    width: 200px; 
    height: 30px; 
} 

#line-01 .back-line-container-inner, 
#line-02 .back-line-container-inner, 
#line-03 .back-line-container-inner, 
#line-04 .back-line-container-inner{ 
    overflow: hidden; 
    position:absolute; 
    width: 160px; 
    top:0; 
    right: 40px; 
} 

#line-01 .front-line-container-outer, 
#line-02 .front-line-container-outer, 
#line-03 .front-line-container-outer, 
#line-04 .front-line-container-outer{ 
    opacity:0.5; 
    position: absolute; 
    overflow: hidden; 
    right: 0; 
    top:0; 
    width: 0; 
    height: 30px; 
} 

#line-01 .front-line-container-inner, 
#line-02 .front-line-container-inner, 
#line-03 .front-line-container-inner, 
#line-04 .front-line-container-inner{ 
    overflow: hidden; 
    position:absolute; 
    width: 200px; 
    top:0; 
    right: 0; 
} 

svg{ 
    width: 200px; 
} 

.back-line-container-outer svg path{ 
    fill: #555; 
} 

.front-line-container-outer svg path{ 
    fill: #06b4ea; 
} 

#icon-holder:hover{ 
    cursor: pointer; 
} 

#icon-holder:hover #line-01 .back-line-container-inner{ 
    -webkit-animation: anim_bl_inner 0.7s normal linear forwards; 
} 

#icon-holder:hover #line-01 .back-line-container-outer{ 
    -webkit-animation: anim_bl_outer 0.7s normal linear forwards; 
} 

#icon-holder:hover #line-01 .front-line-container-inner{ 
    -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.15s; 
} 

#icon-holder:hover #line-01 .front-line-container-outer{ 
    -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.15s; 
} 

#icon-holder:hover #line-02 .back-line-container-inner{ 
    -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.05s; 
} 

#icon-holder:hover #line-02 .back-line-container-outer{ 
    -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.05s; 
} 

#icon-holder:hover #line-02 .front-line-container-inner{ 
    -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.2s; 
} 

#icon-holder:hover #line-02 .front-line-container-outer{ 
    -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.2s; 
} 

#icon-holder:hover #line-03 .back-line-container-inner{ 
    -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.1s; 
} 

#icon-holder:hover #line-03 .back-line-container-outer{ 
    -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.1s; 
} 

#icon-holder:hover #line-03 .front-line-container-inner{ 
    -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.25s; 
} 

#icon-holder:hover #line-03 .front-line-container-outer{ 
    -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.25s; 
} 


#icon-holder:hover #line-04 .back-line-container-inner{ 
    -webkit-animation: anim_bl_inner 0.7s normal linear forwards 0.15s; 
} 

#icon-holder:hover #line-04 .back-line-container-outer{ 
    -webkit-animation: anim_bl_outer 0.7s normal linear forwards 0.15s; 
} 

#icon-holder:hover #line-04 .front-line-container-inner{ 
    -webkit-animation: anim_fl_inner 0.7s normal linear forwards 0.3s; 
} 

#icon-holder:hover #line-04 .front-line-container-outer{ 
    -webkit-animation: anim_fl_outer 0.7s normal linear forwards 0.3s; 
} 




#icon-holder #line-01 .back-line-container-inner{ 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.15s; 
} 

#icon-holder #line-01 .back-line-container-outer{ 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.15s; 
} 

#icon-holder #line-01 .front-line-container-inner{ 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards; 
} 

#icon-holder #line-01 .front-line-container-outer{ 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards; 
} 

#icon-holder #line-02 .back-line-container-inner{ 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.2s; 
} 

#icon-holder #line-02 .back-line-container-outer{ 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.2s; 
} 

#icon-holder #line-02 .front-line-container-inner{ 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.05s; 
} 

#icon-holder #line-02 .front-line-container-outer{ 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.05s; 
} 

#icon-holder #line-03 .back-line-container-inner{ 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.25s; 
} 

#icon-holder #line-03 .back-line-container-outer{ 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.25s; 
} 

#icon-holder #line-03 .front-line-container-inner{ 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.1s; 
} 

#icon-holder #line-03 .front-line-container-outer{ 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.1s; 
} 

#icon-holder #line-04 .back-line-container-inner{ 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear forwards 0.3s; 
} 

#icon-holder #line-04 .back-line-container-outer{ 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear forwards 0.3s; 
} 

#icon-holder #line-04 .front-line-container-inner{ 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear forwards 0.15s; 
} 

#icon-holder #line-04 .front-line-container-outer{ 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear forwards 0.15s; 
} 


@-webkit-keyframes anim_bl_inner { 
    0% {width: 160px; right: 40px;} 
    25%, 100% {width: 200px; right: 0;} 
} 
@-webkit-keyframes anim_bl_outer { 
    0%, 25% {width: 200px; opacity: 1;} 
    100% {width: 0; opacity: 0.5;} 
} 

@-webkit-keyframes anim_fl_inner { 
    0%, 75% {width: 200px; right: 0;} 
    100% {width: 160px; right: 40px;} 
} 
@-webkit-keyframes anim_fl_outer { 
    0% {width: 0; opacity: 0.5;} 
    75% {width: 160px; opacity: 1;} 
    100% {width: 200px; opacity: 1;} 
} 


@-webkit-keyframes anim_rev_bl_inner { 
    0%{width: 0; right: 0;} 
    25%, 75% {width: 200px; right: 0;} 
    100% {width: 160px; right: 40px;} 
} 
@-webkit-keyframes anim_rev_bl_outer { 
    0% {width: 0; opacity: 0.5;} 
    25%, 100% {width: 200px; opacity: 1;} 
} 

@-webkit-keyframes anim_rev_fl_inner { 
    0% {width: 160px; right: 40px;} 
    25%, 100% {width: 200px; right: 0;} 
} 
@-webkit-keyframes anim_rev_fl_outer { 
    0% {width: 200px; opacity: 1;} 
    25% {width: 160px; opacity: 1;} 
    100% {width: 0; opacity: 0.5;} 
}

На обратной анимации (на отведении указателя мыши) вы можете увидеть серые полосы мигающие коротки на старте анимации - из-за задержек. Я могу удалить атрибут css «width» .back-line-container-outer - он решает проблему, но затем вся анимация мерцает при запуске ... есть ли способ ее исправить?

источник

2016-10-11 Sobakinet

ответ

2

Вы используете animation-fill-mode из forwards, который сохранит только конечное состояние анимации после окончания анимации. Чтобы сделать то же самое до начала анимации, используйте animation-fill-mode из both.

Итак, замените все экземпляры forwards на both.

CodePen

#icon-holder{ 
 
    width: 200px; 
 
    height: 200px; 
 
    margin-left: 40px; 
 
} 
 
#line-01,#line-02,#line-03,#line-04{ 
 
    width: 200px; 
 
    height: 30px; 
 
    position: relative; 
 
    
 
} 
 

 
#line-01 .back-line-container-outer, 
 
#line-02 .back-line-container-outer, 
 
#line-03 .back-line-container-outer, 
 
#line-04 .back-line-container-outer{ 
 
    position: absolute; 
 
    overflow: hidden; 
 
    right: 0; 
 
    top:3px; 
 
    width: 200px; 
 
    height: 30px; 
 
} 
 

 
#line-01 .back-line-container-inner, 
 
#line-02 .back-line-container-inner, 
 
#line-03 .back-line-container-inner, 
 
#line-04 .back-line-container-inner{ 
 
    overflow: hidden; 
 
    position:absolute; 
 
    width: 160px; 
 
    top:0; 
 
    right: 40px; 
 
} 
 

 
#line-01 .front-line-container-outer, 
 
#line-02 .front-line-container-outer, 
 
#line-03 .front-line-container-outer, 
 
#line-04 .front-line-container-outer{ 
 
    opacity:0.5; 
 
    position: absolute; 
 
    overflow: hidden; 
 
    right: 0; 
 
    top:0; 
 
    width: 0px; 
 
    height: 30px; 
 
} 
 

 
#line-01 .front-line-container-inner, 
 
#line-02 .front-line-container-inner, 
 
#line-03 .front-line-container-inner, 
 
#line-04 .front-line-container-inner{ 
 
    overflow: hidden; 
 
    position:absolute; 
 
    width: 200px; 
 
    top:0; 
 
    right: 0; 
 
} 
 

 
svg{ 
 
    width: 200px; 
 
} 
 

 
.back-line-container-outer svg path{ 
 
    fill: #555; 
 
} 
 

 
.front-line-container-outer svg path{ 
 
    fill: #06b4ea; 
 
} 
 

 
#icon-holder:hover{ 
 
    cursor: pointer; 
 
} 
 

 
#icon-holder:hover #line-01 .back-line-container-inner{ 
 
    -webkit-animation: anim_bl_inner 0.7s normal linear both; 
 
} 
 

 
#icon-holder:hover #line-01 .back-line-container-outer{ 
 
    -webkit-animation: anim_bl_outer 0.7s normal linear both; 
 
} 
 

 
#icon-holder:hover #line-01 .front-line-container-inner{ 
 
    -webkit-animation: anim_fl_inner 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder:hover #line-01 .front-line-container-outer{ 
 
    -webkit-animation: anim_fl_outer 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder:hover #line-02 .back-line-container-inner{ 
 
    -webkit-animation: anim_bl_inner 0.7s normal linear both 0.05s; 
 
} 
 

 
#icon-holder:hover #line-02 .back-line-container-outer{ 
 
    -webkit-animation: anim_bl_outer 0.7s normal linear both 0.05s; 
 
} 
 

 
#icon-holder:hover #line-02 .front-line-container-inner{ 
 
    -webkit-animation: anim_fl_inner 0.7s normal linear both 0.2s; 
 
} 
 

 
#icon-holder:hover #line-02 .front-line-container-outer{ 
 
    -webkit-animation: anim_fl_outer 0.7s normal linear both 0.2s; 
 
} 
 

 
#icon-holder:hover #line-03 .back-line-container-inner{ 
 
    -webkit-animation: anim_bl_inner 0.7s normal linear both 0.1s; 
 
} 
 

 
#icon-holder:hover #line-03 .back-line-container-outer{ 
 
    -webkit-animation: anim_bl_outer 0.7s normal linear both 0.1s; 
 
} 
 

 
#icon-holder:hover #line-03 .front-line-container-inner{ 
 
    -webkit-animation: anim_fl_inner 0.7s normal linear both 0.25s; 
 
} 
 

 
#icon-holder:hover #line-03 .front-line-container-outer{ 
 
    -webkit-animation: anim_fl_outer 0.7s normal linear both 0.25s; 
 
} 
 

 

 
#icon-holder:hover #line-04 .back-line-container-inner{ 
 
    -webkit-animation: anim_bl_inner 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder:hover #line-04 .back-line-container-outer{ 
 
    -webkit-animation: anim_bl_outer 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder:hover #line-04 .front-line-container-inner{ 
 
    -webkit-animation: anim_fl_inner 0.7s normal linear both 0.3s; 
 
} 
 

 
#icon-holder:hover #line-04 .front-line-container-outer{ 
 
    -webkit-animation: anim_fl_outer 0.7s normal linear both 0.3s; 
 
} 
 

 

 

 

 
#icon-holder #line-01 .back-line-container-inner{ 
 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder #line-01 .back-line-container-outer{ 
 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder #line-01 .front-line-container-inner{ 
 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear both; 
 
} 
 

 
#icon-holder #line-01 .front-line-container-outer{ 
 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear both; 
 
} 
 

 
#icon-holder #line-02 .back-line-container-inner{ 
 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.2s; 
 
} 
 

 
#icon-holder #line-02 .back-line-container-outer{ 
 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.2s; 
 
} 
 

 
#icon-holder #line-02 .front-line-container-inner{ 
 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.05s; 
 
} 
 

 
#icon-holder #line-02 .front-line-container-outer{ 
 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.05s; 
 
} 
 

 
#icon-holder #line-03 .back-line-container-inner{ 
 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.25s; 
 
} 
 

 
#icon-holder #line-03 .back-line-container-outer{ 
 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.25s; 
 
} 
 

 
#icon-holder #line-03 .front-line-container-inner{ 
 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.1s; 
 
} 
 

 
#icon-holder #line-03 .front-line-container-outer{ 
 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.1s; 
 
} 
 
    
 
#icon-holder #line-04 .back-line-container-inner{ 
 
    -webkit-animation: anim_rev_bl_inner 0.7s normal linear both 0.3s; 
 
} 
 

 
#icon-holder #line-04 .back-line-container-outer{ 
 
    -webkit-animation: anim_rev_bl_outer 0.7s normal linear both 0.3s; 
 
} 
 

 
#icon-holder #line-04 .front-line-container-inner{ 
 
    -webkit-animation: anim_rev_fl_inner 0.7s normal linear both 0.15s; 
 
} 
 

 
#icon-holder #line-04 .front-line-container-outer{ 
 
    -webkit-animation: anim_rev_fl_outer 0.7s normal linear both 0.15s; 
 
} 
 
    
 

 
@-webkit-keyframes anim_bl_inner { 
 
    0% {width: 160px; right: 40px;} 
 
    25%, 100% {width: 200px; right: 0;} 
 
} 
 
@-webkit-keyframes anim_bl_outer { 
 
    0%, 25% {width: 200px; opacity: 1;} 
 
    100% {width: 0; opacity: 0.5;} 
 
} 
 

 
@-webkit-keyframes anim_fl_inner { 
 
    0%, 75% {width: 200px; right: 0;} 
 
    100% {width: 160px; right: 40px;} 
 
} 
 
@-webkit-keyframes anim_fl_outer { 
 
    0% {width: 0; opacity: 0.5;} 
 
    75% {width: 160px; opacity: 1;} 
 
    100% {width: 200px; opacity: 1;} 
 
} 
 

 

 
@-webkit-keyframes anim_rev_bl_inner { 
 
    0%{width: 0; right: 0;} 
 
    25%, 75% {width: 200px; right: 0;} 
 
    100% {width: 160px; right: 40px;} 
 
} 
 
@-webkit-keyframes anim_rev_bl_outer { 
 
    0% {width: 0; opacity: 0.5;} 
 
    25%, 100% {width: 200px; opacity: 1;} 
 
} 
 

 
@-webkit-keyframes anim_rev_fl_inner { 
 
    0% {width: 160px; right: 40px;} 
 
    25%, 100% {width: 200px; right: 0;} 
 
} 
 
@-webkit-keyframes anim_rev_fl_outer { 
 
    0% {width: 200px; opacity: 1;} 
 
    25% {width: 160px; opacity: 1;} 
 
    100% {width: 0; opacity: 0.5;} 
 
}
<div id="icon-holder"> 
 
    <div id="line-01"> 
 
     <div class="back-line-container-outer"> 
 
      <div class="back-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
 
        <title>001</title> 
 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
     <div class="front-line-container-outer"> 
 
      <div class="front-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
 
        <title>002</title> 
 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="line-02"> 
 
     <div class="back-line-container-outer"> 
 
      <div class="back-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
 
        <title>001</title> 
 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
     <div class="front-line-container-outer"> 
 
      <div class="front-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
 
        <title>002</title> 
 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="line-03"> 
 
     <div class="back-line-container-outer"> 
 
      <div class="back-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
 
        <title>001</title> 
 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
     <div class="front-line-container-outer"> 
 
      <div class="front-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
 
        <title>002</title> 
 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div id="line-04"> 
 
     <div class="back-line-container-outer"> 
 
      <div class="back-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.73 13.92"> 
 
        <title>001</title> 
 
        <path d="M207.73,134.79v13.92l-11.19-1.04q-9.9-.915-19.84-.92H75v-10H176.7q9.93,0,19.84-.92Z" transform="translate(-75 -134.79)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
     <div class="front-line-container-outer"> 
 
      <div class="front-line-container-inner"> 
 
       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 132.65 17.84"> 
 
        <title>002</title> 
 
        <path d="M75.73,150.67V132.83h101.7q9.93,0,19.84.92l11.11,1.04v13.92l-11.11,1.04q-9.9.915-19.84.92Z" transform="translate(-75.73 -132.83)" fill="#231f20"/> 
 
       </svg> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

источник

2016-10-12 01:15:00 darrylyeo

+0

Так легко! Thnx!) – Sobakinet

+0

Рад помочь! - – darrylyeo

Смежные вопросы

 Смежные вопросы