pure css – Thingography.com https://thingography.com More than a Photo Gallery Tue, 19 Feb 2019 00:44:09 +0000 en-US hourly 1 Pure CSS Solar System Orbits Animation https://thingography.com/css-solar-system/ https://thingography.com/css-solar-system/#respond Sun, 18 Mar 2018 17:15:48 +0000 http://thingography.com/?p=2115 .ani-box {width: 100%; height: 800px; background-image: url('http://thingography.com/my-things/wp-content/uploads/css-img/solar-system/stars.png'); overflow: hidden; background-color: #000;} #ss-container { margin: -260px auto 0px auto; width: 1220px; height: 1220px; position: relative; transform: scale(0.6); } #sol, #mercury, #mars, #earth, #venus, #asteroid, #jupiter, #saturn, #uranus, #neptune { left: 50%; top: 50%; position: absolute; border: 1px solid #000000; border-radius: 50%; } #sol { margin: -50px 0 0 -50px; width: 100px; height: 100px; border: 0 solid #FFFF00; background: #fefcea; background: -moz-radial-gradient(center, ellipse cover, #fefcea 0%, #f1da36 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36)); background: -webkit-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -o-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: -ms-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%); background: radial-gradient(ellipse at center, #fefcea 0%,#f1da36 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 ); box-shadow: 0 0 30px 10px #FFFF00; } .orbit-1, .orbit-2, .orbit-3, .orbit-4, .orbit-5, .orbit-6, .orbit-7, .orbit-8, .orbit-9 { border: .08em solid #555555; border-radius: 50%; position: absolute; top: 50%; left: 50%; } .orbit-1 { margin: -75px 0 0 -75px; width: 150px; height: 150px; animation:orbit 4.8s linear infinite; } #mercury { margin: 0 0 0 73.5px; width: 3px; height: 3px; background-color: #FFF; animation: turn 4.8s linear infinite; } .orbit-2 { margin: -85px 0 0 -85px; width: 170px; height: 170px; animation: orbit 12.4s linear infinite; } #venus { margin: 0 0 0 81px; width: 8px; height: 8px; background-color: #C49300; animation: turn 12.4s linear infinite; } .orbit-3 { margin: -95px 0 0 -95px; width: 190px; height: 190px; animation: orbit 20s linear infinite; } #earth { margin: 0 0 0 91px; width: 8px; height: 8px; background-color: #0099CC; animation:turn 20s linear infinite; } .orbit-4 { margin: -105px 0 0 -105px; width: 210px; height: 210px; animation: orbit 37.6s linear infinite; } #mars { margin: 0 0 0 103px; width: 5px; height: 5px; background-color: #CC3300; animation: turn 37.6s linear infinite; } .orbit-5 { border: 0px dotted #666666; margin: -150px 0 0 -150px; width: 300px; height: 300px; box-shadow: -5px 0 70px 0px #555555, 5px 0 70px 0 #666666 inset; animation: orbit 40s linear infinite; } .orbit-6 { margin: -220px 0 0 -220px; width: 440px; height: 440px; animation: orbit 237s linear infinite; } #jupiter { margin: 0 0 0 -264px; width: 88px; height:88px; background: #f3e2c7; background: -moz-linear-gradient(top, #f3e2c7 0%, #bf8e44 12%, #b56e03 27%, #c19e67 50%, #b68d4c 58%, #b56e03 72%, #bf8e44 86%, #e9d4b3 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f3e2c7), color-stop(12%,#bf8e44), color-stop(27%,#b56e03), color-stop(50%,#c19e67), color-stop(58%,#b68d4c), color-stop(72%,#b56e03), color-stop(86%,#bf8e44), color-stop(100%,#e9d4b3)); background: -webkit-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: -o-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: -ms-linear-gradient(top, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); background: linear-gradient(to bottom, #f3e2c7 0%,#bf8e44 12%,#b56e03 27%,#c19e67 50%,#b68d4c 58%,#b56e03 72%,#bf8e44 86%,#e9d4b3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=0 ); animation: turn 237s linear infinite; } .orbit-7 { margin: -355px 0 0 -355px; width: 710px; height: 710px; animation: orbit 589s linear infinite; } #saturn { margin: 0 0 0 -393px; width: 75px; height:75px; background: #d5cea6; background: -moz-linear-gradient(top, #d5cea6 0%, #cea902 10%, #d3c470 22%, #c9c190 38%, #d1b423 60%, #cea902 71%, #d5cea6 81%, #d1b423 94%, #b7ad70 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(10%,#cea902), color-stop(22%,#d3c470), color-stop(38%,#c9c190), color-stop(60%,#d1b423), color-stop(71%,#cea902), color-stop(81%,#d5cea6), color-stop(94%,#d1b423), color-stop(100%,#b7ad70)); background: -webkit-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: -o-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: -ms-linear-gradient(top, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); background: linear-gradient(to bottom, #d5cea6 0%,#cea902 10%,#d3c470 22%,#c9c190 38%,#d1b423 60%,#cea902 71%,#d5cea6 81%,#d1b423 94%,#b7ad70 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5cea6', endColorstr='#b7ad70',GradientType=0 ); animation: turn 589s linear infinite; } .orbit-8 { margin: -455px 0 0 -455px; width: 910px; height: 910px; animation: orbit 1680s linear infinite; } #uranus { margin: 0 0 0 -470px; width: 31px; height:31px; background: #0a77d5; background: -moz-linear-gradient(top, #0a77d5 0%, #d0e4f7 15%, #d0e4f7 19%, #73b1e7 28%, #73b1e7 36%, #73b1e7 42%, #0a77d5 51%, #5da6e2 67%, #0a77d5 83%, #87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a77d5), color-stop(15%,#d0e4f7), color-stop(19%,#d0e4f7), color-stop(28%,#73b1e7), color-stop(36%,#73b1e7), color-stop(42%,#73b1e7), color-stop(51%,#0a77d5), color-stop(67%,#5da6e2), color-stop(83%,#0a77d5), color-stop(100%,#87bcea)); background: -webkit-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: -o-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: -ms-linear-gradient(top, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); background: linear-gradient(to bottom, #0a77d5 0%,#d0e4f7 15%,#d0e4f7 19%,#73b1e7 28%,#73b1e7 36%,#73b1e7 42%,#0a77d5 51%,#5da6e2 67%,#0a77d5 83%,#87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 ); animation: turn 1680s linear infinite; } .orbit-9 { margin: -605px 0 0 -605px; width: 1210px; height: 1210px; animation: orbit 3280s linear infinite; } #neptune { margin: 0 0 0 -620px; width: 30px; height:30px; background: #0a77d5; background: -moz-linear-gradient(top, #0a77d5 0%, #86bff4 15%, #73b1e7 28%, #0a77d5 42%, #5da6e2 61%, #078e4a 83%, #87bcea 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0a77d5), color-stop(15%,#86bff4), color-stop(28%,#73b1e7), color-stop(42%,#0a77d5), color-stop(61%,#5da6e2), color-stop(83%,#078e4a), color-stop(100%,#87bcea)); background: -webkit-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: -o-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: -ms-linear-gradient(top, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); background: linear-gradient(to bottom, #0a77d5 0%,#86bff4 15%,#73b1e7 28%,#0a77d5 42%,#5da6e2 61%,#078e4a 83%,#87bcea 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a77d5', endColorstr='#87bcea',GradientType=0 ); animation:turn 3280s linear infinite; } @keyframes orbit { 0% {transform: rotate( 0deg);} 50% {transform: rotate(-180deg);} 100% {transform: rotate(-360deg);} } @keyframes turn { 0% {transform: rotateZ( 0deg);} 50% {transform: rotateZ(180deg);} 100% {transform: rotateZ(360deg);} } @media only screen and (max-width: 1000px) { #ss-container { transform: scale(0.4); left: -30%;} } @media only screen and (max-width: 720px) { #ss-container { transform: scale(0.3); left: -50%;} } @media only screen and (max-width: 480px) { #ss-container { transform: scale(0.2); left: -120%;} }

