纯 CSS3,实现地心旋转的效果,然而好像没有什么用吧,看着玩玩

2016-06-14 16:17:30 +08:00
 octopole

如题看着玩玩吧,复制到记事本,存成 htnl 就可以啦, ps 吐槽。。编辑预览一点也不好用,此次打脸自己。。。。。

<html lang="en"> <head> <meta charset="UTF-8"> <title>CSS 地心旋转效果</title> <style> .box{ transform: scale(0.5); position: relative; padding: 1px; height: 300px; width: 300px; margin:100px auto; } .sunline{ position:relative; height: 400px; width: 400px; border: 2px solid black; border-radius: 50%; margin: 50px 0 0 50px; display: flex; animation: rotate 10s infinite linear; } .sun{ height: 100px; width: 100px; margin: auto; background-color: red; border-radius: 50%;

} .earthline{ position: absolute; right: 0; top: 50%; height: 200px; width: 200px; margin: -100px -100px 0 0; border: 1px solid black; border-radius: 50%; display: flex; animation: rotate 2s infinite linear; } .earth{ margin: auto; height: 50px; width: 50px; background-color: green; border-radius: 50%; } .moon{ position: absolute; left: 0; top: 50%; height: 20px; width: 20px; margin: -10px 0 0 -10px; background-color: gray; border-radius: 50%; } @keyframes rotate{ 100%{transform:rotate(360deg);} } </style>

</head> <body>
</body> </html>
3229 次点击
所在节点    HTML
9 条回复
bumz
2016-06-14 16:25:19 +08:00
必要的 HTML 结构在哪?
octopole
2016-06-14 16:27:35 +08:00
开头还有<!DOCTYPE html>
然而代码我不会编辑排版啊 不知道是不是发帖子的那个排版无视原先的排版
比如可以试试
a
b ( b 这里我在编辑的时候留了 2 个空格)
octopole
2016-06-14 16:28:11 +08:00
所有的原来的排版都被。。。。无视了。。。朋友可以试试。。。。
bumz
2016-06-14 16:41:05 +08:00
没有 <body> 和 </body> 之间的内容,你那些 CSS 派不上用场啊。。。
octopole
2016-06-14 16:44:36 +08:00
<body>会默认被隐藏了。。。没办法。。。怎么编辑都没用。。。都是不出现的
octopole
2016-06-14 16:45:19 +08:00
<body>
<!-- 代码部分 begin -->
<div class="box">
<div class="sunline">
<div class="sun"></div>
<div class="earthline">
<div class="earth"></div>
<div class="moon"></div>
</div>
</div>
</div>
<!-- 代码部分 end -->
</body>
octopole
2016-06-14 16:45:41 +08:00
只能留言 才有办法出现内容 但排版 依旧没用。。
learnshare
2016-06-14 16:48:00 +08:00
用 Markdown 模式添加代码
octopole
2016-06-14 16:52:12 +08:00
soga !

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/285671

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX