Start Coding
All
Accordion
Buttons
Cards
Carousel
Css Animation
Hexagons
Hover
Layout
Loaders
Menu
Navigation
Slider
Tables
Wave
All
CSS
Border animation ?
Hover me to find out !
=>
CSS Border animation ?
Hover me to find out !
body { text-align:center; } header { display:inline-table; vertical-align:middle; margin:1em ; padding:0.5em 1em; background: linear-gradient( to right, transparent 20%, turquoise 20%, turquoise 80%, transparent 80% ) bottom no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) right 300% no-repeat, linear-gradient( to right, turquoise 0%, turquoise 100% ) 9000% 0 no-repeat, linear-gradient( to top, turquoise 0%, turquoise 300% ) left 9000% no-repeat ; transition:background-size 2s ease-in; } header, header ~ header:hover { background-size: 100% 8px, 3px 0, 3px 3px, 3px 0; } header:hover, header ~ header { background-size: 200% 3px , 3px 100%, 100% 3px, 3px 100%; transition:background-size 2s ease-in-out; } span { font-size:4em; display:inline-block; vertical-align:middle; background:turquoise; border-radius:100%; box-shadow:0 0 5px; }
74
Border Animation
By:
rald_dev
Loading
*, html,body{ padding:0px; margin:0px; box-sizing:border-box; font-family:'Poppins', sans-serif; } ::selection{ background-color:#2d98da; color:#fff; } body{ background-color:#227093; display:flex; justify-content:center; align-items:center; width:100%; min-height:100vh; } .Box{ position:relative; width:150px; height:150px; border:3px solid rgba(255,255,255,.2); border-radius:50%; text-align:center; line-height:150px; color:#57beec; font-size:20px; box-shadow:0px 0px 10px rgba(0,0,0,.2); font-weight:bold; } .Box:before{ content:''; position:absolute; top:-3px; left:-3px; width:100%; height:100%; background-color:transparent; border:3px solid transparent; border-top:3px solid #57beec; border-right:3px solid #57beec; border-radius:50%; transform:rotate(0deg); animation:SpanLoading 2s linear infinite; } .Box span{ position:absolute; top: 50%; left:50%; width:50%; height:3px; background-color:transparent; transform-style:preserve-3d; transform-origin:left; transform:rotate(42deg); animation:Loading 2s linear infinite; } .Box span:before{ content:''; position:absolute; width:15px; height:15px; border-radius:50%; background-color:#57beec; right:-7px; bottom:-7px; box-shadow:0px 0px 10px #57beec; } @keyframes Loading{ 0%{ transform:rotate(42deg); } 100%{ transform:rotate(402deg); } } @keyframes SpanLoading{ 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }
74
Glowing Loader Ring Animation
By:
rald_dev
We build
websites
brands
experiences
body{ margin: 0; padding: 0; font-family: 'Abril Fatface', serif; } .slider{ height: 600px; background-color: #293132; text-align: center; position: relative; animation: slideColor 10s forwards infinite; } .caption{ line-height: 100px; font-size: 60px; color: #fff; position: relative; top: 50%; transform: translateY(-50%); text-shadow: 0px 5px 5px rgba(0,0,0,.25); margin-left: -300px; } .text-box{ display: inline-block; position: relative; } .text-box div{ display: inline-block; position: absolute; top: -200px; transform: rotateX(-90deg); opacity: 0; text-shadow: 0px 5px 5px rgba(0,0,0,.25); animation-timing-function: ease; } .text-box div:nth-child(1){ animation: rollDown 10s forwards infinite; } .text-box div:nth-child(2){ animation: rollDown2 10s forwards infinite; } .text-box div:nth-child(3){ animation: rollDown3 10s forwards infinite; } @keyframes rollDown { 0%{ top: -200px; transform: rotateX(-90deg); } 11%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 22%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 33%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes rollDown2 { 33%{ top: -200px; transform: rotateX(-90deg); } 44%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 55%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 66%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes rollDown3 { 66%{ top: -200px; transform: rotateX(-90deg); } 77%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 88%{ top: -74px; transform: rotateX(0deg); opacity: 1; } 99%{ top: 50px; transform: rotateX(30deg); opacity: 0; } } @keyframes slideColor{ 0%{ background-color: #387780; } 33%{ background-color: #3f88c5; } 66%{ background-color: #588b8b; } 100%{ background-color: #387780; } }
73
Rolling text animation
By:
rald_dev
body{ margin:0; padding:0; background:#262626; } .pulse{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:200px; height:200px; background:#58ea00; border-radius:50%; } .pulse .fas{ color:white; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(90deg); font-size:7em; } .pulse:before, .pulse:after{ content:''; display:block; position:absolute; border:50%; border:1px solid #58ea00; top:-20px; left:-20px; right:-20px; bottom:-20px; border-radius:50%; animation:animtephone 1.5s linear infinite; opacity:0; } .pulse:after{ animation-delay:0.5s; } @keyframes animtephone{ 0%{ transform:scale(0.5); opacity:0; } 50%{ opacity:1; } 100%{ transform:scale(1.2); opacity:0; } }
73
Ringing call pluse animation
By:
rald_dev
Menu
Programming
C++
C#
Java
Web Development
Javascript
PHP
Ruby
Python
OS
Windows
Macintosh
Linux
Projects
Android
iOS
Web
Windows
About
*{ padding:0; margin:0; box-sizing:border-box; } .wrapper{ min-height: calc(100vh - 70px); width:100%; position: relative; } html{ height: 100%; } body{ height:100%; background:#ddd; } h2{ padding:40px; background:#112233; color:#f0f1f5; font-family: big john; text-align: center; font-size:30pt; letter-spacing: 15px; } .navigationDesktop{ background:#fc575e; } nav { height:40px; width:560px; margin:0 auto; text-align: center; text-transform: uppercase; } nav a{ display:block; text-decoration: none; font-family: monospace; font-weight: bold; font-size:13pt; color:#112233; } nav a:hover{ background:#223433; color:#f0f1f5; } nav ul{ list-style: none; } nav ul li{ float:left; width:140px; height:40px; line-height: 40px; background:#fc575e; } nav ul ul li{ position: relative; display:none; } nav ul ul ul{ display:none; } nav ul li:hover ul li{ display: block; animation: navmenu 600ms forwards; } @keyframes navmenu{ 0%{ opacity:0; top:-10px; } 100%{ opacity:0.9; top:0px; } } nav ul ul li:hover ul{ display:block; position:absolute; width:140px; left:140px; top:0px; } article{ padding:10px; font-family: arial; } footer{ height: 70px; border-top:2px solid #fc575e; padding:20px; width: 100%; text-align: center; background:#112233; color:#fff; font-family: sans-serif; font-weight: bold; font-size:11pt; text-transform: uppercase; }
73
Navigation Menu with Footer Menu
By:
rald_dev
ul { margin-left: 20px; margin-top: 20px; } li { float: left; width: 16px; height: 64px; background: #aeb5da; border: 1px solid #8490c6; box-sizing: border-box; margin-right:8px; opacity: 0.2; } li:nth-child(1) { animation-name: anim; animation-duration: .9s; animation-timing-function: linear; animation-iteration-count: infinite; } li:nth-child(2) { animation-name: anim; animation-duration: .9s; animation-delay: .3s; animation-timing-function: linear; animation-iteration-count: infinite; } li:nth-child(3) { animation-name: anim; animation-duration: .9s; animation-delay: .6s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes anim { from { opacity: 1; transform: scale(1.1); } to { opacity: 0.2; transform: scale(1); } }
73
Facebook Loading Animation
By:
rald_dev
body{ background: #333642; } .box-canvas{ position: relative; margin: auto; display: block; margin-top: 8%; margin-bottom: 8%; width: 250px; height:600px; } .cog-one { --cog-color: #898888; --cog-accent-color: #A5A2A2; --cog-inner-size: 30px; --cog-outer-size: 50px; --start-rotation: 360deg; --end-rotation: 0deg; } .cog-two { --cog-color: #A16036; --cog-accent-color: #BC7F60; --cog-inner-size: 15px; --cog-outer-size: 40px; --start-rotation: 16deg; --end-rotation: 376deg; left: 120px; top: 110px; transform: rotate(var(--start-rotation)); } .cog-three { --cog-color: #F1B72E; --cog-accent-color: #FFD100; --cog-inner-size: 20px; --cog-outer-size: 50px; --start-rotation: 300deg; --end-rotation: -60deg; left: 33px; top: 210px; transform: rotate(var(--start-rotation)); } .cog { position: absolute; width: var(--cog-inner-size); height: var(--cog-inner-size); background: transparent; border-radius: 50%; border: var(--cog-outer-size) solid var(--cog-color); animation: 5s cogRotate infinite linear; } @keyframes cogRotate { 0% { transform: rotate(var(--start-rotation)); } 100% { transform: rotate(var(--end-rotation)) } } /* Inner circle accent */ .cog::before { content: ''; position: absolute; width: calc(var(--cog-inner-size) + 10px); height: calc(var(--cog-inner-size) + 10px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Outer circle accent */ .cog::after { content: ''; position: absolute; width: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); height: calc(var(--cog-inner-size) + var(--cog-outer-size) * 2 - 20px); border: 3px solid var(--cog-accent-color); border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); } .teeth.vertical { position: absolute; left: 50%; transform: translateX(-50%); } /* Top and bottom teeth */ .cog-one .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; top: -70px; } .cog-two .teeth.vertical { width: 15px; height: 125px; top: -55px; background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); } .cog-three .teeth.vertical { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; top: -70px; } .teeth.vertical::after { content: ''; position: absolute; transform:rotate(45deg); } /* Top right and bottom left teeth */ .cog-one .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 170px; width: 25px; } .cog-two .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); width: 15px; height: 125px; } .cog-three .teeth.vertical::after { background: linear-gradient(to bottom, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 160px; width: 25px; } .teeth.horizontal { position: absolute; transform: translateY(-50%); top: 50%; } /* Left and right teeth */ .cog-one .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; left: -55px; } .cog-three .teeth.horizontal { left: -70px; background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; } .teeth.horizontal::after { content: ''; position: absolute; transform: rotate(45deg); } /* Top left and bottom right teeth */ .cog-one .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 170px; } .cog-two .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 80px, var(--cog-color) 80px, var(--cog-color)); height: 15px; width: 125px; } .cog-three .teeth.horizontal::after { background: linear-gradient(to right, var(--cog-color), var(--cog-color) 30px, transparent 30px, transparent 120px, var(--cog-color) 120px, var(--cog-color)); height: 25px; width: 160px; }
73
Cogs Animation
By:
rald_dev
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
Profile
My page
Friends
Groups
Messages
Inbox
Sent
Trash
Settings
Account
History
Logout
body {background:#0f0f0f; font-family:Arial, Helvetica, sans-serif;} a, a:link, a:visited, a:hover, a:active {color:inherit; text-decoration:none;} .menu {position:absolute; top:50%; left:50%; width:15em; height:auto; transform:translate(-50%, -50%); overflow:hidden; border-radius:0.25em; background:#333;} .menu-block {background:#369; color:#fff;} .menu-block:target .submenu {max-height:10em; padding:1em 0 0.5em 0;} .block-title {display:block; position:relative; padding:1em; border-bottom:1px solid #258;} .menu-block:target .block-title {border-bottom:1px solid #369;} .block-title i {margin-right:0.5em;} .block-title:before {content:""; position:absolute; display:none; width:1em; height:1em; background:#369; left:1em; bottom:-0.5em; transform:rotate(45deg);} .menu-block:target .block-title:before {display:block;} .submenu {background:#333; padding:0; overflow:hidden; max-height:0; transition:all 0.25s linear;} .submenu a {display:block; position:relative; padding:0.25em 1em; margin:0.25em 0;} .submenu a:before {content:""; position:absolute; width:0.2em; height:100%; background:none; top:0; left:0.25em; transition:background 0.25s linear;} .submenu a:hover:before {background:#369;} .submenu a i {margin-right:0.5em;}
72
Navigation Menu [
By:
rald_dev
.loadingWrap { position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; width: 500px; height: 50px; text-align: center; } .loadingBoxes { display: inline-block; margin: 3px; width: 40px; height: 40px; border-radius: 10px; } .loadingBoxColour1 {background: #00A396; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.0s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour2 {background: #81C540; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour3 {background: #F5B52E; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour4 {background: #ED5B35; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .loadingBoxColour5 {background: #EA225E; animation: loadingBoxColour; animation-duration: 2s; animation-delay: 0.4s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes loadingBoxColour { 0% { transform: scale(1.0); } 50% { transform: scale(0.5); } 100% { transform: scale(1.0); } }
72
Loading Animation
By:
rald_dev
* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #ffffff; align-items: center; min-height: 100vh; display: flex; } .box-outer { overflow: hidden; margin: 50px auto; width: 200px; height: 200px; } .main_box { width: 200px; height: 200px; position: relative; background: #f34c4c; border: 5px solid #ffffff; } .bar { position: absolute; width: 50px; height: 5px; background: rgb(0, 0, 0); transition: all 1s linear; animation-duration: 1s; animation-fill-mode: both; animation-iteration-count: infinite; } .bar.delay { animation-delay: 0.5s; } .top { top: -5px; left: -5px; } .right { top: 18px; right: -28px; transform: rotate(90deg); } .bottom { bottom: -5px; left: -5px; } .left { top: 18px; left: -28px; transform: rotate(90deg); } @-webkit-keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } @keyframes h-move { 0% { left: -5px; } 100% { left: 200px; } } .top, .bottom { animation-name: h-move; } @-webkit-keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } @keyframes v-move { 0% { top: -5px; } 100% { top:228px; } } .right, .left { animation-name: v-move; }
72
Box border animation
By:
rald_dev
body{ margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; background: #29a329; } .container{ margin-top: 100px; width: 400px; height: 400px; position: relative; border-radius: 50%; animation: draw 5s linear infinite; } .trace{ position: absolute; width: 390px; height:390px; border-radius: 50%; border: 10px solid #fff; border-right: 10px solid transparent; border-bottom: 10px solid transparent; transform: rotate(-45deg); } .pencil{ position: absolute; height: 100%; width: 82px; /*background: green;*/ left: 41%; } .rubber{ width: 82px; height: 50px; background: violet; border-radius:15px 15px 0 0 ; margin-top: -6px; } .joint{ width: 82px; height: 60px; background: black; } .stick{ height: 58%; background: linear-gradient(to right, #cccc00 27px, #1a75ff 0 55px, #cc0066 20px); } .pencil-top{ height: 64px; background: black; clip-path: polygon(0 0, 50% 100%, 100% 0); } .pencil-tip{ background: #fff; height: 20px; clip-path: polygon(35% 0, 50% 100%, 64.5% 0); margin-top: -19px; } @keyframes draw{ 0%{ transform: rotate(360deg); } 100%{ transform: rotate(0deg); } }
72
Pencil animation
By:
rald_dev
Hello World & Advance Merry Christmas!
:root { --main-bg: #c2c2c2; --trunk-bg-1: #5e2100; --trunk-bg-2: #783e00; --leaves-bottom-bg-1: #0f980f; --leaves-bottom-bg-2: #3fc83f; --leaves-middle-bg-1: #1fa81f; --leaves-middle-bg-2: #4fd84f; --leaves-top-bg-1: #2fb82f; --leaves-top-bg-2: #5fe85f; --star-bg: #ffdd00; --shine-bg: #ffeb69; --snow-bg: #f2f2f2; --tree-width: 200px; --tree-height: 400px; --tree-rotate: -15deg; --trunk-width: 30px; --trunk-height: 400px; --trunk-angle: 4.3deg; --leaves-translate: 15px; --leaves-bottom-width: 100px; --leaves-bottom-height: 320px; --leaves-bottom-angle: 18.2deg; --leaves-middle-width: 80px; --leaves-middle-height: 220px; --leaves-middle-angle: 21.4deg; --leaves-top-width: 60px; --leaves-top-height: 140px; --leaves-top-angle: 25.5deg; --star-size: 20px; } html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { overflow: hidden; } .ts-3d { transform-style: preserve-3d; } .container { background-color: var(--main-bg); width: 100%; min-height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .tree { width: var(--tree-width); height: var(--tree-height); position: relative; transform-style: preserve-3d; transform: rotateX(var(--tree-rotate)); } .trunk, .leaves-bottom, .leaves-middle, .leaves-top { position: absolute; width: 100%; height: 100%; top: 0; left: 0; animation: 10s tree-rotate linear infinite; } .trunk div { border-top: none; border-left: solid var(--trunk-width) transparent; border-right: solid var(--trunk-width) transparent; position: absolute; bottom: 0; left: calc(50% - var(--trunk-width)); transform-origin: bottom; } .trunk div:nth-child(1) { border-bottom: solid var(--trunk-height) var(--trunk-bg-1); transform: rotateX(var(--trunk-angle)) translateY(2px) translateZ(var(--trunk-width)); } .trunk div:nth-child(2) { border-bottom: solid var(--trunk-height) var(--trunk-bg-2); transform: rotateY(90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1)); } .trunk div:nth-child(3) { border-bottom: solid var(--trunk-height) var(--trunk-bg-1); transform: rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1)); } .trunk div:nth-child(4) { border-bottom: solid var(--trunk-height) var(--trunk-bg-2); transform: rotateY(-90deg) rotateX(calc(var(--trunk-angle) * -1)) translateY(2px) translateZ(calc(var(--trunk-width) * -1)); } .leaves-bottom div { border-top: none; border-left: solid var(--leaves-bottom-width) transparent; border-right: solid var(--leaves-bottom-width) transparent; position: absolute; top: var(--star-size); left: calc(50% - var(--leaves-bottom-width)); transform-origin: bottom; } .leaves-bottom div:nth-child(1) { border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1); transform: rotateX(var(--leaves-bottom-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-bottom-width)); } .leaves-bottom div:nth-child(2) { border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2); transform: rotateY(90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1)); } .leaves-bottom div:nth-child(3) { border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-1); transform: rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1)); } .leaves-bottom div:nth-child(4) { border-bottom: solid var(--leaves-bottom-height) var(--leaves-bottom-bg-2); transform: rotateY(-90deg) rotateX(calc(var(--leaves-bottom-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-bottom-width) * -1)); } .leaves-middle div { border-top: none; border-left: solid var(--leaves-middle-width) transparent; border-right: solid var(--leaves-middle-width) transparent; position: absolute; top: var(--star-size); left: calc(50% - var(--leaves-middle-width)); transform-origin: bottom; } .leaves-middle div:nth-child(1) { border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1); transform: rotateX(var(--leaves-middle-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-middle-width)); } .leaves-middle div:nth-child(2) { border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2); transform: rotateY(90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1)); } .leaves-middle div:nth-child(3) { border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-1); transform: rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1)); } .leaves-middle div:nth-child(4) { border-bottom: solid var(--leaves-middle-height) var(--leaves-middle-bg-2); transform: rotateY(-90deg) rotateX(calc(var(--leaves-middle-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-middle-width) * -1)); } .leaves-top div { border-top: none; border-left: solid var(--leaves-top-width) transparent; border-right: solid var(--leaves-top-width) transparent; position: absolute; top: var(--star-size); left: calc(50% - var(--leaves-top-width)); transform-origin: bottom; } .leaves-top div:nth-child(1) { border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1); transform: rotateX(var(--leaves-top-angle)) translateY(var(--leaves-translate)) translateZ(var(--leaves-top-width)); } .leaves-top div:nth-child(2) { border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2); transform: rotateY(90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1)); } .leaves-top div:nth-child(3) { border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-1); transform: rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1)); } .leaves-top div:nth-child(4) { border-bottom: solid var(--leaves-top-height) var(--leaves-top-bg-2); transform: rotateY(-90deg) rotateX(calc(var(--leaves-top-angle) * -1)) translateY(var(--leaves-translate)) translateZ(calc(var(--leaves-top-width) * -1)); } @keyframes tree-rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 99.99999% { transform: rotateX(0deg) rotateY(359deg); } } .shadow { background-color: rgba(0, 0, 0, 0.8); width: calc(var(--leaves-bottom-width) * 2); height: calc(var(--leaves-bottom-width) * 2); filter: blur(calc(var(--leaves-bottom-width) / 2)); position: absolute; bottom: calc(var(--leaves-bottom-width) * -1); left: calc(50% - var(--leaves-bottom-width)); transform: rotateX(90deg) translateX(-50%); animation: 10s shadow-rotate linear infinite; } @keyframes shadow-rotate { 0% { transform: rotateX(-90deg) rotateZ(0deg); } 99.99999% { transform: rotateX(-90deg) rotateZ(359deg); } } .star-1 { transform: translateZ(-2px); animation: 10s star-1-rotate linear infinite; } @keyframes star-1-rotate { 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(-2px); } 99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-2px); } } .star-2 { transform: translateZ(-1px); animation: 10s star-2-rotate linear infinite; } @keyframes star-2-rotate { 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(-1px); } 99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(-1px); } } .star-3 { transform: translateZ(0px); animation: 10s star-3-rotate linear infinite; } @keyframes star-3-rotate { 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(0px); } 99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(0px); } } .star-4 { transform: translateZ(1px); animation: 10s star-4-rotate linear infinite; } @keyframes star-4-rotate { 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(1px); } 99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(1px); } } .star-5 { transform: translateZ(2px); animation: 10s star-5-rotate linear infinite; } @keyframes star-5-rotate { 0% { transform: rotateX(0deg) rotateY(0deg) translateZ(2px); } 99.99999% { transform: rotateX(0deg) rotateY(359deg) translateZ(2px); } } .star, .star:before, .star:after { content: ''; height: 0; width: 0; border-top: solid 30px var(--star-bg); border-left: solid 45px transparent; border-right: solid 45px transparent; position: absolute; top: 0; left: calc(50% - 45px); } .star:before { transform: rotate(72deg); top: -33px; left: -46px; } .star:after { transform: rotate(287deg); top: -33px; left: -44px; } .shine { background: var(--shine-bg); height: 90px; width: 90px; position: absolute; top: -45px; left: calc(50% - 45px); border-radius: 50%; transform: translateZ(40px); filter: blur(20px); opacity: 0.6; animation: 5s shine linear infinite; } @keyframes shine { 0% { transform: scale(1) translateZ(40px); } 50% { transform: scale(1.5) translateZ(40px); } 100% { transform: scale(1) translateZ(40px); } } .snow-container { width: 100%; height: 100%; position: absolute; } .snow { position: absolute; } .snow:before { content: ''; background-color: var(--snow-bg); width: 100%; height: 100%; position: absolute; border-radius: 50%; } .snow-y-1:before { animation: 8s snow-y-1 ease-in infinite, 8s snow-y-0 linear infinite; } .snow-y-2:before { animation: 6s snow-y-2 ease-in infinite, 6s snow-y-0 linear infinite; } .snow-y-3:before { animation: 4s snow-y-2 ease-in infinite, 4s snow-y-0 linear infinite; } .snow-1 { width: 20px; height: 20px; top: calc(50% - 250px); left: calc(50% - 10px); animation: 1s snow-x linear infinite; } .snow-2 { width: 15px; height: 15px; top: calc(50% - 300px); left: calc(50% - 30px); animation: 0.8s snow-x linear infinite 0.1s; } .snow-3 { width: 10px; height: 10px; top: calc(50% - 400px); left: calc(50% + 60px); animation: 0.6s snow-x linear infinite 0.8s; } .snow-4 { width: 25px; height: 25px; top: calc(50% - 200px); left: calc(50% + 50px); animation: 0.5s snow-x linear infinite 0.5s; } .snow-5 { width: 18px; height: 18px; top: calc(50% - 200px); left: calc(50% - 50px); animation: 0.5s snow-x linear infinite 0.5s; } .snow-6 { width: 12px; height: 12px; top: calc(50% - 150px); left: calc(50% - 120px); animation: 0.8s snow-x linear infinite 0.5s; } .snow-7 { width: 20px; height: 20px; top: calc(50% - 150px); left: calc(50% + 75px); animation: 1s snow-x linear infinite 0.6s; } .snow-8 { width: 22px; height: 22px; top: calc(50% - 10px); left: calc(50% - 30px); animation: 1s snow-x linear infinite 0.8s; } .snow-9 { width: 8px; height: 8px; top: calc(50% - 250px); left: calc(50% - 30px); animation: 1s snow-x linear infinite 0.8s; } .snow-10 { width: 13px; height: 13px; top: calc(50% - 250px); left: calc(50% - 100px); animation: 1s snow-x linear infinite 0.8s; } @keyframes snow-x { 0% { transform: translateX(0px); } 25% { transform: translateX(5px); } 50% { transform: translateX(0px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0px); } } @keyframes snow-y-0 { 0% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } } @keyframes snow-y-1 { 0% { transform: translateY(0px); } 99.99999% { transform: translateY(300px); } 100% { transform: translateY(0px); } } @keyframes snow-y-2 { 0% { transform: translateY(0px); } 99.99999% { transform: translateY(400px); } 100% { transform: translateY(0px); } } @keyframes snow-y-3 { 0% { transform: translateY(0px); } 99.99999% { transform: translateY(500px); } 100% { transform: translateY(0px); } } .message { display: flex; font-size: 100px; font-weight: 800; color: #5FE85F; font-family: sans-serif; vertical-align: middle; font-family: 'Courier New', Courier, monospace; background: url(http://pm1.narvii.com/6380/3990038ed73ad3832195151af1c9438ca5ff765f_00.jpg); }
71
Christmas Tree
By:
rald_dev
Previous
1
…
5
6
7
8
9
10
Next