Blogger Information
Blog 119
fans 3
comment 1
visits 94657
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS 动画属性,太极图实列演示
赵大叔
Original
528 people have browsed it

太极图实列演示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>太极图</title>
  8. <style>
  9. .box {
  10. width: 400px;
  11. height: 400px;
  12. border: 1px solid red;
  13. margin: 100px auto;
  14. /*
  15. 1. 两个圆径向渐变
  16. 2. 一个线性渐变色
  17. 3. 先写径向 然后在写线性渐变 不容易被覆盖掉
  18. 最后圆角样式: 盒子变为圆形
  19. */
  20. border-radius: 50%;
  21. /* 背景渐变色 */
  22. background:
  23. /* 第一个圆 径向渐变 */
  24. /* 圆的大小 200(50%) at: 控制圆心的位置 x轴 y轴 */
  25. radial-gradient(200px 200px at 200px 25%,black 20%,white 20%,white 50%,transparent 50%),
  26. /*第二个 圆的大小 175(50%) at: 控制圆心的位置 x轴 y轴 */
  27. radial-gradient(200px 200px at 200px 75%,white 20%,black 20%,black 50%,transparent 50%),
  28. /* 线性渐变色 */
  29. linear-gradient(to right,white 50%,black 50%);
  30. }
  31. </style>
  32. </head>
  33. <body>
  34. <div class="box"></div>
  35. </body>
  36. </html>

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post