Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!

 

SuperSlide 致力于解决网站大部分特效展示问题

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决!
从此无需网上苦苦寻觅特效,无需加载n个插件,无需害怕代码冲突,你需要的只是一个SuperSlide!
还可以多个SuperSlide组合创造更多效果哦~

(兼容包括ie6的绝大部分浏览器)[当年的你是否这样?]

 

iScroll,网络平滑滚动

iScroll是一种高性能,占用空间少,无依赖的多平台javascript滚动器。

它适用于台式机,移动电视和智能电视。它已针对性能和尺寸进行了优化,以在现代和旧设备上提供最平滑的结果。

iScroll不仅可以滚动。它可以处理需要通过用户交互移动的任何元素。它为您的项目添加了滚动,缩放,平移,无限滚动,视差滚动,轮播,并且仅以4kb的速度做到了这一点。给它扫帚,它也会打扫你的办公室。

即使在本机滚动就足够好的平台上,iScroll也会添加其他方式无法实现的功能。特别:

  • 即使在动量期间,也可以对滚动位置进行粒度控制。您始终可以获取并设置滚动条的x,y坐标。
  • 可以使用用户定义的缓动功能(反弹,弹性,后退…)自定义动画。
  • 您可以轻松地挂钩到大量自定义事件(onBeforeScrollStart,onScrollStart,onScroll,onScrollEnd,flick等)。
  • 开箱即用的多平台支持。从较旧的Android设备到最新的iPhone,从Chrome到Internet Explorer。

 

1.打开浏览器按F12,点击sources选项卡,找到你想要的代码,

2.在你想要打断点的行号前,点击鼠标会有一个红色小圆点.

3.刷新浏览器,你会发现浏览器比之前有些许变化

4这个时候你只需要点击右下方上一步下一步,他就会一步一步的执行了

转换(transform)是css3中具有颠覆性的特征之一,可以实现元素的位移,旋转,缩放等效果

  • translate:移动
  • rotate:旋转
  • scale:缩放

特性重点(translate)

  • 定义2D转换中的移动,沿着X和Y轴移动元素
  • translate最大的优点:不会影响到其他元素的位置
  • translate中的百分比单位,是相对于自身元素的widht 和height做百分比, 如widht 为100px  translateX为50% X轴移动距离为50px height为200px translateY为50%Y轴移动距离为100px
  • 对行内标签没有效果

特性重点 (rotate)

  • rotate里面写度数,单位是deg
  • 角度为正,顺时针,角度为负,逆时针
  • 默认旋转中心是元素的中心点

特性重点(transform-origin)

  • 注意后面的参数 x 和 y是空格隔开
  • xy默认转换中心点是元素的中心点(50% 50%)
  • 还可以给xy设置为px 或者方位名词 (top  bottom  left  right  center)

特性重点(scale)

  • 单一数值单一的数值即指定了一个缩放系数,同时作用于X轴和Y轴让该元素进行缩放,相当于指定了单个值的scale()(2D缩放)函数。
  • 两个长度/百分比值两个数值即分别指定了2D比例的X轴和Y轴的缩放系数,相当于指定了两个值的scale()(2D缩放)函数。
  • 三个长度/百分比值三个数值即分别指定了3D比例的X轴、Y轴和Z轴的缩放系数. 相当于一个scale3d()函数。

2D转换综合写法

  • 同时使用多个转换,其格式为 transform: translate() rotate() scale();
  • 其顺序会影响转换的效果.(先旋转会改变坐标的方向)
  • 当我们同时有位移和其他属性的时候,记得要将位移放到最前面

 

动画

特性

  • 0%是动画的开始,100%是动画的完成.这样的规定就是动画序列
  • 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一种样式逐渐变化为另一种样式的效果,您可以改变任意多的样式任意多的次数
  • 请使用百分比来规定变化发生的时间,或者用关键词 from 和 to ,等同于 0%100%

动画的基本使用

动画常用属性

简写

速度曲线属性细节

 

案例1利用translate让div居中

案例2,表单下拉小三角形

案例三鼠标悬停图片放大

案例4分页小案例

