css

  • padding 百分比相对于宽度
  • position
top: 50% 相对于高度
left: 50% 相对于宽度的50%


  • 实现进度条
 <div class="box4"><div/>
.box4{
    border: 1px solid red;
    background-image: linear-gradient(green,green);
    background-repeat: no-repeat;
    animation: pro 15s linear infinite alternate;
    animation-delay: 2s;
    background-size: 0

}
@keyframes pro{
    50% {
        background-size: 100%;
        background-image: linear-gradient(red,red)
    }
    100% {
        background-size: 100%
    }
}

  • rotate(5turn) ,turn表示一圈
transform: rotate(10turn)


  • 无限匀速循环
.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
    animation: ro 1s infinite linear; // linear 匀速
}
@keyframes ro {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}



  • tansition循环
.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    transition: all 5s; // hover过渡需要的事件
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
}
.box2:hover{
    transform: rotate(10turn) // 5s转10圈
}


  • 对角线,循环运动
.box2{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: contain;
    border: 1px solid red;
    overflow: hidden;
    position: absolute;
    animation: movex 2s linear infinite alternate , movey 2s linear infinite alternate
}
@keyframes ro {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}

@keyframes movex {
    0% {
        left : 0%
    }
    100% {
        left: 500px
    }
}
@keyframes movey {
    0% {
        top : 0%
    }
    100% {
        top: calc(100% - 10vw)
    }
}


  • display margin:auto
<div class="wrap">
        <div class="box">box</div>
        <div class="box">box</div>
<div />
.wrap { display: flex }
.box { margin: auto } // 这样box默认上下居中

  • position left right
position: absolute
left: 30px;
right: 30px; //目标的宽短就是width - 60


  • posotion 与z-index

postion非static下的z-index才有效
父A > B
子 A <  B
子A还是会压住B,因为拼爹

  • 实现三角形
.box:nth-child(2){
    width: 0;
    height: 0;
    border: 100px solid;
    border-color: red transparent transparent transparent
}
    </style>
    <div class="wrap">
        <div class="box">box</div>
        <div class="box">box</div>
    </div>

  • 隐藏文字
text-index: -100px

  • 背景图跟随文字: background-attachment: local;
.box{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-right: 150px;
    background-image: url(pic.jpeg);
    overflow: auto;
    color: red;
    background-attachment: local;
}


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值