定位和过度

2018-06-06 12:11 更新

lt;!DOCTYPE html& lt;html& lt;head& lt;meta charset="UTF-8"& lt;title&</title& lt;style& .box{ width: 400px; height: 200px; background: red; position: relative; overflow: hidden; } .k2{ width: 280px; height: 160px; background:yellow; position: absolute; left: 20%; top: 10%; transition: 1s; } .box:hover .k2{ left: 10%; top: 10%; width: 200px; height: 100px; background: chartreuse; } .box span:nth-of-type(1){
width: 80px; height: 50px; background: cyan;
transition: 1s; position: absolute;
left: 400px; top: 0px;
} .box:hover span:nth-of-type(1){ width: 80px; height: 50px; background: chocolate;
left: 320px; top: 20px; } .box span:nth-of-type(2){
width: 80px; height: 50px; background: cyan;
transition: 1s 0.5s; position: absolute;
left: 400px; top: 100px;
} .box:hover span:nth-of-type(2){ width: 80px; height: 50px; background: chocolate;
left: 320px; top: 120px; } lt;/style& lt;/head& lt;body& lt;div class="box"& lt;div class="k2"&</div& lt;span&</span& lt;span&</span& lt;span&</span& lt;/div& lt;/body& lt;/html&

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号