2021-04-27

最新推荐文章于 2022-12-28 11:17:21 发布

loveyeziqq

最新推荐文章于 2022-12-28 11:17:21 发布

阅读量46

点赞数 1

文章标签： css javascript

本文链接：https://blog.csdn.net/loveyeziqq/article/details/116204715

版权

动态棒棒糖
<head>
   <meta charset="utf-8">
   <title>无标题文档</title>
   <style>
       #grandpa{
           width: 500px;
           height: 500px;
           background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
           position: relative;
           animation: aa .8s linear infinite;
       }
       #father{
           width: 450px;
           height: 450px;
       background-image: linear-gradient(yellow,blue);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
border-radius:50%;
           /*animation: bb 2s infinite;*/
       }
       #son{
           width: 400px;
           height: 400px;
       background-image: linear-gradient(green,pink);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
       }
       #grandson{
           width: 350px;
           height: 350px;

/*           background: #DD7D30 #CB30D3 #B5B5B5 #000000 #DD377A #37C3E2*/
       background-image: linear-gradient(#DD7D30,#CB30D3);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
       }
       .bang{
           width: 20px;
           height: 280px;
           margin: 0px auto;
           background:#703B3C;
       }
       #Y{
           width: 300px;
           height: 300px;
       background-image: linear-gradient(#CB30D3,#B5B5B5);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
       }
       #E{
           width: 250px;
           height: 250px;
       background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
border-radius:50%;
       }
       #H{
           width: 200px;
           height: 200px;
           background: red;
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
       }
       #A{
           width: 150px;
           height: 150px;
       background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
border-radius:50%;
       }

       #B{
           width: 100px;
           height: 100px;
       background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
border-radius:50%;
       }
       #C{
           width: 50px;
           height: 50px;
       background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
border-radius:50%;
       }
       #D{
           width: 25px;
           height: 25px;
       background-image: linear-gradient(red,#000);
           display: flex;
           justify-content: center;
           align-items: center;
           margin: 0px auto;
           border-radius:50%;
       }

@keyframes aa{
0%{transform: rotateZ(0deg)
}

           100%{transform: rotateZ(360deg)
}
       }
       @keyframes bb{
           0%{transform: rotateZ(0deg)
}

           100%{transform: rotateZ(-360deg)
}
       }
   </style>
</head>

loveyeziqq

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-04-27

动态棒棒糖<head> <meta charset="utf-8"> <title>无标题文档</title> <style> #grandpa{ width: 500px; height: 500px; background-image: linear-gradient(red,#000); display: ...
复制链接

扫一扫

2021-04-27

“相关推荐”对你有帮助么？