当前位置：网站首页 > 技术文章 > 正文

css3中的transform属性应用-向上滚动动画

zhezhongyun 2025-08-03 09:24 35 浏览

css3中的transition和transform配合可以做出许多好玩的东西来，下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走，不谢！

这个应用在展示网站模板或者图册显示应用很广泛！

一、先看效果：

二、效果说明：

当鼠标移动到div或者是a链接的时候，图片向上滚动，直到显示完全，当鼠标移开的时候，图片回到最开始的位置。

三、效果分析：

向上滚动肯定应用到css3的属性：transform 和transition；下面我们来看看它的用法：

曾经在一篇文章（css3属性（transform）的一个css3动画小应用）中说过了scale和transform-origin的应用，今天主要用到的是transform: translate3d这个属性。
transform: translate3d（x ，y，z）主要作用就是：定义 3D 转化，当然这次我们只是用了Y轴的变化，所以定义Y轴的数值或者百分比就可以。

2、transition：

用法：包含4个属性：transition: property duration timing-function delay;

四、实现效果：

html结构：
大概说一下：frame.png就是外面那个苹果电脑的图片；
Convertible.jpg是我们的网站模板图片，很长；
css样式：
最核心的代码，就是最后那一段，看到了-86.8%了吗？这个数字是我测试出来的，根据自己图片的高度，大家的高度不同，则这个值不同。
transition: transform 6s linear; 意思是说，transform这个属性将用6秒匀速的形式完成过渡；

完成了，是不是很简单，其实，css不难，难就难在一个思路上，如果思路正确，就可以实现好的方案。

最后，谢谢大家观赏，欢迎订阅！

相关推荐