A Pure CSS Solar System – with the exception of the background stars – all planets and animation is CSS generated.The scale of the planets and yearly orbits are somewhat scaled, with the exception of the Sun which should be 50% larger. The Earth year is scaled to 20 seconds.
In addition, Pluto is not included, however, the asteroid belt between Mars and Jupiter are included as a cloudy belt. This animation is best viewed on a large screen to see the smaller planets.
]]> https://thingography.com/css-solar-system/feed/ 0 Transition Mix Pure CSS Animation https://thingography.com/css-transition-mix/ https://thingography.com/css-transition-mix/#respond Wed, 14 Mar 2018 02:02:36 +0000 http://thingography.com/?p=2034 .ani-box {width: 100%; height: 700px; overflow:hidden; margin-top 0;} .cont { margin: 0 auto; width: 90%; height: auto; position: relative; } .cont div { width: 100px; height: 100px; border-radius: 0px; background-color: yellow; animation: roll 50s linear infinite; display: inline-block; margin-right: auto; margin-left: auto; } @keyframes roll { 0% {transform: rotateX( 0deg);} 1% {transform: rotateX( 0deg);} 2% {transform: rotateX(90deg); background: yellow;} 2.01% {transform: rotateX(90deg); background: blue;} 5% {transform: rotateX( 0deg); background: blue;} 6% {transform: rotateX(90deg); background: blue;} 6.01% {transform: rotateX(90deg); background: red;} 9% {transform: rotateX( 0deg); background: red;} 10% {transform: rotateX( 0deg); background: red;} 10.01%{transform: rotateY( 0deg);} 11% {transform: rotateY( 0deg); background: #CC0066;} 12% {transform: rotateY(90deg); background: #CC0066;} 12.01%{transform: rotateY(90deg); background: green;} 15% {transform: rotateY( 0deg); background: green;} 16% {transform: rotateY(90deg); background: green;} 16.01%{transform: rotateY(90deg); background: #FFFF00;} 19% {transform: rotateY( 0deg); background: #FFFF00;} 20% {transform: rotateY( 0deg); background: #FFFF00;} 20.01%{transform: rotateZ( 0deg);} 21% {transform: rotatez( 0deg); background: silver;} 22% {transform: rotatez(90deg); background: silver;} 22.01%{transform: rotatez(90deg); background: #0000FF;} 25% {transform: rotateZ( 0deg); background: #0000FF;} 26% {transform: rotatez(90deg); background: #0000FF;} 26.01%{transform: rotateZ(90deg); background: red;} 29% {transform: rotatez( 0deg); background: red;} 30% {transform: rotateZ( 0deg); background: red;} 30.01%{transform: rotateY( 0deg);} 31% {transform: rotateY( 0deg); background: #66FFFF;} 32% {transform: rotateY(90deg); background: #66FFFF;} 32.01%{transform: rotateX(180deg); background: lime;} 35% {transform: rotateX( 0deg); background: lime;} 36% {transform: rotateX(180deg); background: lime;} 36.01%{transform: rotateY(90deg); background: aqua;} 39% {transform: rotateY( 0deg); background: aqua;} 40% {transform: rotateY( 0deg); background: aqua;} 40.01%{transform: rotateZ( 0deg) scale(1,1);} 45% {transform: rotateZ(720deg) scale(0.7,0.7);background: orange;} 50% {transform: rotateZ(720deg) scale(1,1); background: orange;} 50.01%{transform: rotateZ( 0deg);} 51% {transform: rotateZ( 0deg) scale(0.7,0.7); border-radius:0px; background: purple;} 52% {transform: rotateZ(90deg) scale(0.5,0.5); border-radius:20px;background: purple;} 52.01%{transform: rotateZ(720deg) scale(0.7,0.7);border-radius:40px; background: blue;} 55% {transform: rotateZ( 0deg) scale(0.5,0.5);border-radius:50px; background: blue;} 56% {transform: rotateZ(180deg) scale(0.7,0.7);border-radius:40px; background: blue;} 56.01%{transform: rotateZ(90deg) scale(0.8,0.8);border-radius: 20px;background: yellow;} 58% {transform: rotateZ( 0deg) scale(1,1); border-radius: 20px;background: aqua;} 60% {transform: rotateZ( 0deg) scale(1,1); border-radius: 0px; background: yellow;} 60.01%{transform: rotateZ( 0deg) scale(1,1); background: #993333;} 61% {transform: rotateZ(90deg) scale(0.5,0.2) skewY (30deg); background: #993333;} 62% {transform: rotateZ(360deg) scale(1,1); background: #993333;} 62.01%{transform: rotateZ(360deg) scale(0.7,0.7); background: #66FF33;} 65% {transform: rotateZ(-180deg) scale(0.7,0.7); background: #66FF33;} 66% {transform: rotateZ(180deg) scale(0.7,0.7); background: #66FF33;} 66.01%{transform: rotateZ(-180deg) scale(0.9,1); background: blue;} 68% {transform: rotateZ(180deg) scale(0.8,1); background: blue;} 70% {transform: rotateZ( 0deg) scale(1,0.8); background: blue;} 70.01%{transform: rotateX( 0deg) scale(1,1); border-radius: 0px;} 74% {transform: rotateX( 0deg) scale(0.7,0.7);border-radius: 25px;background: #0000FF;} 78% {transform: rotateX(90deg) scale(0.2,0.2);border-radius: 25px;background: #0000FF;} 78.01%{transform: rotateX(180deg) scale(0.3,0.3);border-radius: 50px; background: #000000;} 80% {transform: rotateX( 0deg) scale(0.9,0.9);border-radius: 50px; background: #FF0000;} 86% {transform: rotateX(180deg) scale(0.7,0.7);border-radius: 50px; background: #000000;} 86.01%{transform: rotateX(90deg) scale(0.8,0.8);border-radius: 50px;background: #0000FF;} 88% {transform: rotateX( 0deg) scale(1,1); border-radius: 25px;background: #0000FF;} 90% {transform: rotateX( 0deg) scale(1,1); border-radius: 0px; background: #0000FF;} 91% {transform: rotateX(0deg) scale(0.6,0.6);border-radius: 0px; background: yellow;} 93% {transform: rotateX(0deg) scale(0.3,0.3);border-radius: 500px;background:red;} 95% {transform: rotateX(0deg) scale(0.0,0.0);border-radius: 50px; background: blue;} 98% {transform: rotateX(0deg) scale(10,1); border-radius: 25px; background: white;} 100% {transform: rotateX(0deg) scale(1,1); border-radius: 0px; background: gray;} } @media screen and (max-width: 730px) { .cont div { width: 75px; height: 75px; } } @media screen and (max-width: 480px) { .cont div { width: 50px; height: 50px; } }

A fast and colorful CSS transition animation
]]> https://thingography.com/css-transition-mix/feed/ 0 Bull’s-eye & Arrows Pure CSS Animation https://thingography.com/css-target/ https://thingography.com/css-target/#respond Mon, 12 Mar 2018 15:09:13 +0000 http://thingography.com/?p=1966 .ani-box {width: 100%; height: 500px; } #target { margin: 0 auto; border-width: medium; border-color: #CC3300; width: 100%; height: 400px; position: relative; } .arrow1, .arrow2, .arrow3 { height: 300px; width: 50px; z-index: 2; position: absolute; } .arrow1 { animation: arrow1 10s linear infinite; } .arrow2 { left: 25px; animation: arrow2 10s linear infinite; } .arrow3 { left: 50px; animation: arrow3 10s linear infinite; } @keyframes arrow1 { 0% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 30% {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);} 100% {top: 50%; left: 50%; transform:rotateX(80deg) scale(1,1);} } @keyframes arrow2 { 0% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 30% {top:200%; left: 50%; transform:rotateX( 0deg) scale(2,2);} 60% {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);} 100% {top: 30%; left: 47%; transform:rotateX(80deg) scale(1,1);} } @keyframes arrow3 { 0% {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);} 60% {top:200%; left: 49%; transform:rotateX( 0deg) scale(2,2);} 90% {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);} 100% {top: 24%; left: 49%; transform:rotateX(80deg) scale(1,1);} } .point1, .point2, .point3 { margin: 0px 0px 0px 5.5px; width: 0; height: 0; z-index: 2; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 30px solid #727272; position: relative; } @keyframes point1 { 0% {opacity: 1;} 30% {opacity: 1;} 30.1%{opacity: 0;} 100% {opacity: 0;} } @keyframes point2 { 0% {opacity: 1;} 60% {opacity: 1;} 60.1%{opacity: 0;} 100% {opacity: 0;} } @keyframes point3 { 0% {opacity: 1;} 90% {opacity: 1;} 90.1%{opacity: 0;} 100% {opacity: 0;} } .point1 { animation: point1 10s linear infinite; } .point2 { animation: point2 10s linear infinite; } .point3 { animation: point3 10s linear infinite; } .shaft { width: 10px; height: 200px; z-index: 1; background-color: #000000; margin: 0px 0px 0px 10px; position: relative; background: #454f77; background: -moz-linear-gradient(left, #454f77 21%, #f9f5f4 34%, #fc1b07 50%, #f7f5f4 69%, #454f77 83%); background: -webkit-gradient(linear, left top, right top, color-stop(21%,#454f77), color-stop(34%,#f9f5f4), color-stop(50%,#fc1b07), color-stop(69%,#f7f5f4), color-stop(83%,#454f77)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: -o-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: -ms-linear-gradient(left, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); background: linear-gradient(to right, #454f77 21%,#f9f5f4 34%,#fc1b07 50%,#f7f5f4 69%,#454f77 83%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#454f77', endColorstr='#454f77',GradientType=1 ); } .fletching, .fletching2 { margin: -60px 0px 0px 15px; width: 12px; height: 50px; background: red; z-index: 0; transform:skew(10deg); position: relative; background: #e5e6e8; background: -moz-linear-gradient(top, #e5e6e8 0%, #fc5849 6%, #f9f7f7 14%, #3a3fc4 22%, #fcf8f7 30%, #ff4f4f 38%, #3845bc 46%, #fcf9fa 54%, #fc5546 63%, #f9f7f7 71%, #5762bf 79%, #f94f43 87%, #f7f0ef 95%, #f7f0ef 95%, #f7f0ef 95%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e6e8), color-stop(6%,#fc5849), color-stop(14%,#f9f7f7), color-stop(22%,#3a3fc4), color-stop(30%,#fcf8f7), color-stop(38%,#ff4f4f), color-stop(46%,#3845bc), color-stop(54%,#fcf9fa), color-stop(63%,#fc5546), color-stop(71%,#f9f7f7), color-stop(79%,#5762bf), color-stop(87%,#f94f43), color-stop(95%,#f7f0ef), color-stop(95%,#f7f0ef), color-stop(95%,#f7f0ef)); background: -webkit-linear-gradient(top, #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%); background: -o-linear-gradient(top, #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%); background: -ms-linear-gradient(top, #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%); background: linear-gradient(to bottom, #e5e6e8 0%,#fc5849 6%,#f9f7f7 14%,#3a3fc4 22%,#fcf8f7 30%,#ff4f4f 38%,#3845bc 46%,#fcf9fa 54%,#fc5546 63%,#f9f7f7 71%,#5762bf 79%,#f94f43 87%,#f7f0ef 95%,#f7f0ef 95%,#f7f0ef 95%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e6e8', endColorstr='#f7f0ef',GradientType=0 ); } .fletching2 { margin: -50px 0px 0px 3px; transform: rotateY(180deg) skew(10deg); } .bullseye { top: 50%; left: 50%; position: absolute; width: 400px; height: 400px; margin: -200px 0px 0px -200px; border-radius: 50%; box-shadow: 0 0 50px 5px #808080, 0 0 0px 0px #FF0000 inset; background: #ffff00; background: -moz-radial-gradient(center, ellipse cover, #ffff00 0%, #fff00f 11%, #ff0000 12%, #ff0000 25%, #0093dd 25%, #0093dd 38%, #000000 38%, #2b2b2b 51%, #ffffff 51%, #ffffff 63%, #000000 63%, #ffffff 84%, #2b2b2b 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffff00), color-stop(11%,#fff00f), color-stop(12%,#ff0000), color-stop(25%,#ff0000), color-stop(25%,#0093dd), color-stop(38%,#0093dd), color-stop(38%,#000000), color-stop(51%,#2b2b2b), color-stop(51%,#ffffff), color-stop(63%,#ffffff), color-stop(63%,#000000), color-stop(84%,#ffffff), color-stop(100%,#2b2b2b)); background: -webkit-radial-gradient(center, ellipse cover, #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); background: -o-radial-gradient(center, ellipse cover, #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); background: -ms-radial-gradient(center, ellipse cover, #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); background: radial-gradient(ellipse at center, #ffff00 0%,#fff00f 11%,#ff0000 12%,#ff0000 25%,#0093dd 25%,#0093dd 38%,#000000 38%,#2b2b2b 51%,#ffffff 51%,#ffffff 63%,#000000 63%,#ffffff 84%,#2b2b2b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff00', endColorstr='#2b2b2b',GradientType=1 ); } @media only screen and (max-width: 721px) { #target {transform: scale(0.7);} } @media only screen and (max-width: 481px) { #target {transform: scale(0.4);} .bullseye {transform: scale(0.7);} }

This was an enlightening project, as it showed me how flexible CSS can be with imagination. A pure CSS bulls-eye target and arrows all made with purely CSS.
]]> https://thingography.com/css-target/feed/ 0 Spiral Pure CSS Animation https://thingography.com/css-spiral/ https://thingography.com/css-spiral/#respond Sun, 18 Feb 2018 21:59:05 +0000 http://thingography.com/my-things/?p=139 .ani-box {height: auto !important; padding: 0 !important;} .box { margin-top: -10%; position: relative; width: 100%; padding-top: 100%; /* 1:1 Aspect Ratio */ animation: spin 3s infinite linear; box-sizing: content-box; } .layer0, .layer1, .layer2, .layer3, .layer4, .layer5, .layer6 { position: absolute; bottom: 0; right: 0; top: 50%; left: 50%; border-radius: 50%; overflow: hidden; background: radial-gradient(ellipse at center, #fcfcfc 0%,#fcfcfc 0%,#0a0a0a 9%,#ffffff 16%,#0a0a0a 25%,#f2f2f2 33%,#070707 40%,#ffffff 47%,#2d2d2d 56%,#f9f9f9 63%,#2d2d2d 70%,#f9f9f9 79%,#2d2d2d 87%,#f9f9f9 96%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ffffff',GradientType=1 ); } .layer0 { width: 60%; height: 60%; margin-top: -30%; margin-left: -29%; } .layer1 { width: 48%; height: 48%; margin-top: -23%; margin-left: -24%; } .layer2 { width: 42%; height: 42%; margin-top: -21%; margin-left: -22%; } .layer3 { width: 36%; height: 36%; margin-top: -17%; margin-left: -18%; } .layer4 { width: 28%; height: 28%; margin-top: -14%; margin-left: -13%; } .layer5 { width: 20%; height: 20%; margin-top: -11%; margin-left: -10%; } .layer6 { width: 14%; height: 14%; margin-top: -7%; margin-left: -6%; } @keyframes spin { 0% { transform: rotateZ( 0deg);} 100% { transform: rotateZ(360deg);} }

