Difference between revisions of "Team:Uppsala/Parts"

Line 11: Line 11:
 
<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%;
+
−
    }
+
−
   
+
−
    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>
Line 168: Line 111:
  
 
<groupparts>iGEM18 Uppsala</groupparts>
 
<groupparts>iGEM18 Uppsala</groupparts>
−
<html>
+
 
−
</div>
+
  
  

Revision as of 16:10, 13 October 2018




SVG Stroke Animation