不花钱的免费永久云服务器平台,网站搜索引擎优化案例,推广品牌的方法,湖南省网站集约化建设实施方案GPT能够很好的应用到我们的代码开发中#xff0c;能够提高开发速度。你可以利用其代码#xff0c;做出一定的更改#xff0c;然后实现效能。
css实战中#xff0c;这种球体间的旋转#xff0c;主要通过rotate()旋转函数来实现。实际上#xff0c;蓝色的地球和黑色的月球…GPT能够很好的应用到我们的代码开发中能够提高开发速度。你可以利用其代码做出一定的更改然后实现效能。
css实战中这种球体间的旋转主要通过rotate()旋转函数来实现。实际上蓝色的地球和黑色的月球并没有发生旋转只是其父级旋转形成的视觉上的旋转效果
效果图 源代码
/*
* Author: 大剑师兰特xiaozhuanlan还是大剑师兰特CSDN
* 此源代码版权归大剑师兰特所有可供学习或商业项目中借鉴未经授权不得重复地发表到博客、论坛问答git等公共空间或网站中。
* Email: 2909222303qq.com
* weixin: gis-dajianshi
* First published in CSDN
* First published time: 2023-11-09
*/
templatediv classcontainerdiv classtoph3太阳、地球、月球的旋转/h3div classauthor大剑师兰特, 还是大剑师兰特gis-dajianshi/div/divdiv classboxdiv classsunlinediv classsun/divdiv classearthlinediv classearth/divdiv classmoon/div/div/div/div/div
/templatestyle scoped.container {width: 1000px;height: 580px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: mediumvioletred;color: #fff;}.box {-webkit-transform: scale(0.5);transform: scale(0.5);position: relative;padding: 1px;height: 300px;width: 300px;margin-left: 200px;}.sunline {position: relative;height: 400px;width: 400px;border: 2px solid black;border-radius: 50%;margin: 50px 0 0 50px;-webkit-animation: rotate 10s infinite linear;animation: rotate 10s infinite linear;}.sun {height: 100px;width: 100px;margin: 50% 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);background-color: red;border-radius: 50%;-webkit-box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;box-shadow: 5px 5px 10px red, -5px -5px 10px red, 5px -5px 10px red, -5px 5px 10px red;}.earthline {position: absolute;right: 0;top: 50%;height: 200px;width: 200px;margin: -100px -100px 0 0;border: 1px solid black;border-radius: 50%;-webkit-animation: rotate 2s infinite linear;animation: rotate 2s infinite linear;}.earth {margin: 50% 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);height: 50px;width: 50px;background-color: blue;border-radius: 50%;}.moon {position: absolute;left: 0;top: 50%;height: 20px;width: 20px;margin: -10px 0 0 -10px;background-color: black;border-radius: 50%;}-webkit-keyframes rotate {100% {-webkit-transform: rotate(360deg);}}keyframes rotate {100% {transform: rotate(360deg);}}
/style