If you like this Spiral optical illusion animation, check out more Spirals on the Spiral web page.

]]> https://thingography.com/css-spiral/feed/ 0 Newton’s Cradle Pure CSS Animation https://thingography.com/css-newtons-cradle/ https://thingography.com/css-newtons-cradle/#respond Sun, 18 Feb 2018 21:56:45 +0000 http://thingography.com/my-things/?p=136 .ani-box { height: 530px;} /* ======= Newton's Cradle Box - ======== */ .box { width: 570px; height: auto; margin: 0 auto; padding: 0; position: relative; overflow: hidden; } @media screen and (max-width: 900px) { .box { transform:scale(0.8); transform-origin: top center; } } @media screen and (max-width: 720px) { .box { transform:scale(0.6); transform-origin: top center; } } @media screen and (max-width: 500px) { .box { transform:scale(0.4); transform-origin: top center; margin-left: -25%; } } @media screen and (max-width: 320px) { .box { transform:scale(0.3); transform-origin: top center; margin-left: -40%; } } @media screen and (max-width: 280px) { .box { transform:scale(0.2); transform-origin: top center; margin-left: -55%; } } /* ========= Cradle Frame ========= */ #frame { width: 570px; height: 430px; } .frametop, .frametop2, .frameleg1, .frameleg2, .frameleg3, .frameleg4 { width: 520px; height: 30px; top: 5px; left: 1px; position: absolute; border-radius: 5px; background: rgb(149,149,149); background: -moz-linear-gradient(top, rgba(149,149,149,1) 0%, rgba(13,13,13,1) 46%, rgba(1,1,1,1) 50%, rgba(10,10,10,1) 53%, rgba(78,78,78,1) 76%, rgba(56,56,56,1) 87%, rgba(27,27,27,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(149,149,149,1)), color-stop(46%,rgba(13,13,13,1)), color-stop(50%,rgba(1,1,1,1)), color-stop(53%,rgba(10,10,10,1)), color-stop(76%,rgba(78,78,78,1)), color-stop(87%,rgba(56,56,56,1)), color-stop(100%,rgba(27,27,27,1))); background: -webkit-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: -o-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: -ms-linear-gradient(top, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); background: linear-gradient(to bottom, rgba(149,149,149,1) 0%,rgba(13,13,13,1) 46%,rgba(1,1,1,1) 50%,rgba(10,10,10,1) 53%,rgba(78,78,78,1) 76%,rgba(56,56,56,1) 87%,rgba(27,27,27,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); } .frametop2 { width: 530px; height: 30px; top: 30px; left: 40px; z-index: 10; } .frameleg1, .frameleg2, .frameleg3, .frameleg4 { transform: rotateZ(90deg); } .frameleg1 { left: -155px; top: 208px; width: 380px; z-index: 1; } .frameleg2 { left: -120px; top: 215px; width: 400px; z-index: 6; } .frameleg3 { left: 300px; top: 208px; width: 380px; z-index: 1; } .frameleg4 { left: 335px; top: 215px; width: 400px; z-index: 6; } /* ========= Ball & String ========== */ #bas { width: 570px; height: 430px; position: absolute; top: 0px; left: 0px; } .bas1, .bas2, .bas3, .bas4, .bas5 { margin: -255px 0px 0px 60px; width: 60px; height: 600px; position: absolute; z-index: 5; } .bas1 { margin: -255px 0px 0px 130px; transform: rotate(25deg); animation: ball1 2.5s linear infinite; } @keyframes ball1 { 0% {transform:rotate(25deg);} 25% {transform:rotate( 0deg);} 50% {transform:rotate( 0deg);} 75% {transform:rotate( 0deg);} 100%{transform:rotate(25deg);} } .bas2 {margin-left: 190px;} .bas3 {margin-left: 250px;} .bas4 {margin-left: 310px;} .bas2, .bas3, .bas4 { animation: ball234 2.5s linear infinite; } @keyframes ball234 { 0% {transform:rotate( 0deg);} 25% {transform:rotate(-0.5deg);} 25.5%{transform:rotate( 0deg);} 51% {transform:rotate( 0deg);} 75% {transform:rotate( 0.5deg);} 75.5%{transform:rotate( 0deg);} 100% {transform:rotate( 0deg);} } .bas5 { margin-left: 370px; transform: rotate(0deg); animation: ball5 2.5s linear infinite; } @keyframes ball5 { 0% {transform:rotate( 0deg);} 25% {transform:rotate( 0deg);} 50% {transform:rotate(-25deg);} 75% {transform:rotate( 0deg);} 100%{transform:rotate( 0deg);} } .string, .string2 { margin: 290px 0px 0px 42px; width: 2px; height: 250px; background-color: #FF0000; position: relative; transform: rotateZ(5deg); -moz-transform: rotateZ(5deg); } .string2 { margin: -250px 0px 0px 18px; transform: rotateZ(-5deg); } .nc-ball { width: 55px; height: 55px; background-color: #000000; margin-left: auto; border-radius: 30px; position: relative; margin-right: auto; -webkit-box-shadow:0px 3px 5px 1px black; -moz-box-shadow: 0px 3px 5px 1px black; box-shadow: 0px 3px 5px 1px black; background: rgb(245,246,246); background: -moz-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } /* ========= CLOSE Ball & String ========== */ /* ========= Ball Shadows ========= */ #shadows { width: 570px; height: 430px; position: absolute; top: 0px } .shadow1, .shadow2, .shadow3, .shadow4, .shadow5 { width: 35px; height: 35px; border-radius: 25px; box-shadow: 0 0 20px 20px #333333 inset, 0 0 55px 10px #000000; opacity: 0.14; transform: rotateX(-125deg); } .shadow1 { top: 350px; left: 40px; position: absolute; animation: shadow1 2.5s linear infinite; } .shadow234box { width: 180px; height: 35px; top: 350px; left: 515px; margin-left:165px; position: absolute; animation: shadow234 2.5s linear infinite; } .shadow2, .shadow3, .shadow4 { position: relative; float: left; top: 0px; margin-right: 25px; } .shadow5 { top: 350px; left: 385px; position: absolute; animation: shadow5 2.5s linear infinite; } @keyframes shadow1 { 0% {left: 40px;} 25% {left:145px;} 50% {left:145px;} 75% {left:145px;} 100%{left: 40px;} } @keyframes shadow234 { 0% {left: 40px;} 25% {left: 42px;} 25.5%{left: 40px;} 51% {left: 40px;} 75% {left: 38px;} 75.5%{left: 40px;} 100% {left: 40px;} } @keyframes shadow5 { 0% {left:385px;} 25% {left:385px;} 50% {left:505px;} 75% {left:385px;} 100%{left:385px;} } /* ========= CLOSE Ball & String ========== */ /* ===== Comment below clock ===== */ .my-comment { margin: 1.3em auto 1.2em auto; width: 80%; position: relative; font-size: 1.5em; color: #000; text-align: center; line-height: 1.6em; padding: 0; }

Newton’s Cradle made with Pure CSS

This is one of my favorite CSS animations. It is completely created with CSS and CSS keyframes. Unfortunately, it was created with fixed sizes (i.e. width:570px; and not a responsive format), which does not flow well with a responsive web page. However, with the CSS “scale” transform property it can fit “okay” in most pages with some media query tweaks.

