/* 设置元素前后改变的属性 */
/* transition-property: width; */
/* 设置过渡完成时间 */
/* transition-duration: 5s; */
/* 设置过渡延迟 */
/* transition-delay: 1s; */
/* 设置速度函数 */
/* transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out; */
/* 简写:必须要写改变属性，过渡时间 */
transition: width 5s;
transition: all 5s;
/* transition: width,height 5s; */
transition-property: height,width;
transition-duration: 5s;
transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}
.first:hover {
width: 600px;
height: 300px;
background-color: green;
}
.second {
width: 100px;
height: 200px;
background-color: green;
clip-path: ellipse(45% 30% at 50% 50%);
}
</style>
</head>
<body>
<!--
transition-property:设置改变的属性
值：
单个改变的属性
all：设置所有改变的属性
如果同时选择多个属性 用逗号隔开
transition-duration：设置过渡时间
transition-delay：设置过渡延迟
transition-timing-function：设置过渡速度
可选择：linear 匀速
ease 先慢后快再慢
ease-in 有慢到快
ease-out 由慢结束
ease-in-out 设置慢开始和结束
cubic-bezier 贝塞尔曲线
transition:简写 必须要包含变化的属性和过渡时间
扫一扫
2268
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
