搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > Css3 > 正文

CSS制作梦幻彩虹效果

发布时间：2023-06-01 23:47:33 来源：互联网
.
每到春天，红得如火的木棉花，粉得如霞的芍药花，白得如玉的月季花竞相开放。它们有的花蕾满枝，有的含苞初绽，有的昂首怒放。一阵沁人心肺的花香引来了许许多多的小蜜蜂，嗡嗡嗡地边歌边舞。

今天看到一篇文章，说到margin的塌陷的问题，并提供了好几个例子。

自己之前还没怎么遇到过这个问题，正好来研究一下。

XML/HTML Code复制内容到剪贴板
  1. <divclass="box1"></div>
  2. <divclass="box2"></div>
  3. <divclass="box3"></div>
  4. <divclass="box4"></div>

css样式一，使用margin塌陷：

CSS Code复制内容到剪贴板
  1. .box1,.box2,.box3{
  2. 　　width:200px;
  3. 　　}
  4. .box1{
  5. 　　margin-bottom:-80px;
  6. 　　height:100px;
  7. 　　background:blue;
  8. 　　}
  9. .box2{
  10. 　　margin-bottom:-40px;
  11. 　　height:60px;
  12. 　　background:#ffff00;
  13. }
  14. .box3{
  15. 　　height:20px;
  16. 　　background:#ff0000;
  17. }

效果：

css样式二，也是使用的margin塌陷，不过做出来的是弧形的彩虹：

CSS Code复制内容到剪贴板
  1. .box1{
  2. width:400px;
  3. height:200px;
  4. overflow:hidden;
  5. }
  6. .box1::before{
  7. float:left;
  8. display:block;
  9. height:400px;
  10. width:400px;
  11. border-radius:100%;
  12. border:solid10pxblue;
  13. box-sizing:border-box;
  14. content:"";
  15. }
  16. .box1::after{
  17. margin-top:10px;
  18. margin-left:10px;
  19. display:block;
  20. width:380px;
  21. height:380px;
  22. border:solid#ffff0010px;
  23. border-radius:100%;
  24. box-sizing:border-box;
  25. content:"";
  26. }
  27. .box2{
  28. float:left;
  29. margin-top:-180px;
  30. margin-left:20px;
  31. width:360px;
  32. height:180px;
  33. overflow:hidden;
  34. }
  35. .box2::before{
  36. float:left;
  37. display:block;
  38. margin:0;
  39. width:360px;
  40. height:360px;
  41. border-radius:100%;
  42. border:solid10px#ff0000;
  43. box-sizing:border-box;
  44. content:"";
  45. }
  46. .box2::after{
  47. display:block;
  48. margin-top:10px;
  49. margin-left:10px;
  50. width:340px;
  51. height:340px;
  52. border-radius:100%;
  53. border:solid10px#ffff00;
  54. box-sizing:border-box;
  55. content:"";
  56. }
  57. .box3{
  58. margin-top:-160px;
  59. margin-left:40px;
  60. width:340px;
  61. height:160px;
  62. overflow:hidden;
  63. }
  64. .box3::before{
  65. float:left;
  66. display:block;
  67. width:320px;
  68. height:320px;
  69. border:solid10pxblue;
  70. border-radius:100%;
  71. box-sizing:border-box;
  72. content:"";
  73. }


效果：

css样式三，使用的是box-shadow：

CSS Code复制内容到剪贴板
  1. .box4{
  2. width:200px;
  3. height:200px;
  4. box-shadow:010px0red,020px0yellow,030px0green,040px0blue,050px0purple;
  5. }

效果：

CSS样式四，使用position:absolute来实现，感觉这种是最常见的了

CSS Code复制内容到剪贴板
  1. .box1{
  2. position:absolute;
  3. width:200px;
  4. height:100px;
  5. background:#008aff;
  6. }
  7. .box2{
  8. position:absolute;
  9. margin-top:20px;
  10. width:200px;
  11. height:60px;
  12. background:#ffff00;
  13. }
  14. .box3{
  15. position:absolute;
  16. margin-top:40px;
  17. width:200px;
  18. height:20px;
  19. background:#ff6633;
  20. }

效果：

CSS样式五，使用radial-gradient：

CSS Code复制内容到剪贴板
  1. .box4{
  2. width:260px;
  3. height:130px;
  4. overflow:hidden;
  5. }
  6. .box5{
  7. width:260px;
  8. height:260px;
  9. border-radius:100%;
  10. background:radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
  11. background:-moz-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
  12. background:-webkit-radial-gradient(#ffffff70px,#ff663380px,#ffff0090px,green100px,#008aff110px,purple120px);
  13. }

本文CSS制作梦幻彩虹效果到此结束。钱可以帮穷人解决问题，却帮富人制造问题。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： CSS
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图