<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 300px;
height: 100px;
display: inline-block;
background-color: deeppink;
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
/* transition: 变化的属性 花费时间 运动曲线 合适开始
transition: width 3s ease 0.1s;
/* 其中几个属性变化
transition: width 3s ease 0.1s , height 3s ease 0.1s;
*/
/** 多个属性 直接 all */
transition: all 3s;
}
a:hover {
width: 800px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<a href="">
</a>
</body>
</html>
css3属性的新增过度
最新推荐文章于 2024-04-08 14:07:57 发布
这篇博客通过一个HTML和CSS的例子展示了如何使用CSS的transition属性为一个链接元素创建平滑的宽度、高度和背景颜色变化效果,当鼠标悬停时,链接会从粉红色的矩形变为绿色的大块。这个例子是前端开发中常见的一种交互设计技巧。
摘要由CSDN通过智能技术生成