专栏首页蚂蚁开源社区【前端艺术】超酷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变量的基本使用方法如下:


声明一个变量:

element {
--main-bg-color: brown;
}

使用变量:

element {
background-color: var(--main-bg-color);
}

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

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:蚂蚁技术小编

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序 - 通用页面(登录、注册、找回密码)

    点击登录时,动态设置data属性值,改变登录按钮文本,背景色,显示loading动画,不可点击

    用户5997198
  • 2019大数据开源项目汇总

    github地址:https://github.com/LittleLawson/ChinaTelecom

    用户5997198
  • 前端必备,25个最基本的JavaScript面试问题及答案

    1.使用 typeof bar === "object" 来确定 bar 是否是对象的潜在陷阱是什么?如何避免这个陷阱?

    用户5997198
  • CSS3变量var深入

    这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大。

    javascript.shop
  • 【漏洞预警】Exim远程代码执行漏洞(CVE-2019-15846)预警通告

    近日,Linux的邮件传输代理Exim被曝出存在远程代码执行漏洞(CVE-2019-15846)。当Exim服务器接受TLS连接时,攻击者发送一个以“\0”结尾...

    绿盟科技安全情报
  • CSS 变量教程

    今年三月,微软宣布 Edge 浏览器将支持 CSS 变量。 这个重要的 CSS 新功能,所有主要浏览器已经都支持了。本文全面介绍如何使用它,你会发现原生 CSS...

    ruanyf
  • Python初学者容易忽略的一些细节

    1、Python中当让给变量1赋值上变量2的值时,变量1直接指向值在内存中存储的地址,即变量1存储的是变量2的值而不是指向变量

    py3study
  • Golang 基础语法-基本变量

    关键词 bool 用于定义 boolean类型变量,boolean 类型变量的取值只有 true 和 false, 零值(默认值)为 false golang ...

    luxixing
  • Kali使用wifite破解WiFi

    启动后会开始自动扫描周围的WiFi。 当client列表出现内容后按下ctrl c停止扫描。 会让你选择要攻击的目标的序号,或者攻击全部。

    院长技术
  • Gustafson 定律

    Gustafson 定律(Gustafson’s law)阐述了数据并行带来的影响。Gustafson 定律是由 John L. Gustafson 在1988...

    runzhliu

扫码关注云+社区

领取腾讯云代金券