html+css悬浮加速器

最新推荐文章于 2023-04-25 18:39:08 发布

让代码飞1926

最新推荐文章于 2023-04-25 18:39:08 发布

阅读量675

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/qq_40596257/article/details/99851778

版权

Html 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>悬浮球</title>
       <style type="text/css">
           .j1{
               height: 200px;
               width: 200px;
               border-radius: 50%;
               border: 2px solid limegreen;
               position: absolute;
               left: 300px;
               top: 300px;
               transform: translate(-50%, -50%);
               z-index: 3;
           }
           .z{
               width: 190px;
               height: 190px;
               border-radius: 50%;
               background: linear-gradient(-180deg, #aaff80 13%, #67c23a 91%);
               position: relative;
               left: 197px;
               top: 197px;
           }
           .max{
               width: 300px;
               height: 300px;
               background: white;
               border-radius: 40%;
               float: left;
               position: absolute;
               top: 200px;
               left: 300px;
               transform: translate(-50%, -70%) rotate(0);
               animation: toRtate 10s linear -5s infinite;
               z-index: 2;
           }
           @keyframes toRtate{
               50%{
                   transform: translate(-50%, -70%) rotate(180deg);
               }
               100%{
                   transform: translate(-50%, -70%) rotate(360deg);
               }
           }
           .j1{
               overflow: hidden;
           }
       </style>
   </head>
   <body>
       <div class="j1"></div>
       <div class="z"></div>
       <div class="max"></div>
   </body>
</html>

让代码飞1926

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+css悬浮加速器

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>悬浮球</title> <style type="text/css"> .j1{ ...
复制链接

扫一扫