自学html css的软件,HTML5 所见即所得的CSS学习和演示工具

HTML

导入代码模板：

1. .heart { width: 300px; height: 300px; } .heart-body { width: 50%; height: 50%; background: tomato; }

2. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; background: tomato; }

3. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; }

4. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; content: ''; width: 100%; height: 100%; background-color: green;

   }

5. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 100%; content: ''; width: 100%; height: 100%; background-color:

   green; }

6. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 100%; content: ''; width: 100%; height: 100%; background-color:

   green; border-radius: 50%; }

7. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:after { position: absolute; left: 50%; content: ''; width: 100%; height: 100%; background-color:

   green; border-radius: 50%; }

8. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; left: 50%; content: ''; width: 100%; height:

   100%; background-color: green; border-radius: 50%; }

9. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; content: ''; width: 100%; height: 100%; background-color:

   green; border-radius: 50%; } .heart-body:before { top: 50%; } .heart-body:after { left: 50%; }

10. .heart { width: 300px; height: 300px; margin: 100px auto; } .heart-body { width: 50%; height: 50%; transform: rotate(225deg); background: tomato; } .heart-body:before, .heart-body:after { position: absolute; content: ''; width: 100%; height: 100%; background-color:

    inherit; border-radius: 50%; } .heart-body:before { top: 50%; } .heart-body:after { left: 50%; }

[[[//codepen.io/unavezfui/pen/FsGHp.slim]]]