Commit 765d5342 authored by NERUSU PRANEETH's avatar NERUSU PRANEETH

Added rain animation with ReactRain animation

parent c493815b
......@@ -13,18 +13,23 @@ import Mountain from './components/Mountain';
import Sun from './components/Sun';
import Rain from './components/Rain';
import Bird from './components/images/Bird.gif';
import A1up from './components/A1up';
import ReactRain from 'react-rain-animation';
import "react-rain-animation/lib/style.css";
class App extends Component {
render() {
return (
<div id="hero" className="Cycle" style={{backgroundImage:'url(' + Hill + ')'}}>
<ReactRain numDrops="500"></ReactRain>
<Container className='Container'>
<Row justify='start'>
<Col xs={4} >
......@@ -43,6 +48,7 @@ class App extends Component {
<Row>
<Col xs={0.4}>
<Sun />
</Col>
......@@ -52,7 +58,7 @@ class App extends Component {
<Cloud2 />
</Col>
<Col xs={1.}>
<Col xs={1}>
<Cloud2 />
<Cloud />
</Col>
......@@ -133,11 +139,12 @@ class App extends Component {
<Button className="B1"></Button>
</Col>
</Row>
</Container>
</div>
);
......
import React, { Component } from 'react';
//import logo from './logo.svg';
import a1up from './images/a1up.png';
class A1up extends Component {
render() {
return (
<div >
<header >
<img src={a1up} className="A1up" />
</header>
</div>
);
}
}
export default A1up;
\ No newline at end of file
......@@ -5,7 +5,7 @@
.Body{
background-color: #FFBD00;
background-color: #FFBD00;
text-align:left;
}
......@@ -73,6 +73,10 @@ float:right;
text-align: center;
}
.A1up:hover{
float: right;
}
.Sun {
animation: App-logo-spin infinite 20s linear;
height: 20vmin;
......@@ -98,3 +102,35 @@ float:right;
body {
background:#0D343A;
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000) );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%);
overflow:hidden;}
.drop {
background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6)) );
background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
width:1px;
height:89px;
position: absolute;
bottom:200px;
-webkit-animation: fall .63s linear infinite;
-moz-animation: fall .63s linear infinite;
}
/* animate the drops*/
@-webkit-keyframes fall {
to {margin-top:900px;}
}
@-moz-keyframes fall {
to {margin-top:900px;}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment