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

最新推荐文章于 2025-03-21 09:08:56 发布

蚩尤后裔-汪茂雄

最新推荐文章于 2025-03-21 09:08:56 发布

阅读量2.9k

点赞数 3

分类专栏： CSS

本文链接：https://blog.csdn.net/wangmx1993328/article/details/83543329

版权

CSS 专栏收录该内容

9 篇文章

订阅专栏

Opacity 设置元素不透明度

visibility 设置元素是否可见

transition 设置过渡动画

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