css动画京东小布hover放大

简介: css动画京东小布hover放大
<style>
        .box {
            width: 183px;
            height: 130px;
            overflow: hidden;
            border: 1px solid pink;
        }
        div img {
            width: 193px;
            height: 130px;
            transition: all 0.4s;
        }
        div:hover img {
            /* margin-left: -10px; */
            /* 还可以其他的放式*/
            /*transform: translateX(-10px);*/
            transform: scale(1.1);
        }
    </style>
</head>
<body>
    <div class="box">
        <!--386*260-->
        <img src="img/xiaobu.jpg">
    </div>
</body>


谁做动画,动画效果状态写谁身上,


动画过程写hover中


1425695-20210131141242270-2048530157.gif

相关文章
|
12天前
|
前端开发 JavaScript 开发者
CSS进阶-过渡与动画的事件监听
【6月更文挑战第16天】**CSS过渡和动画事件增强交互性,但监听与控制需谨慎。了解`transitionend`用于CSS过渡结束时的响应,避免过度使用JavaScript检测变化。示例代码展示如何绑定`transitionend`事件并在结束后执行操作。对于CSS动画,理解`animationstart`, `animationiteration`, `animationend`事件的生命周期至关重要,确保在动画结束后进行适当的清理。通过这些技巧,优化用户体验并提高代码效率。**
|
8天前
|
前端开发 JavaScript 程序员
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
2天前
|
前端开发
CSS动画(毛玻璃按钮)
CSS动画(毛玻璃按钮)
|
2天前
|
前端开发
CSS动画(吃豆人)
CSS动画(吃豆人)
|
2天前
|
前端开发 UED
CSS动画效果(炫酷登录页面)
CSS动画效果(炫酷登录页面)
|
2天前
|
前端开发
CSS动画效果(鼠标滑过按钮动画)
CSS动画效果(鼠标滑过按钮动画)
|
2天前
|
前端开发
css动画效果(边框流光闪烁阴影效果)
css动画效果(边框流光闪烁阴影效果)
|
2天前
|
前端开发 容器
css动画效果(边框线条流动效果)
css动画效果(边框线条流动效果)
|
24天前
|
前端开发 UED 容器
纯CSS画浮动卡通蓝天白云草坪动画效果
【6月更文挑战第1天】网页设计中,通过创新技巧,可以使用HTML和CSS模拟云朵漂浮和草地动画效果,提升用户体验。背景实现采用线性渐变动画,使背景颜色从浅青至白平滑过渡并循环移动。云朵效果通过多个不同大小和位置的`<div>`元素,结合CSS的`position: absolute;`和`@keyframes`动画实现浮动。草的动画则是通过三角形形状及`::before`和`::after`伪元素创造,配合不同动画速度和角度模拟自然摆动。完整代码可在提供的链接中下载。
29 1
纯CSS画浮动卡通蓝天白云草坪动画效果
|
12天前
|
前端开发 开发者 异构计算
CSS进阶-CSS动画关键帧
【6月更文挑战第15天】CSS的`@keyframes`创建细腻动画,定义样式变化阶段以增强网页互动性。通过`animation`属性应用动画,如`fadeIn`示例。常见问题包括动画结束状态、卡顿和浏览器兼容性,解决办法涉及优化关键帧、使用硬件加速和添加前缀。进阶技巧包括多步骤动画和控制播放状态。例如,背景色渐变动画展示了颜色随时间变化的效果。学习和实践关键帧动画,提升Web开发技能。