各种星球

2017-12-19 10:22:32

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
<style>
  * {
    padding:0px;
    margin:0px;
  }

  .header {
    width:50px;
    height:50px;
    border-radius: 50%;
    background: #ccc;
    overflow: hidden;
    margin:5px;
  }

  .header_nav{
    width:100%;
    height:1px;
    background: #ddd;
  }
</style>
</head>
<body>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
      echo "<div class='header_nav' style='background:rgb({$bg},{$bg},{$bg})'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb(0,{$bg},{$bg})'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb({$bg},0,{$bg})'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb({$bg},{$bg},0)'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb({$bg},0,0)'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb(0,{$bg},0)'></div>";
  }
?>
</div>
<div class="header">
<?php
  for($i=50;$i>=1;$i--) {
    $bg = rand(0,255);
    echo "<div class='header_nav' style='background:rgb(0,0,{$bg})'></div>";
  }
?>
</div>
<script src="jquery-2.1.0.min.js"></script>
</body>
</html>