2. it技术
  3. CSS过渡有关问题

CSS过渡有关问题

it2023-10-04  83

CSS过渡有关问题

css样式

<style> .box1{ width: 800px; height: 800px; background-color: cadetblue; } .box2{ width: 100px; height: 100px; background-color: chartreuse; margin-left: 0x; /* 过渡(transition) transition-property: ;指定要过渡的属性，多个属性之间用逗号隔开，如果所以属性都要过渡，则使用all */ /* transition-property: width; transition-property: height; transition-property: all; */ /* transition-duration: ;指定过渡动画需要的时间 时间单位 s，ms */ transition-duration: 1s; /* transition-timing-function: ;过渡的时序函数 可选值： ease 默认值，慢速开始，先加速，再减速 linear匀速运动 ease-in加速运动 ease-out减速运动 ease-in-out先加速后减速 steps()分布执行过渡效果 可以设置第二个值 end，在时间结束时执行过渡 start，在时间开始时执行过渡 */ transition-timing-function: steps(2); } .box1:hover .box2{ /* height: 200px; width: 200px; */ background-color: chocolate; margin-left: 600px; } </style>

html样式

<body> <div class="box1"> <div class="box2"></div> </div> </body>

仔细阅读还是很容易明白的。

最新回复(0)