今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面。怎么个炫酷法呢,看看下面的图片大家就知道啦。
效果图:
不过在看代码之前呢,大家先和小颖看看css中的opacity、transition、box-shadow这三个属性。
1.opacity
CSS3 opacity 属性
实例
设置一个div元素的透明度级别:
div { opacity:0.5; }
在此页底部有更多的例子。
浏览器支持
Internet ExplorerFirefoxOperaGoogle ChromeSafari
所有主流浏览器都支持opacity属性。.
注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=50)
属性定义及使用说明
Opacity属性设置一个元素了透明度级别。
默认值: | 1 |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.opacity=0.5 |