If you like it, leave a comment below… or Share it!

]]> https://thingography.com/css-newtons-cradle/feed/ 0 Candy Hearts CSS Animation https://thingography.com/css-hearts/ https://thingography.com/css-hearts/#respond Sun, 18 Feb 2018 21:28:55 +0000 http://thingography.com/my-things/?p=133 .ani-box {width: 100%; height: 600px; position: relative;} /* ============== Small Hearts ============== */ .hart1 { margin-left: 8%; animation: floatsmall 18s linear infinite; } .hart2 { margin-left: 35%; animation: floatsmall 10s linear infinite; } .hart3 { margin-left: 75%; animation: left 11s linear infinite; } .hart4 { margin-left: 60%; animation: floatsmall 12s linear infinite; } .hart5 { margin-left: 85%; animation: floatsmall 8s linear infinite; } .hart6 { margin-left: 20%; animation: left 12s linear infinite; } .hart7 { margin-left: 30%; animation: right 9s linear infinite; } .hart8 { margin-left: 43%; animation: floatsmall 10s linear infinite; } .hart9 { margin-left: 1%; animation: right 10s linear infinite; } .hart10 { margin-left: 96%; animation: right 15s linear infinite; } /* ===== Medium Hearts ===== */ .hart11 { margin-left: 52%; animation: floatmed 18s linear infinite; } .hart12 { margin-left: 92%; animation: floatmed 13s linear infinite; } .hart13 { margin-left: 2%; animation: floatmed 17s linear infinite; } .hart14 { margin-left: 67%; animation: floatmed 15s linear infinite; } .hart15 { margin-left: 77%; animation: floatmed 10s linear infinite; } .hart16 { margin-left: 20%; animation: floatmed 20s linear infinite; } .hart17 { margin-left: 57%; animation: floatmed 8s linear infinite; } .hart18 { margin-left: 75%; animation: floatmed 14s linear infinite; } .hart19 { margin-left: 41%; animation: floatmed 11s linear infinite; } .hart20 { margin-left: 41%; animation: floatmed 17s linear infinite; } /* ===== Large Hearts ===== */ .hart21 { margin-left: 32%; animation: float 20s linear infinite; } .hart22 { margin-left: 70%; animation: left 20s linear infinite; } .hart23 { margin-left: -5%; animation: float 19s linear infinite; } .hart24 { margin-left: 20%; animation: float 16s linear infinite; } .hart25 { margin-left: 05%; animation: float 14s linear infinite; } .hart26 { margin-left: 15%; animation: float 12s linear infinite; } .hart27 { margin-left: 25%; animation: float 10s linear infinite; } .hart28 { margin-left: 35%; animation: float 13s linear infinite; } .hart29 { margin-left: 45%; animation: float 10s linear infinite; } .hart30 { margin-left: 55%; animation: float 21s linear infinite; } .hart31 { margin-left: 65%; animation: float 16s linear infinite; } .hart32 { margin-left: 75%; animation: float 15s linear infinite; } .hart33 { margin-left: 90%; animation: float 15s linear infinite; } .print { font-size: 48px; color: #FF6699; width: 180px; height: 125px; position: absolute; top: 14%; left: 10%; margin-top: -385px; margin-left: -230px; text-align: center; z-index: 5; text-shadow: 0 0 5px #FF66ED, 1px -1px 8px #333333; font-family: Verdana; text-transform: uppercase; font-weight: 600; line-height: 1em; } .hart1, .hart2, .hart3, .hart4, .hart5, .hart6, .hart7, .hart8, .hart9, .hart10, .hart11, .hart12, .hart13, .hart14, .hart15, .hart16, .hart17, .hart18, .hart19, .hart20, .hart21, .hart22, .hart23, .hart24, .hart25, .hart26, .hart27, .hart28, .hart29, .hart30, .hart31, .hart32, .hart33 { width: 260px; height: 245px; position: absolute; border: 0px solid #FF0000; } /* === To lower single line text on the hearts === */ #lower { padding-top: 20px; } /* FIXED HEARTs CODE for Heat & Outline - DO NOT CHANGE = USE "Scale" for size */ /* === Black Heart for Red Heart Border Outline === */ .heart2 { margin: 20px 0 0px -13px; position: absolute; width: 251px; height: 233px; z-index: 1; } .heartl2, .heartr2 { width: 160px; height: 235px; position: absolute; background-color: #999999; top: -35px; } /* === RED Heart === */ .heart { margin: 20px 0px 0px -18px; position: relative; width: 248px; height: 231px; z-index: 2; } .heartl, .heartr { width: 150px; height: 225px; position: absolute; background-color: #FEB4D7; top: -30px; } /* === Basic Shape of Heart & Black outline heart === */ .heartl, .heartl2 { border-radius: 50% 50% 20% 0%; left: 45px; transform: rotate(-45deg); } .heartr, .heartr2 { border-radius: 50% 50% 0% 20%; left: 100px; transform: rotate(45deg); } /* ========== Individual Heart Colors ========== */ #b {background-color: #92D6EE;} #y {background-color: #FBE892;} #o {background-color: #FAB684;} #r {background-color: #E897BF;} #w {background-color: #F0EEE4;} #p {background-color: #A789BF;} #g {background-color: #93D8B9;} /* ========== Individual Heart Colors - Darker Edges ========== */ #b2 {background-color: #759FB8;} #y2 {background-color: #C5B771;} #o2 {background-color: #BE8861;} #r2 {background-color: #B57293;} #w2 {background-color: #ABA9A2;} #p2 {background-color: #866B9C;} #g2 {background-color: #83BFA4;} /* === Rotate & Larger === */ @keyframes float { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.6);} 100%{top:110%; transform:rotateZ(720deg) scale(0.6);} } /* === Rotate & Medium === */ @keyframes floatmed { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:rotateZ(720deg) scale(0.4);} } /* === Rotate & Smaller === */ @keyframes floatsmall { 0% {top:-50%; transform:rotateZ( 0deg) scale(0.2);} 100%{top:110%; transform:rotateZ(720deg) scale(0.2);} } /* === Move to Left === */ @keyframes left { 0% {top:-50%; transform:translateX( 0px) rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:translateX(-400px) rotateZ(720deg) scale(0.4);} } /* === Move to Right === */ @keyframes right { 0% {top:-50%; transform:translateX( 0px) rotateZ( 0deg) scale(0.4);} 100%{top:110%; transform:translateX(300px) rotateZ(-720deg) scale(0.4);} } /* ===== Layer 1 - Background Falling PNG Hearts ===== */ .layer1, .layer0 { width: 120%; height: 100%; top: 0px; left: -10%; position: absolute; opacity: 1; } .layer0 { opacity: 0.5; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/hearts/h8.png'); animation: conf0 20s linear infinite; } .layer1 { opacity: 0.8; background-image: url('https://thingography.com/my-things/wp-content/uploads/css-img/hearts/h2.png'); animation: conf1 10s linear infinite; } /* Layer 0 - Base Layer conf Falling Animation */ @keyframes conf0 { 0% {background-position: 0px 0px; transform:scale(1.0);} 50% { transform:scale(0.8);} 100%{background-position: 500px 500px; transform:scale(1.0);} } /* Layer 1 - 1st Addition conf Falling Animation */ @keyframes conf1 { 0% {background-position: 0px 0px; transform:scale(1.0,1.0);} 50% { transform:scale(0.9,0.9);} 100%{background-position: 500px 500px; transform:scale(1.0,1.0);} }


kiss
me

love
bug

always

text
me

smile

love
you

for
ever

love
me

i love
you

call
me

miss
you

ur
cute

cutie
pie

kiss
me

xoxo

yes

ur
hot

you
rock

only
you

you
& me

ur a
10

marry
me

I
wish

lover
boy

true
love

hey
baby

marry
me

cup
cake

tweet
me

hug
me

be
mine

hot
stuff

soul
mate

