查看: 429|回复: 0

[DIV/CSS] web前端炫酷特效-CSS3制作环形星星发光动画

发表于 2018-4-6 08:00:00

web前端炫酷特效-CSS3制作环形星星发光动画

html源码:

  1. <div><div></div></div>
  2. <div><div></div></div>
  3. <div><div></div></div>
  4. <div><div></div></div>
复制代码

css源码:

  1. <style type="text/css">
  2. *{margin:0;padding:0;}
  3. html,body{
  4. height:100%;
  5. }
  6. body{
  7. background:radial-gradient(ellipse at center,#34679a 0%, #214163 50%, #0d1926 100%);/*径向渐变 椭圆*/
  8. }
  9. body > div{
  10. width:200px;/*宽度 px像素 cm*/
  11. height:200px;/*高度*/
  12. border:1px #fff solid;/*边框 宽度 风格 颜色*/
  13. border-radius:50%;/*圆角*/
  14. position:absolute;
  15. top:15%;
  16. left:50%;
  17. margin-left:-101px;
  18. transform:rotateX(80deg) rotateY(20deg);
  19. transform-style:preserve-3d;
  20. }
  21. body > div:nth-of-type(2){
  22. transform:rotateX(-80deg) rotateY(20deg);
  23. }
  24. body > div:nth-of-type(3){
  25. transform:rotateX(-70deg) rotateY(60deg);
  26. }
  27. body > div:nth-of-type(4){
  28. transform:rotateX(70deg) rotateY(60deg);
  29. }
  30. body > div:first-of-type:after{
  31. width:40px;
  32. height:40px;
  33. content:"";
  34. background:#fff;
  35. position:absolute;
  36. top:50%;
  37. left:50%;
  38. margin-top:-20px;
  39. margin-left:-20px;
  40. transform:rotateX(80deg);
  41. border-radius:50%;
  42. animation:nucleus 2s infinite linear;
  43. }
  44. body > div > div{
  45. width:200px;
  46. height:200px;
  47. position:relative;
  48. transform-style:preserve-3d;
  49. animation:trail 1s infinite linear; /*自定义动画 动画名称 时间 播放次数 速度*/
  50. }
  51. body > div > div:after{
  52. content:"";
  53. width:5px;
  54. height:5px;
  55. background:#fff;
  56. position:absolute;
  57. top:-5px;
  58. left:50%;
  59. margin-left:-5px;
  60. border-radius:50%;
  61. box-shadow:0 0 12px #fff;/*阴影 x y 模糊度 颜色*/
  62. animation:particle 1s infinite linear;
  63. }
  64. /*自定义动画执行*/
  65. @keyframes trail{
  66. from{
  67. transform:rotateZ(0deg);
  68. }
  69. to{
  70. transform:rotateZ(360deg);
  71. }
  72. }
  73. @keyframes particle{
  74. from{
  75. transform:rotateX(90deg) rotateY(0deg);
  76. }
  77. to{
  78. transform:rotateX(90deg) rotateY(-360deg);
  79. }
  80. }
  81. @keyframes nucleus{
  82. 0%{
  83. box-shadow:0 0 0 transparent;
  84. }
  85. 50%{
  86. box-shadow:0 0 25px #fff;
  87. }
  88. 100%{
  89. box-shadow:0 0 0 transparent;
  90. }
  91. }
  92. body > div:nth-of-type(2) > div,
  93. body > div:nth-of-type(2) > div:after{
  94. animation-delay:-0.5s;
  95. }
  96. body > div:nth-of-type(3) > div,
  97. body > div:nth-of-type(3) > div:after{
  98. animation-delay:-1s;
  99. }
  100. body > div:nth-of-type(4) > div,
  101. body > div:nth-of-type(4) > div:after{
  102. animation-delay:-1.5s;
  103. }
  104. </style>
复制代码


回复

使用道具 举报