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%
}
}
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)
}
}
.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)
}
}
<div class="wrap">
<div class="box">box</div>
<div class="box">box</div>
<div />
.wrap { display: flex }
.box { margin: auto } // 这样box默认上下居中
position: absolute
left: 30px;
right: 30px; //目标的宽短就是width - 60
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;
}