The large candy hearts with text are pure CSS, and the small background hearts are from a PNG image.

]]> https://thingography.com/css-hearts/feed/ 0 Bowl of Fruit with Pure CSS https://thingography.com/css-fruit/ https://thingography.com/css-fruit/#respond Sun, 18 Feb 2018 20:42:07 +0000 http://thingography.com/my-things/?p=110 .ani-box {height: 500px; width: 100%;} #size { transform: scale(0.6); margin-top: -270px; position: relative; width: 100%; height: 800px; } @media screen and (max-width: 760px) { #size {transform: scale(0.5);} } @media screen and (max-width: 540px) { #size {transform: scale(0.3);} } @media screen and (max-width: 320px) { #size {transform: scale(0.2);} } /* ======== The Bowl ======= */ .bowl { width: 610px; height: 205px; left: 50%; top: 50%; margin-left: -305px; margin-top: 30px; position: absolute; box-sizing: content-box; } /* ===== The Outside of the Bowl ===== */ #bowl-out { height: 200px; width: 600px; border-radius: 0 0 400px 400px; background: #996633; position: absolute; margin-top:0px; margin-left: 0px; border: 5px solid #333333; box-shadow: 0 5px 50px 12px #999999; box-sizing: content-box; background: #996633; background: -moz-linear-gradient(top, #996633 0%, #994900 0%, #994900 13%, #996633 25%, #994900 38%, #996633 51%, #994900 64%, #996633 76%, #994900 92%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#996633), color-stop(0%,#994900), color-stop(13%,#994900), color-stop(25%,#996633), color-stop(38%,#994900), color-stop(51%,#996633), color-stop(64%,#994900), color-stop(76%,#996633), color-stop(92%,#994900)); background: -webkit-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); background: -o-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); background: -ms-linear-gradient(top, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); background: linear-gradient(to bottom, #996633 0%,#994900 0%,#994900 13%,#996633 25%,#994900 38%,#996633 51%,#994900 64%,#996633 76%,#994900 92%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#994900',GradientType=0 ); } /* ===== The IN-side or Top of the Bowl ===== */ #bowl-in { width: 586px; height: 200px; position: absolute; margin-top: -110px; margin-left: 0px; border: 10px solid #888888; border-radius: 50%; transform: rotateX(75deg); background-color: #795128; box-shadow:0 0px 5px 10px #333333 inset, 0 0 5px 2px #333333; box-sizing: content-box; background: #996633; background: -moz-linear-gradient(top, #996633 0%, #823e00 0%, #754212 45%, #754212 50%, #754212 55%, #823e00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#996633), color-stop(0%,#823e00), color-stop(45%,#754212), color-stop(50%,#754212), color-stop(55%,#754212), color-stop(100%,#823e00)); background: -webkit-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%); background: -o-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%); background: -ms-linear-gradient(top, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%); background: linear-gradient(to bottom, #996633 0%,#823e00 0%,#754212 45%,#754212 50%,#754212 55%,#823e00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#996633', endColorstr='#823e00',GradientType=0 ); } /* =========================================== The Orange ============================================================= */ .orange { left: 50%; top: 50%; margin-left: -300px; margin-top: -275px; width: 226px; height: 240px; position: absolute; z-index: 0; transform: scale(0.7); -moz-transform: scale(0.7); -webkit-transform:scale(0.7); -o-transform: scale(0.7); -ms-transform: scale(0.7); } /* === Orange shaded Outline === */ .orange2 { margin: 40px 0 0px -37px; position: absolute; width: 251px; height: 233px; z-index: 1; } .side1b, .side2b { width: 160px; height: 235px; position: absolute; background-color: #D35100; top: -35px; } /* === Orange === */ .orange1 { margin: 40px 0px 0px -41px; position: relative; width: 248px; height: 231px; z-index: 3; } .side1, .side2 { top: -30px; width: 150px; height: 225px; position: absolute; background-color:#FF6A00; background-image:radial-gradient(#FF893A 9px, transparent 11px), repeating-radial-gradient(#FF893A 0, #FF893A 4px, transparent 5px, transparent 5px, #FF893A 15px, #FF893A 15px, transparent 5px, transparent 5px); background-size: 16px 16px, 20px 20px; background-position: 50px 50px; } .side1 { background-color:#FF6A00; background-image:radial-gradient(#FF893A 9px, transparent 11px), repeating-radial-gradient(#FF893A 0, #FF893A 4px, transparent 5px, transparent 5px, #FF893A 15px, #FF893A 15px, transparent 5px, transparent 5px); background-size: 16px 16px, 20px 20px; background-position: 50px 50px; } /* === Basic Orange Shape === */ .side1, .side1b { border-radius: 100% 70% 80% 100%; left: 45px; transform: rotate(-6deg); } .side2, .side2b { border-radius: 70% 100% 100% 80%; left: 100px; transform: rotate(6deg); } #stem { border-radius: 70px 0 0 0; width: 70px; height: 70px; border: 10px solid #7a5230; border-color: transparent transparent transparent #926239; position: absolute; top: -18px; left: 115px; z-index: 2; } /* ============================================= Banana ONE ================================================= */ .banana { width: 460px; height: 300px; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: 250px; box-sizing: content-box; transform: rotateX(180deg) scale(1.1); } .main { border-style: hidden hidden solid hidden; width: 450px; height: 150px; border-width: 80px; border-radius: 0 0 150px 150px; position: absolute; background: transparent; margin-left: -260px; left: 250px; top: 0px; border-bottom-color: #FBFB00; box-sizing: content-box; } /* === Shadow - adds an outline to the banana - as the main-body is made from "border" === */ .main-shadow { border-style: hidden hidden solid hidden; width: 440px; height: 190px; border-width: 83px; border-radius: 0 0 140px 140px; position: absolute; background: transparent; margin-left: -260px; left: 255px; top: -41px; border-bottom-color: #C6C600; box-sizing: content-box; } /* ===== Line appears different in Firefox ===== */ .lineb1, .lineb2 { left: 6px; top: 60px; width: 420px; height: 150px; border-bottom-color: #EEEE00; border-style: hidden hidden solid hidden; border-width: 0px 0px 4px 0px; border-radius: 0 0 50% 50%; z-index: 5; position: absolute; } .lineb2 { left: 25px; top: 15px; width: 380px; height: 150px; border-radius: 0 0 30% 30%; } /* === Left end used to cover up the pointy part of the 'Main' body and give end Color === */ .left-end { width: 36px; height: 80px; background: #FFFFFF; position: absolute; top: 62px; left: -30px; box-shadow: 0px 15px 6px -5px #70424e; transform: rotatez(-40deg); } /* === Stem used to cover up the pointy part of the 'Main' body and make the stem === */ .banana-stem { width: 28px; height: 60px; background: #4f4c35; position: absolute; top: 82px; left: 420px; border-radius: 30% 40% 0 0; background: -moz-linear-gradient(top, #4f4c35 0%, #69844b 44%, #fbfb00 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4c35), color-stop(44%,#69844b), color-stop(100%,#fbfb00)); background: -webkit-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%); background: -o-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%); background: -ms-linear-gradient(top, #4f4c35 0%,#69844b 44%,#fbfb00 100%); background: linear-gradient(to bottom, #4f4c35 0%,#69844b 44%,#fbfb00 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4c35', endColorstr='#fbfb00',GradientType=0 ); transform: rotatez(40deg); } /* ============================================ The PEAR ============================================================= */ .pear { width: 174px; height: 207px; left: 50%; top: 50%; margin-left: 0px; margin-top: -225px; position: absolute; transform: rotateZ(5deg) scale(0.8); } .pear-up { width: 140px; height: 136px; border-radius: 70% 70% 30% 30% / 100% 100% 20% 20%; position: absolute; margin-top: 0px; margin-left: 15px; background: #d1d642; background: -moz-linear-gradient(left, #d1d642 1%, #c0c52b 50%, #c0c52b 100%); background: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b)); background: -webkit-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: -o-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: -ms-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: linear-gradient(to right, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 ); } .pear-down { border: 1px solid #969696; width: 170px; height: 136px; border-radius: 50% 50% 60% 60% / 70% 70% 60% 60% ; position: absolute; margin-top: 68px; margin-left: 1px; background: #d1d642; background: -moz-linear-gradient(left, #d1d642 1%, #c0c52b 50%, #c0c52b 100%); background: -webkit-gradient(linear, left top, right top, color-stop(1%,#d1d642), color-stop(50%,#c0c52b), color-stop(100%,#c0c52b)); background: -webkit-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: -o-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: -ms-linear-gradient(left, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); background: linear-gradient(to right, #d1d642 1%,#c0c52b 50%,#c0c52b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1d642', endColorstr='#c0c52b',GradientType=1 ); } #pear-stem { border-radius: 0 50px 0 0; width: 70px; height: 70px; border: 10px solid #7a5230; border-color: transparent transparent transparent #926239; position: absolute; top: -35px; left: 78px; } /* ========================================= The Green Apple =============================================== */ .green-apple { left: 50%; top: 50%; margin-left: -550px; margin-top: -200px; width: 255px; height: 280px; position: absolute; transform: rotateY(180deg) scale(0.8); } /* === Apple for Shaded Right Side Outline === */ .green-apple2 { margin: 80px 0 0px -33px; position: absolute; width: 251px; height: 233px; z-index: 1; } .green-applel2, .green-appler2 { width: 160px; height: 235px; position: absolute; background-color: #618E33; top: -35px; } /* === Green Apple === */ .green-apple1 { margin: 80px 0px 0px -37px; position: relative; width: 248px; height: 231px; z-index: 3; } .green-applel, .green-appler { width: 150px; height: 225px; position: absolute; background: linear-gradient(to right, #629632 0%,#629632 100%); top: -30px; } .green-applel { background: linear-gradient(to right, #61c419 0%,#629632 42%,#629632 94%); } /* === Basic Shape of Green Apple and Shaded Right Side === */ .green-applel, .green-applel2 { border-radius: 100% 70% 80% 100%; left: 45px; transform: rotate(-16deg); } .green-appler, .green-appler2 { border-radius: 70% 100% 100% 80%; left: 120px; transform: rotate(16deg); } #green-apple-stem { border-radius: 25px 0 0 0; width: 70px; height: 70px; border: 10px solid #7a5230; border-color: transparent transparent transparent #926239; position: absolute; top: 10px; left: 115px; z-index: 2; } /* ======== Peach ======== */ .peach { left: 50%; top: 50%; margin-left: 300px; margin-top: 100px; width: 255px; height: 280px; position: absolute; } /* === Right side darker Shaded Outline === */ .peach2 { margin: 80px 0 0px -33px; position: absolute; width: 251px; height: 233px; z-index: 1; } .peach2l, .peach2r { width: 160px; height: 235px; position: absolute; background-color: #7F1D25; top: -35px; } /* === Peach === */ .peach1 { margin: 80px 0px 0px -37px; position: relative; width: 248px; height: 231px; z-index: 3; } .peach1l, .peach1r { width: 150px; height: 225px; position: absolute; background: #a90329; background: -moz-radial-gradient(center, ellipse cover, #a90329 0%, #eade00 0%, #a90329 66%, #7f1d23 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#a90329), color-stop(0%,#eade00), color-stop(66%,#a90329), color-stop(100%,#7f1d23)); background: -webkit-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); background: -o-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); background: -ms-radial-gradient(center, ellipse cover, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); background: radial-gradient(ellipse at center, #a90329 0%,#eade00 0%,#a90329 66%,#7f1d23 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 ); top: -30px; } .peach1l { background: #a90329; background: -moz-linear-gradient(left, #a90329 0%, #f9f100 0%, #a90329 37%, #7f1d23 87%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(0%,#f9f100), color-stop(37%,#a90329), color-stop(87%,#7f1d23)); background: -webkit-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); background: -o-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); background: -ms-linear-gradient(left, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); background: linear-gradient(to right, #a90329 0%,#f9f100 0%,#a90329 37%,#7f1d23 87%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 ); } /* === Basic Shape of Peach & Outline === */ .peach1l, .peach2l { border-radius: 100% 70% 80% 100%; left: 45px; transform: rotate(-6deg); } .peach1r, .peach2r { border-radius: 70% 100% 100% 80%; left: 120px; transform: rotate(6deg); } #peach-stem { border-radius: 70px 0 0 0; width: 70px; height: 70px; border: 10px solid #7a5230; border-color: transparent transparent transparent #926239; position: absolute; top: 8px; left: 115px; z-index: 2; } /* ====== The RED Apple ====== */ .apple { left: 50%; top: 50%; margin-left: -550px; margin-top: 100px; width: 255px; height: 280px; position: absolute; } /* === Shaded Border Outline === */ .apple2 { margin: 80px 0 0px -33px; position: absolute; width: 251px; height: 233px; z-index: 1; } .apple2l, .apple2r { width: 160px; height: 235px; position: absolute; background-color: #70191E; top: -35px; } /* === RED Apple === */ .apple1 { margin: 80px 0px 0px -37px; position: relative; width: 248px; height: 231px; z-index: 3; } .apple1l, .apple1r { width: 150px; height: 225px; position: absolute; background: #a90329; background: -moz-linear-gradient(left, #a90329 82%, #7f1d23 100%); background: -webkit-gradient(linear, left top, right top, color-stop(82%,#a90329), color-stop(100%,#7f1d23)); background: -webkit-linear-gradient(left, #a90329 82%,#7f1d23 100%); background: -o-linear-gradient(left, #a90329 82%,#7f1d23 100%); background: -ms-linear-gradient(left, #a90329 82%,#7f1d23 100%); background: linear-gradient(to right, #a90329 82%,#7f1d23 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#7f1d23',GradientType=1 ); top: -30px; } .apple1l { background: #7f1d23; background: -moz-linear-gradient(left, #7f1d23 0%, #a90329 43%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#7f1d23), color-stop(43%,#a90329)); background: -webkit-linear-gradient(left, #7f1d23 0%,#a90329 43%); background: -o-linear-gradient(left, #7f1d23 0%,#a90329 43%); background: -ms-linear-gradient(left, #7f1d23 0%,#a90329 43%); background: linear-gradient(to right, #7f1d23 0%,#a90329 43%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7f1d23', endColorstr='#a90329',GradientType=1 ); } /* === Basic Shape of apple & shade outline === */ .apple1l, .apple2l { border-radius: 100% 70% 80% 100%; left: 45px; transform: rotate(-16deg); } .apple1r, .apple2r { border-radius: 70% 100% 100% 80%; left: 120px; transform: rotate(16deg); } #apple-stem { border-radius: 70px 0 0 0; width: 70px; height: 70px; border: 10px solid #7a5230; border-color: transparent transparent transparent #926239; position: absolute; top: -18px; left: 115px; z-index: 2; box-sizing: content-box; } /* ====== Banana 2 - The Circle Method ======= */ .banana2 { position: absolute; width: 420px; height: 264px; top: 50%; left: 50%; margin-top: -200px; margin-left: 200px; overflow: hidden; transform: rotateZ(45deg) scale(0.8); } .part1, .part2 { width: 400px; height: 400px; border-radius: 50% 50% 60% 60% ; position: absolute; top: 50%; left: 50%; border-style: hidden hidden solid hidden; border-width: 0px 0px 0.1em 0px; border-color: #FFFFFF #FFFFFF #999999 #FFFFFF; } /* ========= part 1 is the body of the banana - created by hiding the top area with part 2 ========== */ .part1 { margin-top: -270px; margin-left: -200px; background-color: #FFFF00; box-shadow: 0 0 70px 1px #D1CA06 inset; } /* ========= Part 2 hides most of part1 to create a curved banana body ========== */ .part2 { background-color: #FFFFFF; /* +++++ CHANGE TO BACKGROUND COLOR +++++ */ margin-top: -360px; margin-left: -200px; } /* ===== Left end created to hide pointy end of body and add color to End ===== */ .left-end2 { top: 129px; left: -24px; width: 37px; height: 80px; background: #FFFFFF; /* +++++ CHANGE TO BACKGROUND COLOR +++++ */ position: absolute; margin-top: -140px; margin-left: 10px; box-shadow: 0px 15px 6px -5px #70424e; transform: rotatez(-21deg); } /* ========= obvious part - also hides the pointy right end ========== */ .banana2-stem { width: 28px; height: 75px; background: linear-gradient(to bottom, #4f4c35 0%,#69844b 44%,#fbfb00 100%); position: absolute; top: 145px; left: 390px; margin-top: -140px; border-radius: 30% 40% 0 0; transform: rotatez(14deg); } /* ========= Adds dimensions and that little edge in a banana ========== */ .line { margin-top: -320px; margin-left: -200px; width: 400px; height: 400px; border-radius: 50% 50% 60% 60% ; position: absolute; top: 50%; left: 50%; border-style: hidden hidden solid hidden; border-width: 0px 0px 1px 0px; border-color: #FFFFFF #FFFFFF #999999 #FFFFFF; }

