整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
ss3中的transition和transform配合可以做出许多好玩的东西来，下面我们来说说这哥俩配合做出来的一个应用及其广泛而实用的干货。请拿走，不谢！
这个应用在展示网站模板或者图册显示应用很广泛！
一、先看效果：
二、效果说明：
当鼠标移动到div或者是a链接的时候，图片向上滚动，直到显示完全，当鼠标移开的时候，图片回到最开始的位置。
三、效果分析：
向上滚动肯定应用到css3的属性：transform 和transition；下面我们来看看它的用法：
transform
曾经在一篇文章（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;
property : CSS 属性的名称
duration 完成过渡总共时间
timing-function 效果或者曲线
delay 延迟时间
在下面的实例中将看到真正用法：
四、实现效果：
html结构：
大概说一下：frame.png就是外面那个苹果电脑的图片；
Convertible.jpg是我们的网站模板图片，很长；
css样式：
最核心的代码，就是最后那一段，看到了-86.8%了吗？这个数字是我测试出来的，根据自己图片的高度，大家的高度不同，则这个值不同。
transition: transform 6s linear; 意思是说，transform这个属性将用6秒匀速的形式完成过渡；
完成了，是不是很简单，其实，css不难，难就难在一个思路上，如果思路正确，就可以实现好的方案。
最后，谢谢大家观赏，欢迎订阅！
页编程之自动刷新。
各位同学好，今天我们来分享一下如何设置网页自动刷新和延时跳转。我们都知道，在浏览器中点击刷新按钮或者按下F5键可以刷新页面，但在编程中有时需要自动刷新页面，加载最新的数据，无需用户参与。这就是我们今天要讲的内容。
接下来让我们来看看效果如何。
·首先，在页面上添加了一个滚动字幕和一张GIF动画，用于展示页面的刷新状态。
·现在可以看到，每隔3秒自动刷新一次，每当刷新时，字幕会回到初始位置，动画也会重新播放。
·如果不明显，可以看到鼠标指到的位置会不停地触发刷新按钮，效果已经很明显了。
现在让我们来看看实现代码。自动刷新使用了meta标签的http-equiv属性，值为referesh，表示自动刷新。设置了content属性，在内容中填写秒数，即每隔多少秒自动刷新页面。如果设置为3，则每隔3秒自动刷新页面，非常简单。
·延时跳转的实现也很简单。刚才已经将Content属性设置为3，现在只需要指定要跳转到的URL。它的写法是在3后面加上一个英文分号，然后加上url等于要跳转到的地址。在这里，我们跳转到新浪首页，例如视频。这样写好后，回到浏览器保存，可以看到倒计时321，成功跳转。在指定时间后，浏览器会自动跳转，功能已经实现。
今天的分享就到这里，希望各位同学可以照着写3遍，做到不看视频也能写出来。所有案例和相关文档都可以向我索取。
我们下期再见，想学编程可以关注网页编程、服务端编程、数据库和算法方面的内容。
点赞支持一下。
直接上例子代码给大家一点参考:
<html>
<style>
span {
display: block;
height: 150%;
} /*整点上下的空白 */
</style>
<body>
<button id="from">点击我</button>
<span></span>
<div id="to">滚动到这:头条@plzbefat</div>
<span></span>
</body>
<script>
document.getElementById("from").addEventListener("click", ()=> {
document.getElementById("to").scrollIntoView({
behavior: "smooth", //顺滑的滚动
});
});
</script>
</html>
整点例子没毛病
element.scrollIntoView(); // 等同于element.scrollIntoView(true) 滚动 元素在顶部
element.scrollIntoView(false); // 滚动 元素在底部
element.scrollIntoView(option); //参数alignToTop:
如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。
*请认真填写需求信息，我们会在24小时内与您取得联系。
