CSS3动画(左右无限移动、元素放大)

本文展示了如何使用CSS动画实现一个元素在水平方向上无限循环移动的效果,以及如何通过过渡效果实现图片在鼠标悬停时放大1.1倍的功能。主要涉及到的关键技术包括`@keyframes`定义动画,`transform`属性的`translateX`和`scale`应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、左右无限移动

.more{
	width: 50px;
    height: 50px;
    background: red;
    animation: Animation 10s linear infinite;
        	/* 动画名称 时间 匀速 无限循环 */
 }
 @keyframes Animation {
   0%{
	 transform: translateX(10%);
	 /* transform: translateX(200px); */
   }
   100%{
	 transform: translateX(-10%);
   }
 }

2、元素放大

.box{
	width:200px;
	height:200px;
	overflow:hidden;
	img{
		transition: all 0.5s;
	}
	img:hover{
		/* 缩放比例 */
		transform: scale(1.1);
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值