Ejemplo diseño web start ward

Animaciones realizadas por https://animacionesweb.online ©
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="img-responsive" version="1.1" id="Capa_1" x="0px" y="0px" preserveAspectRatio="none" viewBox="0 0 1470 800 "><defs>
			
			
			<desc> Animaciones realizadas por https://animacionesweb.online © </desc>
			
			
 <style type="text/css"> .a476{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a476;
                transition-timing-function:;
				animation-fill-mode=backwards;
 				transform-style:preserve-3d
					}
						
				@keyframes a476  
						{
						0.1% {
		 
		transform: matrix3d(0.310673,0,0,0,0,0.310673,0,0,0,0,0.310673,0,688,-118,5651,1);
		 
	 }
						10% {
		
		transform: matrix3d(0.31067300000000003,0,0,0,0,0.31067300000000003,0,0,0,0,0.31067300000000003,0,688.5569805,107.45813,5651.8,1);
		 
	 }
						20% {
		 
		transform: matrix3d(0.2923,0.3485,0,0,-0.3485,0.2923,0,0,0,0,0.4549,0,780.414,243.4873,8273,1);
		 
	 }
   						30% {
		
		transform: matrix3d(0.5961,-0.1049,0,0,0.1049,0.5961,0,0,0,0,0.6055,0,787.8845,344.5539,11011,1);
		  
	 }
    					40% {
		
		transform: matrix3d(0.0001,0.6659,0,0,-0.6659,0.0001,0,0,0,0,0.6661,0,907,810,12112,1);
		 
	 }
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0.0001,0.6659,0,0,-0.6659,0.0001,0,0,0,0,0.6661,0,907,810,12112,1);
		 
	 }}.a477{
						animation-duration:29s;
						animation-delay:3s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a477;
                transition-timing-function:;
				animation-fill-mode=backwards;
 				transform-style:preserve-3d
					}
						
				@keyframes a477  
						{
						0.1% {
		 
		transform: matrix3d(0.3355,-0.1938,0,0,0.1938,0.3355,0,0,0,0,0.3874,0,681,152,4350,1);
		 
	 }
						10% {
		
		transform: matrix3d(0.9443,-0.3439,0,0,0.3439,0.9443,0,0,0,0,1.0048,0,364,862,11281,1);
		 
	 }
						
   						
    					
    	               
	  					
						
						
  						
  						 }.a478{
						animation-duration:29s;
						animation-delay:6s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a478;
                transition-timing-function:;
				animation-fill-mode=backwards;
 				transform-style:preserve-3d
					}
						
				@keyframes a478  
						{
						0.1% {
		 
		transform: matrix3d(0.616537,0.224386,0,0,-0.224386,0.616537,0,0,0,0,0.6561,0,706,280,2495,1);
		 
	 }
						10% {
		
		transform: matrix3d(1.09223,0.397513,0,0,-0.397513,1.09223,0,0,0,0,1.16232,0,94,763,4420,1);
		 
	 }
						
   						
    					
    	               
	  					
						
						
  						
  						 }.a479{
						animation-duration:29s;
						animation-delay:7s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a479;
                transition-timing-function:;
				animation-fill-mode=backwards;
 				transform-style:preserve-3d
					}
						
				@keyframes a479  
						{
						0.1% {
		 
		transform: matrix3d(0.558414,-0.468601,0,0,0.468601,0.558414,0,0,0,0,0.729,0,792,449,2264,1);
		 
	 }
						10% {
		
		transform: matrix3d(0.8993314000000001,-0.7546869,0,0,0.7546869,0.8993314000000001,0,0,0,0,1.174063,0,759.3676801,906.94618855,3645.4,1);
		 
	 }
						
   						
    					
    	               
	  					
						
						
  						
  						 }.a482{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a482;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a482  
						{
						0.1% {
		 
		transform: matrix3d(-0.3702,0.0653,0,0,0.0653,0.3702,0,0,0,0,-0.3759,0,1709,1,6012,1);
		 
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-1.5701,0.0003,0,0,0.0003,1.5701,0,0,0,0,-1.5702,0,1570,-85,25113,1);
		 
	 }}.a483{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a483;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a483  
						{
						0.1% {
		 
		transform: matrix3d(-0.685017,0.249318,0,0,0.249318,0.685017,0,0,0,0,-0.729,0,372,-242,653,1);
		 
	 }
						
						
   						30% {
		
		transform: matrix3d(-0.685017,0.249318,0,0,0.249318,0.685017,0,0,0,0,-0.729,0,372,-77,653,1);
		  
	 }
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-1.2914,0,0,0,0,1.2914,0,0,0,0,-1.29151,0,603.6409000000001,-50.97880000000001,1156.1000000000001,1);
		 
	 }}.a484{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a484;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a484  
						{
						0.1% {
		 
		transform: matrix3d(0.407084,0.34161,0,0,-0.34161,0.407084,0,0,0,0,0.531441,0,472,740,2441,1);
		 
	 }
						
						20% {
		 
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		 
	 }
   						30% {
		
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		  
	 }
    					40% {
		
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		 
	 }
    	               50% {
		
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		 
	 }
	  					60% {
		 
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
	 
	 }
						70% {
		 
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		 
	 }
						
  						
  						 100% {
		 
		transform: matrix3d(0.447792,0.375771,0,0,-0.375771,0.447792,0,0,0,0,0.584585,0,-162,428,2685,1);
		 
	 }}.a485{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a485;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a485  
						{
						0.1% {
		 
		transform: matrix3d(-0.24898,0.29681,0,0,0.29681,0.24898,0,0,0,0,-0.38742,0,-49,521,489,1);
		 
	 }
						
						
   						
    					
    	               50% {
		
		transform: matrix3d(-0.64579,0.769848,0,0,0.769848,0.64579,0,0,0,0,-1.00487,0,1769,356,1266,1);
		 
	 }
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(-0.64579,0.769848,0,0,0.769848,0.64579,0,0,0,0,-1.00487,0,1769,356,1266,1);
		 
	 }}.a486{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a486;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a486  
						{
						0.1% {
		 
		transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
		 
	 }
						
						
   						
    					
    	               
	  					
						
						
  						
  						 100% {
		 
		transform: matrix3d(0.649539,0,0,0,0,0.649539,0,0,0,0,0.649539,0,78,224,921,1);
		 
	 }}.a487{
						animation-duration:29s;
						animation-delay:0s;
					  animation-iteration-count: infinite;
					  animation-direction:normal;
				animation-play-state:running;
				animation-name:a487;
                transition-timing-function:;
				animation-fill-mode:backwards;
 				transform-style:preserve-3d;
					}
						
				@keyframes a487  
						{
						0.1% {
		 
		transform: matrix3d(0.381532,0.0672562,0,0,-0.0672562,0.381532,0,0,0,0,0.38742,0,1473,493,5627,1);
		 
	 }
						
						
   						
    					
    	               
	  					60% {
		 
		transform: matrix3d(0.709528,-0.258205,0,0,0.258205,0.709528,0,0,0,0,0.754933,0,1025,794,10965,1);
	 
	 }
						
						
  						
  						 100% {
		 
		transform: matrix3d(0.709528,-0.258205,0,0,0.258205,0.709528,0,0,0,0,0.754933,0,1025,794,10965,1);
		 
	 }}
	  #b490	 foreignObject{
	position:absolute; z-index:-1;
	 }
	  
	  
	  
	  </style> </defs><g id="todo" style="transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,1)">




			<g id="b490"> <foreignObject id="Spaceship-33411g.mp41589889731" requiredExtensions="http://www.w3.org/1999/xhtml " width="1400" x="0" y="0" height="786" style="transform:matrix3d(1.31769,0,0,0,0,1.089,0,0,0,0,1.089,0,-236.85300000000007,-35.90700000000004,864.6,1)">
				<g xmlns="http://www.w3.org/1999/xhtml">
                <video autoplay="autoplay" loop="loop" muted="muted" preload="auto" class="a490" width="1400" height="786">
                <source src="https://animacionesweb.online/videos/Spaceship-33411g.mp4" type="video/mp4" />
                </video>
				</g>
            </foreignObject></g>




			<g id="b476"> <image id="nave6.png1589767240" style="transform: matrix3d(0.5961,-0.1049,0,0,0.1049,0.5961,0,0,0,0,0.6055,0,787.8845,344.5539,11011,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave6.png" class="a476" width="173" height="180" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b477"> <image id="disparos.png1589767546" style="transform: matrix3d(0.9443,-0.3439,0,0,0.3439,0.9443,0,0,0,0,1.0048,0,364,862,11281,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/disparos.png" class="a477" width="133" height="64" x="0" y="0"/></g>




			<g id="b478"> <image id="disparos.png1589767733" style="transform: matrix3d(1.09223,0.397513,0,0,-0.397513,1.09223,0,0,0,0,1.16232,0,94,763,4420,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/disparos.png" class="a478" width="133" height="64" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b479"> <image id="disparos.png1589767854" style="transform:matrix3d(0.8993314000000001,-0.7546869,0,0,0.7546869,0.8993314000000001,0,0,0,0,1.174063,0,759.3676801,906.94618855,3645.4,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/disparos.png" class="a479" width="133" height="64" x="0" y="0"/></g>




			<g id="b482"> <image id="Sin-título-2.png1589830983" style="transform: matrix3d(-0.4045,-0.1472,0,0,-0.1472,0.4045,0,0,0,0,-0.4305,0,1815,113,4214,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/Sin-título-2.png" class="a482" width="700" height="459" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b483"> <image id="nave1.png1589836194" style="transform: matrix3d(0.45,0.7794,0,0,-0.7794,0.45,0,0,0,0,0.9,0,242,-186,232,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave1.png" class="a483" width="465" height="257" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b484"> <image id="nave2.png1589837884" style="transform: matrix3d(0.2657,0.4602,0,0,-0.4602,0.2657,0,0,0,0,0.5314,0,-87,309,2441,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave2.png" class="a484" width="413" height="209" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b485"> <image id="nave3.png1589838034" style="transform: matrix3d(-0.24898,0.29681,0,0,0.29681,0.24898,0,0,0,0,-0.38742,0,-49,521,489,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave3.png" class="a485" width="450" height="290" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b486"> <image id="nave4.png1589838229" style="transform: matrix3d(0.1809,0.1045,0.0000,0.0000,-0.1045,0.1809,0.0000,0.0000,0.0000,0.0000,0.2089,0.0000,410.8993,233.2177,5212.0000,1.0000)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave4.png" class="a486" width="450" height="337" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b487"> <image id="nave5.png1589839037" style="transform: matrix3d(0.381532,0.0672562,0,0,-0.0672562,0.381532,0,0,0,0,0.38742,0,1473,493,5627,1)" xlink:href="https://animacionesweb.online/imagenes/imagenesclientes/nave5.png" class="a487" width="549" height="445" x="0" y="0" stroke-width="" stroke="none"/></g>




			<g id="b491"> <foreignObject id="Nebula-6044.mp41589889934" requiredExtensions="http://www.w3.org/1999/xhtml " width="1440" x="0" y="0" height="1080" style="transform:matrix3d(1.1,0,0,0,0,1.1,0,0,0,0,1.1,0,-57.000000000000114,-204,0,1)" opacity="0.4">
				<g xmlns="http://www.w3.org/1999/xhtml">
                <video autoplay="autoplay" loop="loop" muted="muted" preload="auto" class="a491" width="1440" height="1080">
                <source src="https://animacionesweb.online/videos/Nebula-6044.mp4" type="video/mp4" />
                </video>
				</g>
            </foreignObject></g> 



</g>                     
				  
               
               	 

  
 	 
	  



                </svg>

Deja un comentario