Bowl of Fruit made with Pure CSS
]]> https://thingography.com/css-fruit/feed/ 0 Fan Pure CSS Animation https://thingography.com/css-fan-round/ https://thingography.com/css-fan-round/#respond Sun, 18 Feb 2018 20:32:38 +0000 http://thingography.com/my-things/?p=103 .ani-box {height: 700px; position:relative; overflow: hidden; background: linear-gradient(to bottom, rgba(56,101,153,1) 0%,rgba(149,177,201,1) 37%,rgba(211,221,229,1) 77%); background-color: #39466b; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGRlZnM+CgkJPHBhdHRlcm4gaWQ9J3RpbGUnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHdpZHRoPSc3NScgaGVpZ2h0PSc3NScgdmlld0JveD0nMCAwIDUwIDUwJz4KCQkJPGxpbmUgeDE9JzEnIHkxPScwJyB4Mj0nNTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNDknIHkxPScwJyB4Mj0nLTEnIHkyPSc1MCcgc3Ryb2tlPScjODc5YWYwJyBzdHJva2Utd2lkdGg9JzcuNicvPgoJCQk8bGluZSB4MT0nNTAnIHkxPScwJyB4Mj0nMCcgeTI9JzUwJyBzdHJva2U9JyMzMTM3NjMnIHN0cm9rZS13aWR0aD0nNy42Jy8+CgkJCTxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzUwJyB5Mj0nNTAnIHN0cm9rZT0nIzMxMzc2Mycgc3Ryb2tlLXdpZHRoPSc3LjYnLz4KCQk8L3BhdHRlcm4+CgkJPHJhZGlhbEdyYWRpZW50IGlkPSdsJyBjeD0nNTAlJyBjeT0nMjAwJScgZnk9JzAnIHI9JzIwMSUnPgoJCQk8c3RvcCBvZmZzZXQ9JzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojZmZmOyBzdG9wLW9wYWNpdHk6LjE7JyAvPgoJCQk8c3RvcCBvZmZzZXQ9JzEwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5OjAuMTsnIC8+CgkJCTxzdG9wIG9mZnNldD0nMzAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6MC4zOycgLz4KCQkJPHN0b3Agb2Zmc2V0PSc5MCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwMDA7IHN0b3Atb3BhY2l0eTowLjU1OycgLz4KCQkJPHN0b3Agb2Zmc2V0PScxMDAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6LjYnIC8+CgkJPC9yYWRpYWxHcmFkaWVudD4KCTwvZGVmcz4KCTxyZWN0IGZpbGw9JyMzOTQ2NmInIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IGZpbGw9J3VybCgjdGlsZSknIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnLz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjbCknLz4KPC9zdmc+'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .fan { width: 500px; height: 500px; margin: 0px auto 1em auto; position: relative; top: 30px; box-sizing: content-box; } #blades { width: 500px; height: 500px; left: 50%; top: 50%; border-radius: 50%; position: absolute; margin-top: -250px; margin-left: -250px; } .blades { animation: fan 100s linear infinite; } .high { animation: fan 40s linear infinite; } .blade1, .blade2, .blade3, .blade4, .blade5 { border: 1px solid #969696; display: block; width: 150px; height: 195px; border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; box-shadow: 0px 0px 5px 0px #000000; position: absolute; } .blade1 { top: 20px; left: 171px; background: rgb(252,128,134); background: -moz-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%, rgba(255,0,0,1) 100%, rgba(249,104,82,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(252,128,134,1)), color-stop(100%,rgba(255,0,0,1)), color-stop(100%,rgba(249,104,82,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); background: radial-gradient(ellipse at center, rgba(252,128,134,1) 0%,rgba(255,0,0,1) 100%,rgba(249,104,82,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fc8086', endColorstr='#f96852',GradientType=1 ); } .blade2 { transform: rotateZ(90deg); top: 156px; left: 308px; background: rgb(102,201,107); background: -moz-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%, rgba(111,158,104,1) 0%, rgba(69,130,42,1) 100%, rgba(111,158,104,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(102,201,107,1)), color-stop(0%,rgba(111,158,104,1)), color-stop(100%,rgba(69,130,42,1)), color-stop(100%,rgba(111,158,104,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); background: radial-gradient(ellipse at center, rgba(102,201,107,1) 0%,rgba(111,158,104,1) 0%,rgba(69,130,42,1) 100%,rgba(111,158,104,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c96b', endColorstr='#6f9e68',GradientType=1 ); } .blade3 { transform: rotateZ(180deg); top: 285px; left: 178px; background: rgb(208,228,247); background: -moz-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%, rgba(238,247,158,1) 0%, rgba(240,252,12,1) 48%, rgba(238,247,163,1) 99%, rgba(238,247,163,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(208,228,247,1)), color-stop(0%,rgba(238,247,158,1)), color-stop(48%,rgba(240,252,12,1)), color-stop(99%,rgba(238,247,163,1)), color-stop(100%,rgba(238,247,163,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); background: radial-gradient(ellipse at center, rgba(208,228,247,1) 0%,rgba(238,247,158,1) 0%,rgba(240,252,12,1) 48%,rgba(238,247,163,1) 99%,rgba(238,247,163,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#eef7a3',GradientType=1 ); } .blade4 { transform: rotateZ(-90deg); top: 158px; left: 41px; background: rgb(208,228,247); background: -moz-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 0%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 100%, rgba(135,188,234,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(208,228,247,1)), color-stop(0%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(100%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); background: radial-gradient(ellipse at center, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 0%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 100%,rgba(135,188,234,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=1 ); } .center { width: 76px; height: 76px; top: 50%; left: 50%; position: absolute; margin-top: -40px; margin-left: -40px; border: 2px solid #000000; border-radius: 50%; background: rgb(245,246,246); background: -moz-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 8%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 92%, rgba(245,246,246,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(8%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(92%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } @keyframes fan { 0% {transform: rotate(0deg) } 100% {transform: rotate(36000deg) } } .grid, .grid1, .grid2, .grid3, .grid4, .grid5 { border: 8px solid #919191; width: 484px; height: 484px; top: 50%; left: 50%; margin-top: -250px; margin-left:-250px; position: absolute; border-radius: 50%; box-sizing: content-box; } .grid1 {transform: scale(0.8);} .grid2 {transform: scale(0.6);} .grid3 {transform: scale(0.4);} .grid4 {transform: scale(0.2);} .grid5 {transform: scale(0.1);} /* ==== Grid Cross Bars ===== */ .upright1, .upright2, .upright3 { margin: 0px 0px 0px 239px; height: 218px; background-color: #919191; width: 5px; position: relative; box-sizing: content-box; } .upright2 { margin: -20px 0px 0px 125px; height: 220px; transform: rotateZ(-120deg); } .upright3 { margin: -220px 0px 0px 358px; height: 224px; transform: rotateZ(120deg); } /* ========= Switch ========= */ #control { margin: 3em auto 1.5em auto; width: 80%; position: relative; text-align: center; } button { padding: 4px 8px; margin: 0.5em; font-family: Stencil; color: #FFFFFF; background-color: #009900; border: 3px ridge #CCCCCC; text-align: center; font-size: 1.3em; line-height: 1.3em; display: inline-block; } @media screen and (max-width: 480px) { .fan { transform: scale(0.5); margin-left: -20%; transform-origin: top center; } } .low-text {color: #fff;} .high-text {color: #004F00;}

