移动端单屏滚动网页怎么实现,网页里有CSS3动画效果

html-css017

移动端单屏滚动网页怎么实现,网页里有CSS3动画效果,第1张

推荐几个插件吧

1.hahnzhu/parallax.js · GitHub - 这个是现成又快速的,每屏页面自带动画。要快又懒的话就直接用里面demo套进去再更改下元素的先后顺序就行了。

2.yanhaijing/zepto.fullpage · GitHub - 移动端的fullpage。比较灵活,页面动画需自己写。

3.tgideas/motion · GitHub 。

CSS3平滑过渡效果让宽度向左滑动的代码为:

<!DOCTYPE html>

<html>

<head>

<style> 

div#transitionhovertree

{

float: right

width:100px

height:100px

background:blue

transition:width 2s

-moz-transition:width 2s /* Firefox 4 */

-webkit-transition:width 2s /* Safari and Chrome */

-o-transition:width 2s /* Opera */

}

 

div#transitionhovertree:hover

{

width:300px

}

</style>

</head>

<body>

 

<div id="transitionhovertree"></div>

 

 

 

</body>

</html>

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

可以做一个animation,举一个例子,让一个元素在某一个范围之内,左距离和上距离同时改变。但是,弧线要让两个距离改变速度变化不一致,所以最好一个元素改变上方距离(可以是top也可是margin-top),里面嵌入一个元素改变左边距离。例如,假如你要让横轴均匀变化,纵轴不均匀变化,轨迹为⌒形,可以左变化为{from{margin-left:0px}to{margin-left:200px}},运动方式设为linear,然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}},运动方式设为ease-in-out。由于时间仓促我没有具体实验过,而且表达可能不太清楚,请原谅。