Skip to content
Permalink
Browse files

two more particles, layout tweaks

  • Loading branch information
mdr19002 committed Mar 8, 2020
1 parent 96dcee1 commit 57440606c7f816e91aca4101be13278641a651b8
Showing with 51 additions and 17 deletions.
  1. +47 −16 css/midterm.css
  2. +4 −1 midterm.html
@@ -1,13 +1,13 @@
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/
* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme
/* main.css 2.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
==========================================================================
Base styles: opinionated defaults
========================================================================== */

@@ -113,15 +113,17 @@ header {
background-color: white;
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center;
}

ul, ol {
text-align: left;
margin-left: 100px;
margin-left: 10%;
margin-right: 10%;
}

.copy {
padding: 10px 50px;
display: flex;
flex-direction: column;
justify-content: space-around;
@@ -144,28 +146,26 @@ ul, ol {
height: 100%;
grid-row: 1/4;
grid-column: 1/2;
position: relative;
}

.particle-temp {
position: absolute;
border-radius: 50%;
background: white;
margin: 15px;
animation:
blur_fade 20s ease 0s infinite,
circle 5s linear 0s infinite;
}

@keyframes blur_fade {
from {
0% {
height: 2px;
width: 2px;
opacity: 0;
}
20% {
filter: blur(0.2);
opacity: 0.8;
opacity: 0.3;
}
to {
100% {
height: 40px;
width: 40px;
filter: blur(3px);
@@ -174,16 +174,47 @@ ul, ol {
}

@keyframes circle {
from {
0% {
transform-origin: -10px -10px;
transform: rotate(0deg);
}
to {
100% {
transform-origin: -10px -10px;
transform: rotate(360deg);
}
}

.particle-temp:nth-child(1) {
top: 50px;
left: 50px;
animation-delay: 0s;
background: white;
animation:
blur_fade 20s ease infinite,
circle 5s linear infinite;
}

.particle-temp:nth-child(2) {
top: 100px;
left: 50px;
background: white;
animation:
blur_fade 20s ease infinite,
circle 6.5s linear infinite;
animation-delay: -8s;
}

.particle-temp:nth-child(3) {
top: 200px;
left: 50px;
animation-delay: 8s;
background: white;
animation:
blur_fade 20s ease infinite,
circle 8s linear infinite;
}


#subtle {
background-color: pink;
}
@@ -33,6 +33,8 @@ <h1>Particle Animation</h1>
<div class="particle-wrapper" id="subtle">
<div class="particle-container">
<div class="particle-temp"></div>
<div class="particle-temp"></div>
<div class="particle-temp"></div>
</div>
<p>You can use animated particles to create a subtle background effect...</p>
</div>
@@ -60,7 +62,7 @@ <h1>Particle Animation</h1>
</ul>
</div>

<div> <!--probably dont need this wrapper-->
<div class="particle-wrapper">
<div class="particle-container" id="rain">

</div>
@@ -76,6 +78,7 @@ <h1>Particle Animation</h1>
<div class="particle-container" id="birds">

</div>
<p>(particle gallery here)</p>
</div>

<div class="copy" id="info2">

0 comments on commit 5744060

Please sign in to comment.
You can’t perform that action at this time.