From 24c9d4d2a9f0b12119128dcf461d5774acf6c8c6 Mon Sep 17 00:00:00 2001 From: Krishanu Chakraborty Date: Sat, 8 Oct 2022 13:17:52 +0530 Subject: [PATCH 1/2] Envelope Animation Added --- Envelope Animation/index.html | 17 ++++ Envelope Animation/style.css | 166 ++++++++++++++++++++++++++++++++++ 2 files changed, 183 insertions(+) create mode 100644 Envelope Animation/index.html create mode 100644 Envelope Animation/style.css diff --git a/Envelope Animation/index.html b/Envelope Animation/index.html new file mode 100644 index 0000000..1e4bdb4 --- /dev/null +++ b/Envelope Animation/index.html @@ -0,0 +1,17 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/Envelope Animation/style.css b/Envelope Animation/style.css new file mode 100644 index 0000000..cea5062 --- /dev/null +++ b/Envelope Animation/style.css @@ -0,0 +1,166 @@ +body { + background: #323641; +} + +.letter-image { + position: absolute; + top: 50%; + left: 50%; + width: 200px; + height: 200px; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + cursor: pointer; +} + +.animated-mail { + position: absolute; + height: 150px; + width: 200px; + -webkit-transition: .4s; + -moz-transition: .4s; + transition: .4s; + + .body { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 0 0 100px 200px; + border-color: transparent transparent #e95f55 transparent; + z-index: 2; + } + + .top-fold { + position: absolute; + top: 50px; + width: 0; + height: 0; + border-style: solid; + border-width: 50px 100px 0 100px; + -webkit-transform-origin: 50% 0%; + -webkit-transition: transform .4s .4s, z-index .2s .4s; + -moz-transform-origin: 50% 0%; + -moz-transition: transform .4s .4s, z-index .2s .4s; + transform-origin: 50% 0%; + transition: transform .4s .4s, z-index .2s .4s; + border-color: #cf4a43 transparent transparent transparent; + z-index: 2; + } + + .back-fold { + position: absolute; + bottom: 0; + width: 200px; + height: 100px; + background: #cf4a43; + z-index: 0; + } + + .left-fold { + position: absolute; + bottom: 0; + width: 0; + height: 0; + border-style: solid; + border-width: 50px 0 50px 100px; + border-color: transparent transparent transparent #e15349; + z-index: 2; + } + + .letter { + left: 20px; + bottom: 0px; + position: absolute; + width: 160px; + height: 60px; + background: white; + z-index: 1; + overflow: hidden; + -webkit-transition: .4s .2s; + -moz-transition: .4s .2s; + transition: .4s .2s; + + .letter-border { + height: 10px; + width: 100%; + background: repeating-linear-gradient( + -45deg, + #cb5a5e, + #cb5a5e 8px, + transparent 8px, + transparent 18px + ); + } + + .letter-title { + margin-top: 10px; + margin-left: 5px; + height: 10px; + width: 40%; + background: #cb5a5e; + } + .letter-context { + margin-top: 10px; + margin-left: 5px; + height: 10px; + width: 20%; + background: #cb5a5e; + } + + .letter-stamp { + margin-top: 30px; + margin-left: 120px; + border-radius: 100%; + height: 30px; + width: 30px; + background: #cb5a5e; + opacity: 0.3; + } + } +} + +.shadow { + position: absolute; + top: 200px; + left: 50%; + width: 400px; + height: 30px; + transition: .4s; + transform: translateX(-50%); + -webkit-transition: .4s; + -webkit-transform: translateX(-50%); + -moz-transition: .4s; + -moz-transform: translateX(-50%); + + border-radius: 100%; + background: radial-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.0), rgba(0,0,0,0.0)); +} + + .letter-image:hover { + .animated-mail { + transform: translateY(50px); + -webkit-transform: translateY(50px); + -moz-transform: translateY(50px); + } + + .animated-mail .top-fold { + transition: transform .4s, z-index .2s; + transform: rotateX(180deg); + -webkit-transition: transform .4s, z-index .2s; + -webkit-transform: rotateX(180deg); + -moz-transition: transform .4s, z-index .2s; + -moz-transform: rotateX(180deg); + z-index: 0; + } + + .animated-mail .letter { + height: 180px; + } + + .shadow { + width: 250px; + } + } \ No newline at end of file From af6b80ee72b4cb7616bc5441c3e0a96df69f7c2c Mon Sep 17 00:00:00 2001 From: Krishanu Chakraborty Date: Sat, 8 Oct 2022 13:22:11 +0530 Subject: [PATCH 2/2] Submarine Animation --- Submarine Animation/index.html | 19 ++ Submarine Animation/style.css | 379 +++++++++++++++++++++++++++++++++ 2 files changed, 398 insertions(+) create mode 100644 Submarine Animation/index.html create mode 100644 Submarine Animation/style.css diff --git a/Submarine Animation/index.html b/Submarine Animation/index.html new file mode 100644 index 0000000..175b429 --- /dev/null +++ b/Submarine Animation/index.html @@ -0,0 +1,19 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Submarine Animation/style.css b/Submarine Animation/style.css new file mode 100644 index 0000000..ba8e5c8 --- /dev/null +++ b/Submarine Animation/style.css @@ -0,0 +1,379 @@ +$color1: #306D85; +$color2: #D93A54; + +body { + background-color: $color1; + + +} + +*, *:before, *:after { + box-sizing: border-box; +} + + +.sea { + margin: 40px auto 0 auto; + overflow: hidden; + + .bubble { + position: absolute; + width: 7px; + height: 7px; + border-radius: 50%; + background-color: lighten($color1, 25%); + opacity: 0.9; + animation: bubble1-h-movement 1s ease-in infinite, bubble1-v-movement 300ms ease-in-out infinite alternate, bubble-scale-movement 300ms ease-in-out infinite alternate; + + &:after { + position: absolute; + content: ""; + width: 7px; + height: 7px; + border-radius: 50%; + background-color: lighten($color1, 25%); + opacity: 0.9; + + } + &:after { + top: -20; + left:100px; + width: 9px; + height: 9px; + } + + + } + + .circle-wrapper { + position: relative; + background: linear-gradient(darken($color1, 3%), darken($color1, 12%)); + width:300px; + height:300px; + margin: 10px auto 0 auto; + overflow: hidden; + z-index: 0; + border-radius:50%; + padding: 0 50px 0 50px; + border: 6px solid lighten($color1, 10%); + + } + + .submarine-wrapper { + height: 300px; + width: 300px; + padding: 30px 50px 30px 150px; + margin: 0 auto 0 auto; + animation: diving 3s ease-in-out infinite, diving-rotate 3s ease-in-out infinite; + + .submarine-body { + + width: 150px; + height: 80px; + position: absolute; + margin-top: 50px; + left: 25px; + background-color: $color2; + border-radius: 40px; + background: linear-gradient($color2, darken($color2, 10%)); + + .light { + position:absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 40px 150px 40px; + border-color: transparent transparent lighten($color1,5%) transparent; + + transform: rotate(-50deg); + top:40px; + left:99%; + + &:after { + content:""; + position: absolute; + width: 20px; + height:13px; + border-radius:5px; + background-color:darken($color2, 5%); + margin-left:-10px; + } + + } + + .window { + width: 37px; + height: 37px; + position: absolute; + margin-top: 23px; + right: 18px; + background: linear-gradient(darken($color1, 13%), darken($color1, 18%)); + border-radius: 50%; + border: 3px solid $color2; + + &:after { + content: ""; + position: absolute; + margin-top:3px; + margin-left:3px; + width: 25px; + height: 25px; + border-radius: 50%; + background-color: transparent; + opacity:0.8; + border-top:3px solid white; + transform:rotate(-45deg); + } + } + + .engine { + width: 30px; + height: 30px; + position: absolute; + margin-top: 32px; + left: 53px; + background-color: darken($color2, 10%); + border-radius: 50%; + border: 5px solid $color2; + + &:after, &:before { + position: absolute; + content: ""; + border-radius: 2px; + background-color: white; + animation:spin 900ms linear infinite; + opacity:0.8; + } + &:after { + top:8px; + width: 20px; + height: 4px; + + } + &:before { + left:8px; + width: 4px; + height: 20px; + + } + } + } + + .helix { + width: 30px; + height: 70px; + position: absolute; + margin-top: 55px; + left:0; + background-color: $color2; + border-radius: 7px; + background: linear-gradient($color2, darken($color2, 10%)); + + &:after { + content: ""; + position: absolute; + margin-top:5px; + margin-left:7px; + width: 17px; + height: 60px; + border-radius: 3px; + background-color: transparent; + opacity:0.8; + background: linear-gradient( + to bottom, + $color2, + $color2 50%, + lighten($color2, 15%) 50%, + lighten($color2, 15%) + ); + background-size: 100% 20px; + animation:helix-movement 110ms linear infinite; + + } + } + + + .hat { + width: 65px; + height: 25px; + position: absolute; + margin-top: 26px; + left:70px; + background-color: $color2; + border-radius: 10px 10px 0 0; + background: linear-gradient($color2, darken($color2, 3%)); + + .periscope { + position: absolute; + width: 7px; + height: 20px; + background-color: $color2; + margin-top: -27px; + margin-left:32px; + border-radius:5px 5px 0 0; + + &:after, &:before { + content: ""; + position: absolute; + width: 15px; + height: 7px; + border-radius: 5px; + background-color: $color2; + } + } + + .leds-wrapper { + width: 53px; + height: 13px; + position: relative; + top:7px; + left:7px; + background-color: $color2; + border-radius: 10px; + background: linear-gradient(darken($color2, 12%), darken($color2, 16%)); + + .leds { + position: absolute; + margin-top:4px; + margin-left:7px; + width: 5px; + height: 5px; + border-radius: 50%; + background-color: white; + animation:leds-off 500ms linear infinite; + + &:after, &:before { + content: ""; + position: absolute; + width: 5px; + height: 5px; + border-radius: 50%; + background-color: white; + } + &:after { + margin-top:0px; + margin-left:17px; + } + &:before { + margin-top:0px; + margin-left:34px; + } + } + } + } + + + } +} + + +@keyframes spin { + 100% { + transform:rotate(360deg); + } +} + +@keyframes leds-off { + 100% { + opacity:0.3; + } +} + +@keyframes helix-movement { + 100% { + background: linear-gradient( + to bottom, + lighten($color2, 15%) 50%, + lighten($color2, 15%), + $color2, + $color2 50% + ); + background-size: 100% 20px; + } +} + + +@keyframes diving { + 0% { + margin-top:5px; + } + 50% { + margin-top:15px; + } + + 100% { + margin-top:5px; + } +} + +@keyframes diving-rotate { + 0% { + transform:rotate(0deg); + } + 50% { + transform:rotate(3deg); + } + 75% { + transform:rotate(-2deg); + } + 100% { + transform:rotate(0deg); + } +} + + @keyframes bubble1-h-movement { + 0% { + margin-left: 80%; + } + 100% { + margin-left: -100%; + } + } + + @keyframes bubble2-h-movement { + 0% { + margin-left: 65%; + } + 100% { + margin-left: -5%; + } + } + + @keyframes bubble1-v-movement { + 0% { + margin-top: 115px; + } + 100% { + margin-top:160px; + } + } + + @keyframes bubble2-v-movement { + 0% { + margin-top: 115px; + } + 100% { + margin-top:90px; + } + } + + @keyframes bubble-scale-movement { + 0% { + transform: scale(1.4); + } + 100% { + transform: scale(0.9); + } + } + + @keyframes light-movement { + 0% { + transform: rotate(-40deg); + } + 50% { + transform: rotate(-70deg); + } + 100% { + transform: rotate(-40deg); + } + }