Opacity 设置元素不透明度

Opacity 用于设置元素的透明度级别，包括图片等元素。

默认值：	1
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.opacity=0.5

语法：opacity: value|inherit;

值	描述
value	指定不透明度。从0.0（完全透明）到1.0（完全不透明）
inherit	Opacity 属性的值应该从父元素继承

所有主流浏览器都支持 opacity 属性。.注意：IE8 和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text-shadow</title><style type="text/css">#h3_1 {opacity: 0.8;}#h3_2 {opacity: 0.5;}#h3_3 {opacity: 0.2;}img {opacity: 0.1;}</style>
</head>
<body>
<h3 id="h3_1">不透明度 0.8 </h3>
<h3 id="h3_2">不透明度 0.5 </h3>
<h3 id="h3_3">不透明度 0.2 </h3>
<img src="https://avatar.csdn.net/6/D/4/3_wangmx1993328.jpg">
</body>
</html>

动画应用实例

1、本例动画，为了简单，使用的 JQuery来辅助操作，文档：http://jquery.cuishifeng.cn/index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script type="text/javascript">$(function () {//JQuery 悬停事件$("fieldset").hover(//第一个函数，鼠标悬停时触发function () {$(this).css("opacity", "0");//改变透明度},//第二个函数，鼠标移开时触发function () {$(this).css("opacity", "1");//改变透明度});});</script>
</head>
<body>
<p>1</p>
<fieldset><p>鼠标进入后，透明度为 0；鼠标移出后，透明度为1</p>
</fieldset>
<p>2</p></body>
</html>

也可以修改如下，加上过度效果：

            //JQuery 悬停事件$("fieldset").hover(//第一个函数，鼠标悬停时触发function () {//1000毫秒的时间改变透明度到0$(this).animate({"opacity": "0"}, 1000);},//第二个函数，鼠标移开时触发function () {//1000毫秒的时间改变透明度到1$(this).animate({"opacity": "1"}, 1000);});

visibility 设置元素是否可见

1、版本：CSS2，设置或检索是否显示对象、适用于：所有元素、继承性：有、动画性：是、计算值：指定值

2、语法：visibility：visible | hidden | collapse

3、visible：设置对象可视（默认值）、hidden：设置对象隐藏

4、collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。

5、说明：visibility 与 display 属性不同，visibility 属性为隐藏的对象保留其占据的物理空间，而 display:none；不会为元素保留物理空间。如果希望对象为可视，其父对象也必须是可视的。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8"/>
<title>visibility 样式</title>
<style>.test {width: 100px;height: 100px;background-color: #1b6d85;float: left;margin-left: 10px;color: white;}
</style>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">$(document).ready(function () {$("#vis1").click(function () {$("#USA").css("visibility", "hidden");});$("#vis2").click(function () {$("#USA").css("visibility", "visible");});$("#dis1").click(function () {$("#USA").css("display", "none");});$("#dis2").click(function () {$("#USA").css("display", "inline");});});
</script>
</head>
<body>
<div class="test">Chian</div>
<div class="test" id="USA">USA</div>
<div class="test">UK</div>
<button id="vis1">visibility 隐藏元素</button>
<br>
<button id="vis2">visibility 显示元素</button>
<br>
<button id="dis1">display 隐藏元素</button>
<br>
<button id="dis2">display 显示为内联元素</button>
<br>
</body>
</html>

transition 设置过渡动画

1、transition 属性用于设置元素从一个状态到另一个状态的过渡动画，比如从正常状态的样式到鼠标悬停状态的样式。

2、transition 属性是下面四个过渡属性的简写：语法：transition: property duration timing-function delay;

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称，none 表示没有属性会获得过渡效果；all 表示所有属性都将获得过渡效果(默认值)；property1,property2... 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
transition-duration	规定完成过渡效果需要多少秒或毫秒，默认值是 0，意味着不会有效果。
transition-timing-function	规定过渡效果的速度曲线。 linear：规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in：规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 ease-out：规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 ease-in-out：规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay	定义过渡效果延迟多长时间后开始，单位 ms 或者 s，默认为 0

3、在线演示源码：https://github.com/wangmaoxiong/red-door/blob/master/src/test/resources/html/neonLights.html

opacity 设置不透明度、visibility 设置是否可见、transition 设置过渡动画相关推荐

用css3的transition实现过渡动画
CSS3,用transition实现过渡动画用到了transition就先说说这个属性吧! 一.transition属性简介 transition是网页上的过渡动画,变化的逐渐过渡效果,简称过渡动画 ...
HTML背景图片动画设置,CSS 背景图加载完成后的过渡动画
直接给背景图设置动画效果会出现图片因加载过慢而显示效果不佳的情况,可以通过 JavaScript 来获取图片的加载状态. 下面来实现一个背景图片透明度渐变的效果. 首先来设置要添加背景动画的元素样式 ...
Android Transition过渡动画
在Android 4.4 Transition 就已经引入了,但在Android 5.0(API 21)之后,Transition 被更多的应用起来.相对于View Animation或Propert ...
HTML+CSS---定位（相对定位--绝对定位--固定定位--设置元素的层叠顺序)---表单---设置光标样式---透明度（opacity属性定义元素的不透明度--IE的半透明滤镜）---外边线
文章目录定位静态定位(static) 相对定位(relative) 绝对定位(absolute) 固定定位(fixed) 设置元素的层叠顺序表单设置光标样式透明度 opacity属性定义元素 ...
arcgis js（六）设置不透明度
1.在上一章节我们已经能够自由切换天地图底图了,这一节继续接着上节的代码往里面添加新功能,我们知道,在地图学中地图是可以不断叠加的,即使像天地图这么庞大的地图显示也是由不同的图层叠加现实的,当然它用的 ...
[Unity] AnimationEvent 因 Animator Controller 中 Transition 设置问题而不触发的快速解决办法：重新拖入 Animator 创建新 State
这篇文章提出了一个 AnimationEvent 不触发的可能性:Animator Controller 中 Transition 设置问题 https://blog.csdn.net/qq_4173 ...
【Axure基础教程】第17张设置不透明度
Axure10基础教程系列,适合小白打基础,基础扎实的同学可以在公众号查看其它案例教程. 本章就主要讲解设置不透明度的交互 [Axure10基础教程]第17章设置不透明度
css设置元素抛物线,CSS3 transition 实现抛物线动画
您的位置: 富录-前端开发|web技术博客 > HTML&&CSS > CSS3 transition 实现抛物线动画 CSS3 transition 实现抛物线动画发布 ...
el-tree设置某节点不能折叠_如何设置动画角色
没有什么比一个缓慢的设置更让动画师沮丧的了.这篇教程将讲述一些窍门与技巧,帮助你加快角色动画的设置速度 .我们最终要实现实时回放.如果你觉得你所有的设置都是杂乱的,或者需要一些指导,那么这篇教程将帮助 ...
[css] 分析比较opacity: 0、visibility: hidden、display: none三者的优劣和适用场景
[css] 分析比较opacity: 0.visibility: hidden.display: none三者的优劣和适用场景 opacity 0: 单纯视觉效果,除了看不见,其他都正常. visib ...

opacity 设置不透明度、visibility 设置是否可见、transition 设置过渡动画

Opacity 设置元素不透明度

visibility 设置元素是否可见

transition 设置过渡动画

opacity 设置不透明度、visibility 设置是否可见、transition 设置过渡动画相关推荐

最新文章

热门文章