css3 中transform实现的小球动画【案例】

Vvc_b

已于 2024-10-25 21:47:53 修改

阅读量926

点赞数 28

分类专栏： CSS 文章标签： css3 css 前端

于 2024-10-22 21:56:14 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74897683/article/details/143169284

版权

学了transform今天，配合transition 渐变一起使用。

小案例1：

效果展示：

旋转的球【跟练】

代码展示：

<style>
    *{
   
        margin: 0;
        padding: 0;
    }
    .wrap{
   
        width: 100px;
        height: 100px;
        background-color: rgb(193, 171, 207);
        margin: 200px auto;
        position: relative;
    }
    .h{
   
        height: 100px;
        width: 2px;
        background-color: rgb(98, 79, 201);
        position: absolute;
        left: 50% ;
    }
    .v{
   
        width: 100px;
        height: 2px;
        background-color: rgb(98, 79, 201);
        position: absolute;
        top: 50%;
    }
    .circle{
   
        position: absolute;
        width: 10px;