css样式集

记录一些不常用但是常见的css样式

1.呼吸灯效果

.breath-light{

opacity: 0.5;

overflow: hidden;

-webkit-animation-name: breath;

-webkit-animation-duration: 700ms;

-webkit-animation-timing-function: ease-in-out;

-webkit-animation-iteration-count: infinite;

animation-name: breath;

animation-duration: 700ms;

animation-timing-function: ease-in-out;

animation-iteration-count: infinite;

 

-webkit-animation-name:scaleDraw;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;

-webkit-animation-duration:5s;

}

@keyframes breath{

from { opacity: 0.5; }

50% { opacity: 1; }

to { opacity: 0.5; }

}

@-webkit-keyframes breath{

from { opacity: 0.5; }

50% { opacity: 1; }

to { opacity: 0.5; }

}

 

2.图片闪烁效果

.breath-light{

-webkit-animation-name:scaleDraw;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;

-webkit-animation-duration:5s;

}

@keyframes scaleDraw {

0% {

transform:scale(0.9);

}

25% {

transform:scale(1.1);

}

50% {

transform:scale(0.9);

}

75% {

transform:scale(1.1);

}

}

.breath-light{

-webkit-animation-name:scaleDraw;

-webkit-animation-timing-function:ease-in-out;

-webkit-animation-iteration-count:infinite;

-webkit-animation-duration:5s;

}

@keyframes scaleDraw {

0% {

transform:scale(0.9);

}

25% {

transform:scale(1.1);

}

50% {

transform:scale(0.9);

}

75% {

transform:scale(1.1);

}

}