Check out 2 more CSS FANS: FAN and FAN-BOX

]]> https://thingography.com/css-fan-round/feed/ 0 Fan Box CSS Animation https://thingography.com/css-fan-box/ https://thingography.com/css-fan-box/#respond Sun, 18 Feb 2018 20:11:40 +0000 http://thingography.com/my-things/?p=100 .ani-box {height: 600px; overflow: hidden; } .fan-box { padding: 0px 20px 20px -8px; width: 505px; height: 505px; margin-top: 0; margin-right: auto; margin-left: auto; position: relative; box-sizing: content-box; } .blades-box { width: 500px; height: 500px; left: 50%; top: 50%; border-radius: 50%; position: absolute; margin-top: -250px; margin-left: -250px; box-sizing: content-box; } .blades-box { animation: spin 20s linear infinite; } .blade1b, .blade2b, .blade3b, .blade4b, .blade5b { width: 0px; height: 0px; border-radius: 45% 45% 0 0 / 80% 100% 0 0; border-left: 90px solid transparent; border-right: 90px solid transparent; position: absolute; box-shadow:0 0 0 1px #999; } .blade1b { top: 20px; left: 161px; border-top: 200px solid #FFFF00; /* "border-top" will change the blade Color */ } .blade2b { transform: rotateZ(72deg); top: 110px; left: 282px; border-top: 200px solid #0000FF; } .blade3b { transform: rotateZ(144deg); top: 254px; left: 239px; border-top: 200px solid #FF0000; } .blade4b { transform: rotateZ(-144deg); top: 255px; left: 77px; border-top: 200px solid #00FF00; } .blade5b { transform: rotateZ(-72deg); top: 106px; left: 39px; border-top: 200px solid #FF9900; } .centerb { width: 76px; height: 76px; top: 50%; left: 50%; position: absolute; margin-top: -40px; margin-left: -40px; border: 2px solid #000000; border-radius: 50%; background: rgb(245,246,246); background: -moz-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 8%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 92%, rgba(245,246,246,1) 100%); background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(245,246,246,1)), color-stop(8%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(92%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); background: -webkit-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -o-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: -ms-radial-gradient(center, ellipse cover, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); background: radial-gradient(ellipse at center, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 8%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 92%,rgba(245,246,246,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 ); } @keyframes spin { 0% { transform: rotatez( 0deg);} 25% { transform: rotateZ(1440deg);} 50% { transform: rotateZ(7200deg);} 75% { transform: rotateZ(1440deg);} 100% { transform: rotateZ( 0deg);} } .gridb { border: 8px solid #D1D1D1; width: 484px; height: 484px; top: 50%; left: 50%; margin-top: -251px; margin-left:-249px; position: absolute; border-radius: 7%; box-sizing: content-box; } .bar1, .bar2, .bar3, .bar4, .bar5, .bar6, .bar7, .bar8, .bar9, .bar10, .bar11 { width: 484px; height: 20px; position: relative; border: 3px solid #D1D1D1; position: relative; margin: 20px 0px 10px -3px; box-sizing: content-box; } .bar1 { margin: 23px 0px 10px -3px; } /* ==== Grid Cross Bars ===== */ .upright { margin: -480px 0px 0px 156px; width: 166px; position: relative; height: 488px; border: 3px solid #D1D1D1; box-sizing: content-box; } @media screen and (max-width: 480px) { .fan-box { transform: scale(0.5); margin-left: -20%; transform-origin: top center; } }

Check out 2 more CSS FANS: FAN and FAN-ROUND

]]> https://thingography.com/css-fan-box/feed/ 0 Fan CSS Animation https://thingography.com/css-fan/ https://thingography.com/css-fan/#respond Sun, 18 Feb 2018 20:10:19 +0000 http://thingography.com/my-things/?p=96 .ani-box {height: 550px; position: relative; overflow: hidden;} .fanbox { margin: -20px auto 0px auto; width: 90%; position: relative; padding-bottom: 2em; height: 416px; width: 416px; box-sizing: content-box; } #grid { border: 6px solid #777; border-radius: 50%; left: 50%; top: 50%; position: absolute; z-index: 3; margin-left: -208px; margin-top: -220px; height: 416px; width: 416px; box-sizing: content-box; } #fan { position: absolute; top: 50%; left: 50%; margin-top: -204px; margin-left: -193px; height: 400px; width: 400px; box-sizing: content-box; } .low { animation: fan 120s linear infinite; } .high { animation: fan 40s linear infinite; } @keyframes fan { 0% {transform: rotate(0deg) } 100% {transform: rotate(36000deg)} } /* ========= Switch ========= */ #control { margin: 0em auto .5em auto; width: 80%; position: relative; text-align: center; } button { padding: 5px 8px; margin: 0.5em; color: #FFFFFF; background-color: #009900; border: 3px ridge #CCCCCC; text-align: center; font-size: 1.1em; line-height: 1em; display: inline-block; } @media screen and (max-width: 480px) { .fanbox { transform: scale(0.5); margin-left: -10%; } #grid { display: none; } } #speed span {top: -20px; padding-bottom: 10px; vertical-align: text-top;} .low-text {color: #fff;} .high-text {color: #004F00;}
fan
grid

This switch may not work in Internet Explorer –
Check out 2 more CSS FANS: FAN-BOX and FAN-ROUND

]]> https://thingography.com/css-fan/feed/ 0