CSS-transition_综合

相由心生，心善则面善，有风骨，才有美人骨

transition过渡效果

谁过渡给谁加！！！

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>过渡效果</title> </head> <style>div  {
    width: 200px;height: 200px;background-color: pink;transition: height 1s ease 2s;/* 第一个参数表示 规定设置过渡效果的 CSS 属性的名称*//* 第二个表示时间 第三个表示曲线形式 第四个表示延迟多久执行*//* 如果想设置多个属性，用逗号分割*/}div:hover{
    width: 100px;background-color: mediumpurple;}
</style>
<body>
<div>测试过渡效果
</div></body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过渡效果</title>
</head>
<style>
/* 案例测试*/.test{
    width: 300px;height: 100px;border: 2px solid red;border-radius: 37px;}.in{
    width: 50%;height: 100%;background-color: red;transition: all 1s;border-radius: 37px;}.test:hover .in{
    width: 100%;}
</style>
<body>
<div>测试过渡效果
</div>
<div class="test"><div class="in"></div>
</div></body>
</html>

在这里插入图片描述