查看: 327|回复: 1

[HTML5动画] 超酷HTML5文件夹内容预览特效源码

[复制链接]
发表于 2019-8-6 09:40:29 | 显示全部楼层 |阅读模式

超酷HTML5文件夹内容预览特效源码

超酷HTML5文件夹内容预览特效源码



简要教程


这是一款效果炫酷的HTML5文件夹内容预览特效。该特效在用户用鼠标滑过文件夹时,以炫酷的动画效果展示文件夹中的内容。

该特效只是模拟展示文件夹中的内容,并非实际去展示设备中的某个文件夹内容。

另外该HTML5文件夹内容预览特效使用了CSS变量,需要支持CSS变量的浏览器才能看到效果。

上面是CSS变量呢?CSS变量是由网页的作者或用户定义的实体,用来指定文档中的特定变量。使用自定义属性来设置变量名,并使用特定的var()来访问。

CSS 变量当前有两种形式:


变量,就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用var()函数使用变量。例如:var(--example-variable)会返回--example-variable所对应的值。

自定义属性。这些属性使用--*where*的特殊格式作为名字。例如--example-variable: 20px;即使一个css声明语句。意思是将20px赋值给--example-varibale变量。

CSS变量的基本使用方法如下:


声明一个变量:

  1. element {
  2. --main-bg-color: brown;
  3. }
复制代码

使用变量:
  1. element {
  2. background-color: var(--main-bg-color);
  3. }
复制代码

想了解更多CSS变量的知识可以参考MDN 使用CSS变量

源码下载

游客,如果您要下载源码或者查看隐藏内容请回复

回复

使用道具 举报

发表于 4 天前 | 显示全部楼层
看看。正好在做这个东西
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条



邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表