I have tried some codes to make my logo shining using CSS3. Unfortunately the result was not so nice. Have a look my snippet what I've done.
p/s: The border of the flash makes my splash screen not so nice.
My expected output:
Shining move along the logo.
/*Splash screen*/
body
{
background-color:#ccc;
}
.middle-screen
{
height: 100px;
/* margin-top: 31vh;*/
width: 74%;
margin-left: auto;
margin-right: auto;
}
i.splash {
position: absolute;
opacity: 0;
top: 0;
left: 0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
width: 20%;
height: 72px;
transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
-moz-transform: skew(-10deg, 0deg);
-ms-transform: skew(-10deg, 0deg);
-o-transform: skew(-10deg, 0deg);
animation: move 5s;
/*animation-iteration-count: infinite;*/
animation-delay: 300ms;
-webkit-animation: move 5s;
/*-webkit-animation-iteration-count: infinite;*/
-webkit-animation-delay: 300ms;
-moz-transform: skew(-10deg, 0deg);
-moz-animation: move 5s;
/*-moz-animation-iteration-count: infinite;*/
-moz-animation-delay: 1s;
-ms-transform: skew(-10deg, 0deg);
-ms-animation: move 5s;
/*-ms-animation-iteration-count: infinite;*/
-ms-animation-delay: 1s;
-o-transform: skew(-10deg, 0deg);
-o-animation: move 5s;
/*-o-animation-iteration-count: infinite;*/
-o-animation-delay: 1s;
margin-top: 39vh;
}
/* */
#keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.8;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.2;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 88%;
}
}
#-ms-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
<div class="bg-splash">
<div class="middle-screen">
<img width="100%" src="http://jiayuhk.com/sc/assets/img/sample/shortcode/logo/1.png" />
<i class="splash"></i>
</div>
</div>
I removed the margin-top: 31vh;from .middle-screen. Perhaps this is what you wanted:
/*Splash screen*/
body
{
background-color:#ccc;
}
.middle-screen
{
height: 100px;
width: 74%;
margin-left: auto;
margin-right: auto;
}
i.splash {
position: absolute;
opacity: 0;
top: 0;
left: 0;
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ff3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,1)), color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,0))); /* safari4+,chrome */
background:-webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* safari5.1+,chrome10+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* opera 11.10+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* ie10+ */
background:radial-gradient(ellipse at center, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%, rgba(255,255,255,0) 100%); /* w3c */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); /* ie6-9 */
width: 20%;
height: 72px;
transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
-moz-transform: skew(-10deg, 0deg);
-ms-transform: skew(-10deg, 0deg);
-o-transform: skew(-10deg, 0deg);
animation: move 5s;
/*animation-iteration-count: infinite;*/
animation-delay: 300ms;
-webkit-animation: move 5s;
/*-webkit-animation-iteration-count: infinite;*/
-webkit-animation-delay: 300ms;
-moz-transform: skew(-10deg, 0deg);
-moz-animation: move 5s;
/*-moz-animation-iteration-count: infinite;*/
-moz-animation-delay: 1s;
-ms-transform: skew(-10deg, 0deg);
-ms-animation: move 5s;
/*-ms-animation-iteration-count: infinite;*/
-ms-animation-delay: 1s;
-o-transform: skew(-10deg, 0deg);
-o-animation: move 5s;
/*-o-animation-iteration-count: infinite;*/
-o-animation-delay: 1s;
margin-top: 39vh;
}
/* */
#keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.8;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-webkit-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.2;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-moz-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 88%;
}
}
#-ms-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
#-o-keyframes move {
0% {
left: 0;
opacity: 0;
}
5% {
opacity: 0.0;
}
48% {
opacity: 0.4;
}
80% {
opacity: 0.0;
}
100% {
left: 82%;
}
}
<div class="bg-splash">
<div class="middle-screen">
<img width="100%" src="http://jiayuhk.com/sc/assets/img/sample/shortcode/logo/1.png" />
<i class="splash"></i>
</div>
</div>
Just remove the margin-top from your .middle_screen and you should be good to go.
Related
Hello and thank you in advance.
I have 3D cube on my site.
When I import external CSS file, it just makes my cube go wrong. Cube goes to left, and I can't move it again.
When I delete external css, everything works as it should.
#import url("mojmeni.css"); - located in head
body { font-family: sans-serif;
font-family: monospace;
text-transform: uppercase;
backgroud: #999;
}
.container {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
ul {
display: flex;
flex-direction: row;
font-size: 22px;
}
li {
position: relative;
list-style-type: none;
margin-right: 50px;
cursor: pointer;
color: black;
}
li:last-child {
margin-right: 0px;
}
li:after {
content: "";
position: absolute;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(0deg);
}
li:nth-child(1):after {
background: #ED4337;
}
li:nth-child(2):after {
background: #A1D3A2;
}
li:nth-child(3):after {
background: #50B8E7;
}
li:nth-child(4):after {
background: #efe200;
}
li:nth-child(1):after {
clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
height: 85px;
width: 75px;
bottom: -47px;
animation: stretch 2s ease infinite;
}
#keyframes stretch {
25% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93);
}
50% {
transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
}
}
li:nth-child(2):after {
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
height: 55px;
width: 75px;
bottom: -18px;
animation: stretch2 1.5s ease infinite;
}
#keyframes stretch2 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
}
}
li:nth-child(3):after {
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 0% 57%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch3 2s ease infinite;
}
#keyframes stretch3 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(10% 5%, 100% 0%, 100% 99%, 0% 57%);
}
75% {
transform: translateX(-50%) rotate(3deg) scale(1.05);
clip-path: polygon(0% 0%, 100% 0%, 100% 99%, 10% 37%);
}
}
li:nth-child(4):after {
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
height: 55px;
width: 45px;
bottom: -18px;
animation: stretch4 2s ease infinite;
}
#keyframes stretch4 {
25% {
transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
}
50% {
transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
75% {
transform: translateX(-50%) rotate(3deg) scaleY(1.05);
clip-path: polygon(0% 40%, 100% 0%, 100% 99%, 19% 100%);
}
}
li:hover:after {
animation: boink 1s ease forwards 1;
}
#keyframes boink {
80% {
transform: scaleX(1.9) scaleY(0.6) translateX(-30%);
}
}
#media (max-width: 600px) {
li {
font-size: 15px;
}
}
This is external css file
What is wrong with external css file so I can't insert it properly ? Thank you.
I have been stucked with this code.
Thank you very much.
https://www.jqueryscript.net/slider/3D-Cube-Slider-jQuery-cubeGallery.html
When I insert cube, everything works as it should be. But not when I insert external css.
Thank you.
I have a 3D triangle with a base color for every shape, but I want the base (aka the square) to have an animated color, but after adding the animation, the triangles all lay flat all of the sudden. When I remove the animation, the shapes readjust as they should.
For the animation I hue-rotate the linear-gradient color of the square in #keframes animate.
Here is the html code:
<div class="wrapper">
<div class="pyramid">
<div class="square">
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
<div class="triangle"></div>
</div>
</div>
</div>
And CSS:
#-webkit-keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#keyframes animate {
0%, 100% {
filter: hue-rotate(0deg);
}
50% {
filter: hue-rotate(360deg);
}
}
#-webkit-keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
#keyframes rotate {
from {
transform: rotateX(120deg) rotateZ(0deg);
}
50% {
transform: rotateX(120deg) rotateZ(180deg);
}
to {
transform: rotateX(120deg) rotateZ(360deg);
}
}
.wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
top: 500px;
left: 50%;
margin-bottom: 0;
transform-style: preserve-3d;
width: 3.75rem;
height: 3.75rem;
transform-origin: 1.875rem 1.875rem;
transform: rotateX(120deg) rotateZ(45deg);
-webkit-animation: rotate 4s linear infinite;
animation: rotate 4s linear infinite;
}
.pyramid {
position: absolute;
perspective: 500px;
transform-style: preserve-3d;
}
.square {
width: 3.75rem;
height: 3.75rem;
transform-style: preserve-3d;
background: linear-gradient(to left, #008aff, #00ffe7);
-webkit-animation: animate 5s linear infinite;
animation: animate 5s linear infinite;
}
.triangle {
position: absolute;
width: 5rem;
height: 5rem;
}
.triangle:nth-child(1) {
width: 3.75rem;
top: -33%;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
transform-origin: 50% 100%;
transform: rotateX(-68deg);
}
.triangle:nth-child(2) {
width: 3.75rem;
background: #f1ecfb;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
transform-origin: 50% 0%;
transform: rotateX(68deg);
}
.triangle:nth-child(3) {
height: 3.75rem;
left: -33%;
background: white;
transform-origin: 100% 50%;
-webkit-clip-path: polygon(100% 100%, 0 50%, 100% 0);
clip-path: polygon(100% 100%, 0 50%, 100% 0);
transform: rotateY(68deg);
}
.triangle:nth-child(4) {
height: 3.75rem;
background: white;
transform-origin: 0% 50%;
-webkit-clip-path: polygon(0 100%, 100% 50%, 0 0);
clip-path: polygon(0 100%, 100% 50%, 0 0);
transform: rotateY(-68deg);
}
I changed it so that the animation changes the background color which resolves the issue.
#-webkit-keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}
#keyframes animate {
0%, 100%{
background: #ffadad;
}
12.5%{
background: #ffd6a5;
}
25%{
background: #fdffb6;
}
37.5%{
background: #caffbf;
}
50%{
background: #9bf6ff;
}
62.5%{
background: #a0c4ff;
}
75%{
background: #bdb2ff;
}
87.5%{
background: #ffc6ff;
}
}
A spinner I want to use on my site looks bad on Firefox (48.0.2).
Comparison between Firefox and Chrome (imgur)
See the spinner live (Third spinner)
Is there a fix for this rendering issue?
Slowing the animation down didn't help so I'm turning to you guys (:D) and I don't think there is a fix for this yet on stackoverflow.
Here is code demonstrating the problematic spinner:
body {
background: #0dc5c1;
}
.loader {
font-size: 10px;
margin: 50px auto;
text-indent: -9999em;
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load3 1.4s infinite linear;
animation: load3 1.4s infinite linear;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#-webkit-keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loader">Loading...</div>
Tested on Firefox, Chrome, Edge and IE(11). Only Firefox has problems.
body {
background: #0dc5c1;
}
.loader {
font-size: 10px;
margin: 50px auto;
/*text-indent: -9999em;*/
width: 11em;
height: 11em;
border-radius: 50%;
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
-webkit-animation: load 1.4s infinite linear;
animation: load 1.4s infinite linear;
/* -webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);*/
}
.loader:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: '';
}
.loader:after {
background: #0dc5c1;
width: 75%;
height: 75%;
border-radius: 50%;
content: '';
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#-webkit-keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes load {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="loader"></div>
I have a html program with a css and js file, and i have a continuously looping spin animation on one of my elements, when i hover over it it changes its animation to a different animation, but when i hover it, it instantly moves back to 0deg causing a uncomfortable jump, is there a way for the animation to know where it is currently to start at that position?
here's my code, its all of it so its a bit long
body{
background: #808080;
}
.Glow{
transform: rotate(90deg);
background:blue;
position: absolute;
border-radius: 50%;
overflow: hidden;
}
.Glow:nth-child(1){
width: 300px;
height: 300px;
background: #ffffff;
-webkit-clip-path: polygon(00% 100%, 50% 50%, 100% 100%);
}
.Glow:nth-child(2){
width: 300px;
height: 300px;
background: #ffffff;
-webkit-clip-path: polygon(0% 0%, 50% 50%, 100% 0%);
}
.Glow:nth-child(3){
width: 270px;
height: 270px;
margin: 15px;
background: #808080;
}
.Glow:nth-child(4){
width: 300px;
height: 300px;
-webkit-clip-path: polygon(30% 100%, 45% 85%, 50% 50%, 55% 85%, 70% 100%);
background: #ffffff;
}
.Glow:nth-child(5){
width: 300px;
height: 300px;
-webkit-clip-path: polygon(30% 0%, 45% 15%, 50% 50%, 55% 15%, 70% 0%);
background: #ffffff;
}
.Glow:nth-child(6){
left: 45%;
top: 19%;
border-radius: 0%;
width: 3px;
height: 100px;
background: linear-gradient(#808080, #cccccc);
animation: null;
transform: rotate(0deg);
}
.Glow:nth-child(7){
left: 46.6%;
top: 19%;
border-radius: 0%;
width: 3px;
height: 100px;
background: linear-gradient(#808080, #cccccc);
animation: null;
transform: rotate(0deg);
}
.Glow:nth-child(8){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(0% 0%, 0% 30%, 8% 39%, 8% 61%, 0% 70%, 0% 100%, 100% 100%, 100% 70%, 92% 61%, 92% 39%, 100% 30%, 100% 0%);
background: #ffffff;
}
.Glow:nth-child(9){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(6% 41%, 6% 60%, 0% 66%, 0% 34%);
background: #ffffff;
}
.Glow:nth-child(10){
width: 150px;
height: 150px;
margin: 75px;
-webkit-clip-path: polygon(94% 41%, 94% 60%, 100% 66%, 100% 34%);
background: #ffffff;
}
.Glower:hover{
left: 37%;
top: 20%;
animation: spin1 2s linear 0s infinite;
}
.Glower{
transform: rotate(0deg);
position: absolute;
left: 37%;
top: 20%;
width: 300px;
height: 300px;
animation: spin 4s linear 0s infinite forwards;
}
#-webkit-keyframes spin{
100%{
-webkit-transform: rotate(450deg);
}
}
#-webkit-keyframes spinside{
100%{
-webkit-transform: rotate(270deg);
}
}
#-webkit-keyframes openCircle1{
100%{
top: 40%;
}
}
#-webkit-keyframes openCircle2{
100%{
top: 10%;
}
}
#-webkit-keyframes spin1{
0%{
-webkit-transform: scale(1) rotate(0deg);
}
25%{
-webkit-transform: scale(.9) rotate(120deg);
}
75%{
-webkit-transform: scale(1.1) rotate(240deg);
}
100%{
-webkit-transform: scale(1) rotate(360deg);
}
}
Edit: i use the spin1 and the spin animation btw
Edit 2: here's the codepen upload https://codepen.io/Inertiality/pen/mEBkvN
Edit 3: am i able to use transitions? cause i dont see how those could work with the animations
I'm creating a CSS3 loading icon effect instead of using GIF. I have created the loading icon effect but I'm unable to make it circle. It is revolving in square instead of circle. Border-radius not working with border-image property ?
HTML
<div id="progress">
<span class="spinner-icon"></span>
</div>
CSS
#progress {
pointer-events: none;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display:block;
border: solid 2px transparent;
border-radius:50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
-moz-border-image: -moz-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
-webkit-border-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-image: linear-gradient(to bottom, #3acfd5 0%, #3a4ed5 100%);
border-image-slice: 1;
}
#progress {
position: absolute;
}
#-webkit-keyframes progress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
#keyframes progress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
http://jsfiddle.net/44athund/3/
This won't work with border-image. The radius is being applied to the object however the border-image with a gradient will not be respected.
Based on what you what, I've created a fiddle here https://jsfiddle.net/a9dpg582/1/ I think this is what you're after.
#progress {
pointer-events: none;
position: relative;
}
#progress .spinner-icon::after {
content: '';
border-radius: 50%;
background-color: #FFF;
width: 26px;
height: 26px;
position: absolute;
left: 2px;
top: 2px;
}
#progress .spinner-icon {
width: 30px;
height: 30px;
display: block;
background-image: -webkit-linear-gradient(top, #3acfd5 0%, #3a4ed5 100%);
border-radius: 50%;
-webkit-animation: progress-spinner 600ms linear infinite;
animation: progress-spinner 600ms linear infinite;
}
#progress {
position: absolute;
border-radius: 50%;
}
#-webkit-keyframes progress-spinner {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes progress-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}