要从右到左制作宽度从0到100%的动画,可以使用CSS动画和关键帧。以下是一个简单的示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Right to Left Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box"></div>
</body>
</html>
.box {
width: 0;
height: 100px;
background-color: blue;
animation: expand 2s forwards;
}
@keyframes expand {
from {
width: 0;
margin-left: 100%;
}
to {
width: 100%;
margin-left: 0;
}
}
div
元素,类名为box
。.box
:设置初始宽度为0,高度为100px,背景颜色为蓝色。使用animation
属性指定动画名称expand
,持续时间为2秒,并且使用forwards
确保动画结束后保持最终状态。@keyframes expand
:定义动画的关键帧。from
表示动画开始时的状态,宽度为0,左外边距为100%,这样元素从屏幕右侧开始。to
表示动画结束时的状态,宽度为100%,左外边距为0,这样元素移动到屏幕左侧并填满整个宽度。这种动画效果常用于页面加载时的加载条、侧边栏的展开、菜单的滑动显示等场景。
通过这种方式,你可以轻松实现从右到左的宽度动画效果。
北极星训练营
云+社区技术沙龙[第5期]
技术创作101训练营
开箱吧腾讯云
云+社区沙龙online [国产数据库]
技术创作101训练营
云+社区开发者大会(杭州站)
腾讯位置服务技术沙龙
领取专属 10元无门槛券
手把手带您无忧上云