案例5动画奔跑吧div

案例热力图波纹小动画

打字机效果

案例奔跑的大熊

常用伪元素选择器

  • ::before 在元素内部的前面插入内容
  • ::after    在元素内部的后面插入内容

 

注意

  • before和after必须有content属性
  • before在内容的前面,after在内容的后面
  • beforeafter创建一个元素,但是属于行内元素
  • 因为在dom里面看不见css创建的元素,所以我们称为伪元素
  • 伪元素标签选择器一样,权重为1

 

如何用伪元素创建字体图标

 

1. 从阿里矢量图选择自己几个中意的图标,并且下载文件,打开文件点击Unicode,直接复制 从字母e开始到分号之前的内容,如e605

e656等,前面的乱码是’\’的转义.

 

2. 开始使用伪元素选择器

打开config\app.php 开始编辑

附上ISO 639-1 语言代码表

Abkhazian ab
Afar aa
Afrikaans af
Albanian sq
Amharic am
Arabic ar
Armenian hy
Assamese as
Aymara ay
Azerbaijani az
Bashkir ba
Basque eu
Bengali (Bangla) bn
Bhutani dz
Bihari bh
Bislama bi
Breton br
Bulgarian bg
Burmese my
Byelorussian (Belarusian) be
Cambodian km
Catalan ca
Cherokee
Chewa
Chinese (Simplified) zh
Chinese (Traditional) zh
Corsican co
Croatian hr
Czech cs
Danish da
Divehi
Dutch nl
Edo
English en
Esperanto eo
Estonian et
Faeroese fo
Farsi fa
Fiji fj
Finnish fi
Flemish
French fr
Frisian fy
Fulfulde
Galician gl
Gaelic (Scottish) gd
Gaelic (Manx) gv
Georgian ka
German de
Greek el
Greenlandic kl
Guarani gn
Gujarati gu
Hausa ha
Hawaiian
Hebrew he, iw
Hindi hi
Hungarian hu
Ibibio
Icelandic is
Igbo
Indonesian id, in
Interlingua ia
Interlingue ie
Inuktitut iu
Inupiak ik
Irish ga
Italian it
Japanese ja
Javanese jv
Kannada kn
Kanuri
Kashmiri ks
Kazakh kk
Kinyarwanda (Ruanda) rw
Kirghiz ky
Kirundi (Rundi) rn
Konkani
Korean ko
Kurdish ku
Laothian lo
Latin la
Latvian (Lettish) lv
Limburgish ( Limburger) li
Lingala ln
Lithuanian lt
Macedonian mk
Malagasy mg
Malay ms
Malayalam ml
Maltese mt
Maori mi
Marathi mr
Moldavian mo
Mongolian mn
Nauru na
Nepali ne
Norwegian no
Occitan oc
Oriya or
Oromo (Afan, Galla) om
Papiamentu
Pashto (Pushto) ps
Polish pl
Portuguese pt
Punjabi pa
Quechua qu
Rhaeto-Romance rm
Romanian ro
Russian ru
Sami (Lappish)
Samoan sm
Sangro sg
Sanskrit sa
Serbian sr
Serbo-Croatian sh
Sesotho st
Setswana tn
Shona sn
Sindhi sd
Sinhalese si
Siswati ss
Slovak sk
Slovenian sl
Somali so
Spanish es
Sundanese su
Swahili (Kiswahili) sw
Swedish sv
Syriac
Tagalog tl
Tajik tg
Tamazight
Tamil ta
Tatar tt
Telugu te
Thai th
Tibetan bo
Tigrinya ti
Tonga to
Tsonga ts
Turkish tr
Turkmen tk
Twi tw
Uighur ug
Ukrainian uk
Urdu ur
Uzbek uz
Venda
Vietnamese vi
Volapuk vo
Welsh cy
Wolof wo
Xhosa xh
Yi
Yiddish yi, ji
Yoruba yo
Zulu zu

自己体会吧.

实现原理

想要实现这个功能,就要知道具体的实现原理。下面直入主题。 我们通过浏览器在浏览一个网页时候是这个样子的,如图所示