Difference between revisions of "Team:Uppsala/Composite Part"

(Undo revision 375013 by Mk3johnson (talk))
Line 12: Line 12:
 
<title>SVG Stroke Animation</title>
 
<title>SVG Stroke Animation</title>
 
<style type="text/css">
 
<style type="text/css">
     html{
+
      
        margin:0;
+
        padding:0;
+
        width:100%;
+
    }
+
 
     .parallax{
 
     .parallax{
 
  background-image: url("https://static.igem.org/mediawiki/2018/a/a6/T--Uppsala--UnaGPotentialBackground.png");
 
  background-image: url("https://static.igem.org/mediawiki/2018/a/a6/T--Uppsala--UnaGPotentialBackground.png");
 
}
 
}
 
      
 
      
    body{
 
        margin: 0;
 
        padding: 0;
 
        width: 100%;
 
        text-align: center;
 
        background: url(https://static.igem.org/mediawiki/2018/5/50/T--Uppsala--horses.jpg) no-repeat 50% 50%;
 
        background-size: cover;
 
        height:100vh;
 
        display: table;
 
    }
 
   
 
    .svg-wrapper{
 
        position:absolute;
 
        top:45vh;
 
        left:50%;
 
        transform: translate(-50%, -50%);
 
        width: 60%;
 
    }
 
   
 
    path{
 
        stroke: red;
 
        fill: #fff;
 
        stroke-dasharray:2000 ;
 
        opacity: 10;
 
        animation: animate 3s cubic-bezier(0,.21,1,.47) ;
 
    }
 
 
      
 
      
    @keyframes animate{
 
        0% {
 
            opacity: 0;
 
            fill: none;
 
            stroke-dashoffset:2000;
 
        }
 
       
 
        30% {
 
            opacity: 10;
 
            fill: none;
 
            stroke-dashoffset:2000;
 
        }
 
       
 
            90% {
 
           
 
            fill: rgba(255,255,255,0);
 
           
 
            }
 
           
 
        100% {
 
            opacity: 10;
 
            fill: rgba(255,255,255,1);
 
            stroke-dashoffset:0;
 
            }
 
    }
 
 
      
 
      
 
</style>
 
</style>

Revision as of 20:14, 16 October 2018





SVG Stroke Animation