css3光束_CSS3 光束散射旋转动画

最新推荐文章于 2021-05-31 14:26:14 发布
最新推荐文章于 2021-05-31 14:26:14 发布
阅读量832 收藏
点赞数
文章标签： css3光束
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39673742/article/details/111733943
版权

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

body {

background-color: #1a1a1a;

font-family: 'Roboto', sans-serif;

}

@-webkit-keyframes beamOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(360deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(360deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(360deg) scale(1);

opacity: 1;

}

}

@keyframes beamOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(360deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(315deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(315deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(315deg) scale(1);

opacity: 1;

}

}

@keyframes beamTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(315deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(270deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(270deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(270deg) scale(1);

opacity: 1;

}

}

@keyframes beamThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(270deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(225deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(225deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(225deg) scale(1);

opacity: 1;

}

}

@keyframes beamFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(225deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(180deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(180deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(180deg) scale(1);

opacity: 1;

}

}

@keyframes beamFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(180deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(135deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(135deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(135deg) scale(1);

opacity: 1;

}

}

@keyframes beamSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(135deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(90deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(90deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(90deg) scale(1);

opacity: 1;

}

}

@keyframes beamSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(90deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(45deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(45deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(45deg) scale(1);

opacity: 1;

}

}

@keyframes beamEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(45deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamOneCounter {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-360deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamOneCounter {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-360deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamOneCounter {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-360deg) scale(1);

opacity: 1;

}

}

@keyframes beamOneCounter {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-360deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamTwoCounter {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-405deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamTwoCounter {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-405deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamTwoCounter {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-405deg) scale(1);

opacity: 1;

}

}

@keyframes beamTwoCounter {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-405deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamThreeCounter {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-450deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamThreeCounter {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-450deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamThreeCounter {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-450deg) scale(1);

opacity: 1;

}

}

@keyframes beamThreeCounter {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-450deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamFourCounter {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-495deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamFourCounter {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-495deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamFourCounter {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-495deg) scale(1);

opacity: 1;

}

}

@keyframes beamFourCounter {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-495deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamFiveCounter {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-360deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-540deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamFiveCounter {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-360deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-540deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamFiveCounter {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-360deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-540deg) scale(1);

opacity: 1;

}

}

@keyframes beamFiveCounter {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-360deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-540deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamSixCounter {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-405deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-585deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamSixCounter {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-405deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-585deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamSixCounter {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-405deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-585deg) scale(1);

opacity: 1;

}

}

@keyframes beamSixCounter {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-405deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-585deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamSevenCounter {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-450deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-630deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamSevenCounter {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-450deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-630deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamSevenCounter {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-450deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-630deg) scale(1);

opacity: 1;

}

}

@keyframes beamSevenCounter {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-450deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-630deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamEightCounter {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-495deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-675deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamEightCounter {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-495deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-675deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamEightCounter {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-495deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-675deg) scale(1);

opacity: 1;

}

}

@keyframes beamEightCounter {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-495deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-675deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseOne {

0% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(0deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(0deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseTwo {

0% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-45deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-45deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseThree {

0% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-90deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-90deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseFour {

0% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-135deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-135deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseFive {

0% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-180deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-180deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseSix {

0% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-225deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-225deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseSeven {

0% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-270deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-270deg) scale(1);

opacity: 1;

}

}

@-webkit-keyframes beamPulseEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

}

@-moz-keyframes beamPulseEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

}

@-o-keyframes beamPulseEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

}

@keyframes beamPulseEight {

0% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

50% {

transform: rotate(-315deg) scale(1.2);

opacity: 0.8;

}

100% {

transform: rotate(-315deg) scale(1);

opacity: 1;

}

}

h2 {

text-align: center;

color: white;

font-size: 1.4em;

}

.flex {

display: flex;

flex-flow: row wrap;

justify-content: stretch;

align-items: center;

}

.flex .display-column {

display: flex;

flex-flow: column nowrap;

align-items: center;

margin: 0 1em 0 1em;

flex-grow: 1;

}

.flex .display-column .display-item:not(.header) {

margin: 2.2em;

}

.flex .display-column .display-item:last-of-type {

margin-top: 4em;

}

.flex .display-column .display-item label {

color: white;

font-size: 1.1em;

border-bottom: 1px solid white;

}

.beam-badge {

position: relative;

}

.beam-badge.small.hover:hover .circle {

box-shadow: 0 0 0.6em rgba(255, 255, 255, 0.8);

}

.beam-badge.small .beam {

top: -1.1em;

left: 1em;

width: 0.8em;

height: 2.5em;

}

.beam-badge.small .circle {

width: 2.8em;

height: 2.8em;

padding: 1.1em;

padding-left: 1.05em;

box-shadow: 0 0 0.3em rgba(255, 255, 255, 0.8);

}

.beam-badge.small .star {

margin-top: -0.125em;

margin-left: -0.66667em;

border-right: 1em solid transparent;

border-bottom-width: 0.7em;

border-left: 1em solid transparent;

}

.beam-badge.small .star::before {

top: -0.45em;

left: -0.65em;

border-bottom-width: 0.8em;

border-left: 0.3em solid transparent;

border-right: 0.3em solid transparent;

}

.beam-badge.small .star::after {

top: 0.03em;

left: -1.05em;

border-right: 1em solid transparent;

border-bottom-width: 0.7em;

border-left: 1em solid transparent;

}

.beam-badge.medium.hover:hover .circle {

box-shadow: 0 0 1.2em rgba(255, 255, 255, 0.8);

}

.beam-badge.medium .beam {

top: -2.2em;

left: 2em;

width: 1.6em;

height: 5em;

}

.beam-badge.medium .circle {

width: 5.6em;

height: 5.6em;

padding: 2.2em;

padding-left: 2.1em;

box-shadow: 0 0 0.6em rgba(255, 255, 255, 0.8);

}

.beam-badge.medium .star {

margin-top: -0.25em;

margin-left: -1.33333em;

border-right: 2em solid transparent;

border-bottom-width: 1.4em;

border-left: 2em solid transparent;

}

.beam-badge.medium .star::before {

top: -0.9em;

left: -1.3em;

border-bottom-width: 1.6em;

border-left: 0.6em solid transparent;

border-right: 0.6em solid transparent;

}

.beam-badge.medium .star::after {

top: 0.06em;

left: -2.1em;

border-right: 2em solid transparent;

border-bottom-width: 1.4em;

border-left: 2em solid transparent;

}

.beam-badge.large.hover:hover .circle {

box-shadow: 0 0 1.8em rgba(255, 255, 255, 0.8);

}

.beam-badge.large .beam {

top: -3.3em;

left: 3em;

width: 2.4em;

height: 7.5em;

}

.beam-badge.large .circle {

width: 8.4em;

height: 8.4em;

padding: 3.3em;

padding-left: 3.15em;

box-shadow: 0 0 0.9em rgba(255, 255, 255, 0.8);

}

.beam-badge.large .star {

margin-top: -0.375em;

margin-left: -2em;

border-right: 3em solid transparent;

border-bottom-width: 2.1em;

border-left: 3em solid transparent;

}

.beam-badge.large .star::before {

top: -1.35em;

left: -1.95em;

border-bottom-width: 2.4em;

border-left: 0.9em solid transparent;

border-right: 0.9em solid transparent;

}

.beam-badge.large .star::after {

top: 0.09em;

left: -3.15em;

border-right: 3em solid transparent;

border-bottom-width: 2.1em;

border-left: 3em solid transparent;

}

.beam-badge.xlarge.hover:hover .circle {

box-shadow: 0 0 2.4em rgba(255, 255, 255, 0.8);

}

.beam-badge.xlarge .beam {

top: -4.4em;

left: 4em;

width: 3.2em;

height: 10em;

}

.beam-badge.xlarge .circle {

width: 11.2em;

height: 11.2em;

padding: 4.4em;

padding-left: 4.2em;

box-shadow: 0 0 1.2em rgba(255, 255, 255, 0.8);

}

.beam-badge.xlarge .star {

margin-top: -0.5em;

margin-left: -2.66667em;

border-right: 4em solid transparent;

border-bottom-width: 2.8em;

border-left: 4em solid transparent;

}

.beam-badge.xlarge .star::before {

top: -1.8em;

left: -2.6em;

border-bottom-width: 3.2em;

border-left: 1.2em solid transparent;

border-right: 1.2em solid transparent;

}

.beam-badge.xlarge .star::after {

top: 0.12em;

left: -4.2em;

border-right: 4em solid transparent;

border-bottom-width: 2.8em;

border-left: 4em solid transparent;

}

.beam-badge.hover:hover .beams {

transform: scale(1) !important;

}

.beam-badge.hover:hover .beams .beam {

opacity: 1;

}

.beam-badge.color1 .circle {

background-color: #832232;

}

.beam-badge.color1 .beam {

background: -webkit-linear-gradient(top, rgba(171, 45, 65, 0), #ab2d41) !important;

}

.beam-badge.color1 .star,

.beam-badge.color1 .star::before,

.beam-badge.color1 .star::after {

color: #fff;

border-bottom-color: #fff;

}

.beam-badge.color2 .circle {

background-color: #fff;

}

.beam-badge.color2 .beam {

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white) !important;

}

.beam-badge.color2 .star,

.beam-badge.color2 .star::before,

.beam-badge.color2 .star::after {

color: #000;

border-bottom-color: #000;

}

.beam-badge.color3 .circle {

background-color: #5f00e0;

}

.beam-badge.color3 .beam {

background: -webkit-linear-gradient(top, rgba(120, 20, 255, 0), #7814ff) !important;

}

.beam-badge.color3 .star,

.beam-badge.color3 .star::before,

.beam-badge.color3 .star::after {

color: #333;

border-bottom-color: #333;

}

.beam-badge.color4 .circle {

background-color: #015421;

}

.beam-badge.color4 .beam {

background: -webkit-linear-gradient(top, rgba(2, 134, 53, 0), #028635) !important;

}

.beam-badge.color4 .star,

.beam-badge.color4 .star::before,

.beam-badge.color4 .star::after {

color: #fff;

border-bottom-color: #fff;

}

.beam-badge .beams {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

transform: scale(0.4);

transition: transform 0.3s linear;

}

.beam-badge .beams.always-show .beam {

opacity: 1 !important;

}

.beam-badge .beams:not(.rotate) .beam.one {

animation-name: beamPulseOne;

}

.beam-badge .beams:not(.rotate) .beam.two {

animation-name: beamPulseTwo;

}

.beam-badge .beams:not(.rotate) .beam.three {

animation-name: beamPulseThree;

}

.beam-badge .beams:not(.rotate) .beam.four {

animation-name: beamPulseFour;

}

.beam-badge .beams:not(.rotate) .beam.five {

animation-name: beamPulseFive;

}

.beam-badge .beams:not(.rotate) .beam.six {

animation-name: beamPulseSix;

}

.beam-badge .beams:not(.rotate) .beam.seven {

animation-name: beamPulseSeven;

}

.beam-badge .beams:not(.rotate) .beam.eight {

animation-name: beamPulseEight;

}

.beam-badge .beams.rotate:not(.counter) .beam.one {

animation-name: beamOne;

}

.beam-badge .beams.rotate:not(.counter) .beam.two {

animation-name: beamTwo;

}

.beam-badge .beams.rotate:not(.counter) .beam.three {

animation-name: beamThree;

}

.beam-badge .beams.rotate:not(.counter) .beam.four {

animation-name: beamFour;

}

.beam-badge .beams.rotate:not(.counter) .beam.five {

animation-name: beamFive;

}

.beam-badge .beams.rotate:not(.counter) .beam.six {

animation-name: beamSix;

}

.beam-badge .beams.rotate:not(.counter) .beam.seven {

animation-name: beamSeven;

}

.beam-badge .beams.rotate:not(.counter) .beam.eight {

animation-name: beamEight;

}

.beam-badge .beams.rotate.counter .beam.one {

animation-name: beamOneCounter;

}

.beam-badge .beams.rotate.counter .beam.two {

animation-name: beamTwoCounter;

}

.beam-badge .beams.rotate.counter .beam.three {

animation-name: beamThreeCounter;

}

.beam-badge .beams.rotate.counter .beam.four {

animation-name: beamFourCounter;

}

.beam-badge .beams.rotate.counter .beam.five {

animation-name: beamFiveCounter;

}

.beam-badge .beams.rotate.counter .beam.six {

animation-name: beamSixCounter;

}

.beam-badge .beams.rotate.counter .beam.seven {

animation-name: beamSevenCounter;

}

.beam-badge .beams.rotate.counter .beam.eight {

animation-name: beamEightCounter;

}

.beam-badge .beams .beam {

position: absolute;

z-index: -2;

opacity: 0;

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), white);

-webkit-clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);

clip-path: polygon(0 0, 100% 0, 50% 100%, 50% 100%);

animation-duration: 4s;

animation-iteration-count: infinite;

animation-timing-function: linear;

transform-origin: 50% 100%;

}

.beam-badge .beams .beam.one {

transform: rotate(0deg);

}

.beam-badge .beams .beam.two {

transform: rotate(-45deg);

}

.beam-badge .beams .beam.three {

transform: rotate(-90deg);

}

.beam-badge .beams .beam.four {

transform: rotate(-135deg);

}

.beam-badge .beams .beam.five {

transform: rotate(-180deg);

}

.beam-badge .beams .beam.six {

transform: rotate(-225deg);

}

.beam-badge .beams .beam.seven {

transform: rotate(-270deg);

}

.beam-badge .beams .beam.eight {

transform: rotate(-315deg);

}

.beam-badge .circle {

position: relative;

border-radius: 50%;

border: 1px solid white;

box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);

background-color: #c1292e;

transition: box-shadow 0.3s linear;

}

.star {

position: relative;

display: block;

color: #333;

width: 0;

height: 0;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

border-bottom-style: solid;

border-bottom-color: #333;

}

.star::after {

position: absolute;

display: block;

color: #333;

width: 0;

height: 0;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

content: '';

border-bottom-style: solid;

border-bottom-color: #333;

}

.star:before {

position: absolute;

height: 0;

width: 0;

display: block;

content: '';

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

border-bottom-style: solid;

border-bottom-color: #333;

}

weixin_39673742
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3实现光束和波浪
findhappy117的博客
01-30 4122
概述 经常在网上看到一些网站做一些波浪和光束的特效，以为是flash实现，看过代码后，突然发现，竟然是css3实现的，太强大了。于是分享这个案例，希望能帮到您。 代码地址如下： http://www.demodashi.com/demo/10150.html
光束闪过特效
05-10
使用css3实现一束光闪过效果，光束闪过时头和尾无缝连接
CSS3风水罗盘旋转动画特效
06-24
CSS3风水罗盘旋转动画特效是一款乾坤八卦罗盘旋转CSS3动画特效下载。
css3光束_css3实现图片划过一束光闪过效果
weixin_39960793的博客
12-30 967
.img {display:block;position:relative;width:800px;height:450px;margin:0auto;}.img:before {content:"";position:absolute;width:200px;height:100%;top:0;left:-150px;overflow:hidden;background: -moz-linear...
css3光束_CSS3 链接的扇形光束
weixin_39943000的博客
12-20 192
CSS语言：CSSSCSS确定body {background: black;overflow: hidden;}.clipper {position: absolute;width: 100px;height: 100px;margin: -100px -100px;top: 100px;left: 300px;overflow: hidden;}.clipper:nth-child(1) {-...
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
12-13
HTML代码 HTML代码结构很简单，跟之前那篇文章使用的相同： 复制代码代码如下:<div id=”raysDemoHolder”> <a>WebHek</a> <div id=”rays”></div></div>最外面的div作为父元素，它的position是relative，有固定的高和宽度，有两个子元素：一个用来放logo，一个用来做光芒效果的容器。 CSS代码 我们这里要用纯CSS来实现，需要使用CSS3的动画技术，这里用到的CSS语法是@keyframes。我们的基本实现原理是用keyframes，从rotate(0deg)旋转到ro
CSS3----实现光芒旋转头像动画
Damys
05-08 2698
CSS: @-webkit-keyframes spin { from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } @-moz-keyframes spin { from {-moz-transform: rotate(0deg);} to {-
logo自动旋转 html,纯CSS3实现光芒旋转四射的头像动画
weixin_32532145的博客
05-31 296
之前我写过一篇用JavaScript和CSS3制作出光芒四射的肖像的文章，这篇文章受到了大家火热的追捧，因为只使用了很少的js代码和简单的CSS语句就创造出来神奇的效果。本文里我是想改进一下之前的技术，我想让它变的更容易，我想去掉js代码，只用CSS3来实现整个效果。观看演示HTML代码HTML代码结构很简单，跟之前那篇文章使用的相同：WebHek最外面的div作为父元素，它的position是r...
CSS3动画实现光点移动效果
weixin_43996368的博客
01-13 3313
CSS3动画实现光点移动效果 纯CSS实现光点从左到右，渐入渐出的效果 首先定义将光点图片放在容器盒子里，固定容器的位置，这里以left: 120px; top:194px;进行了绝对定位 <div class="pastedMoving"> <img src="@img/screen/pasted.png" style="width: 150%" /> </div> style样式里定义动画播放，animation-delay为第一次3秒提前播放，这是为了对应在ke
CSS3 3D立体旋转
热门推荐
gaoshanyangzhi_1999的博客
08-18 1万+
用到的知识点 最重要的一个属性 transform-style:flat|preserve-3d;该属性默认值为 flat。 当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的子元素便会相对父元素所在平面进行3D变换。 位移操作： translateX(length) 、translateY(length) 、 translateZ(len...
CSS3卡通太阳阳光照射动画特效
06-11
CSS3制作的卡通太阳阳光照射动画特效，一款可爱的太阳阳光四射动画效果。
纯CSS3风扇旋转动画特效
07-24
纯CSS3风扇旋转动画特效是一款卡通台式电风扇旋转动画特效。
纯CSS3正多面体旋转动画特效
07-24
纯CSS3正多面体旋转动画特效是一款锥形的二十面3D旋转等边三角形所组成的正多面体旋转动画特效。
CSS3网页放射线旋转动画特效
07-24
CSS3网页放射线旋转动画特效是一款发光的发射线旋转动画，适用于宝箱打开或中奖商品发射线动画渲染特效。
纯CSS3旋转原子动画特效
06-24
纯CSS3旋转原子动画特效是一款简单实用的原子动画，旋转的原子特效。
css3光束_html+css3实现3d光线照射文字特效
weixin_39777242的博客
12-20 514
书写css代码。#box { padding: 100px; text-align: center; min-width: 500px; font-size: 3em; font-weight: bold; -webkit-backface-visibility: hidden; /* fixes flashing */ }#flashlight { color: hsla(0,0%,0%,0);...
css3光束_运用CSS3动画实现高亮光弧效果
weixin_39678451的博客
12-20 627
不知大家有没有注意到图片有一道高亮光弧闪过很炫的效果，其原理很简单可以用css3动画就可以做出这样的效果，用css3动画控制position:absolute的left值，从左向右闪过，这个具体的请看以下代码鼠标houver在盒子box上时动画会停止，代码如下：CSS3动画实现高亮光弧效果body{margin:0;padding:0;}.box{width:1000px;margin:200px...
css3光束_纯CSS3实现圆圈动态发光特效动画
weixin_39968592的博客
12-20 1142
效果图：代码：纯CSS3实现圆圈动态发光特效动画body {background-color: #000000;}@keyframes twinkling {0% {opacity: 0.2;transform: scale(1);}50% {opacity: 0.5;transform: scale(1.12);}100% {opacity: 0.2;transform: scale(1);}}...
css3 彩带扩散效果_CSS3 光弧扩散效果
weixin_39849888的博客
01-26 224
分享一段代码实例，它实现了光弧扩散的效果，下面就详细介绍一下它的实现过程。代码实例如下:[HTML] 纯文本查看 复制代码运行代码蚂蚁部落* {margin: 0;padding: 0;list-style: none;}.box {margin: 100px;}li {float: left;width: 50px;height: 50px;margin-right: 100px;}.box ...
css3背景图旋转动画
最新发布
08-08
CSS3背景图旋转动画是通过CSS3中的动画属性和关键帧动画实现的一种效果。在实现过程中，可以通过以下步骤实现： 1. 首先，需要将背景图作为元素的背景。在CSS中，可以使用background属性来设置背景图的路径。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值