html - css3关于透明度的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

html - css3关于透明度的问题

天蓬老师 2017-04-17 15:23:46

[HTML讨论组]

751

透明度从0-100渐入
透明度从100-0渐出
透明度从0-100渐入,再从100-0渐出

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(5)

阿神2017-04-17 15:25:46 5楼

问题描述很需要完善啊。把你想知道的描述详细，大家也就都能有的放矢，现在都是猜测：你想实现文字的淡入和淡出效果？

前面几位兄弟的回答应该是能解决你的问题，我的威望值不够，不能编辑别人的答案完善，所以自己也整一套。

使用Css3的Animation来解决你的问题。

DEMO: 在线查看效果

Html内容

<html>
<head>
  <title>This is a demo</title>
</head>
<body>
  <p class='p1'>透明度从0-100渐入</p>
  <p class='p2'>透明度从100-0渐出</p>
  <p class='p3'>透明度从0-100渐入,再从100-0渐出</p>
</body>
</html>

用Css3的Animation实现你要的效果

.p1 {
  opacity: 1;
  animation: fadein 5s;
  -moz-animation: fadein 5s;    /* Firefox */
  -webkit-animation: fadein 5s;    /* Safari 和 Chrome */
  -o-animation: fadein 5s;   /* Opera */
}

.p2 {
  opacity: 0;
  animation: fadeout 5s;
  -moz-animation: fadeout 5s;    /* Firefox */
  -webkit-animation: fadeout 5s;    /* Safari 和 Chrome */
  -o-animation: fadeout 5s;    /* Opera */
}

.p3 {
  opacity: 0;
  animation: fadeinout 10s;
  -moz-animation: fadeinout 10s;    /* Firefox */
  -webkit-animation: fadeinout 10s;    /* Safari 和 Chrome */
  -o-animation: fadeinout 10s;    /* Opera */
}

@keyframes fadein /*渐入*/
{
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeout /*渐出*/
{
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes fadeinout /*渐入后然后渐出*/
{
0% { opacity: 0; }
50% {  opacity: 1; }
100% { opacity: 0; }
}

赞 +0

添加回复

PHP中文网2017-04-17 15:25:46 4楼

你问的啥玩意

赞 +0

添加回复

迷茫2017-04-17 15:25:46 3楼

可以参考animate.css，各种css3动画效果。

赞 +0

添加回复

巴扎黑2017-04-17 15:25:46 2楼

.p1{
animation: test1 5s;
-moz-animation: test1 5s;    /* Firefox */
-webkit-animation: test1 5s;    /* Safari 和 Chrome */
-o-animation: test1 5s;    /* Opera */
}

@keyframes test1
{
from {
opacity:0;
transform:translate(-100px,-20px);
}
to {
opacity:1;
transform:translate(0,0);
} }

from、to 换成百分比也可。
W3C

赞 +0

添加回复

伊谢尔伦2017-04-17 15:25:46 1楼

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Document</title>
<style>
    .p1{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: p_one 2s both ease-out;-ms-animation: p_one 2s both ease-out;animation:p_one  2s both ease-out;
    }
    @-webkit-keyframes p_one {
        0%{opacity : 0}
        100%{opacity : 1}
    }
    @-ms-keyframes p_one { 
        0%{opacity : 0}
        100%{opacity : 1}
    }
    @keyframes p_one {
        0%{opacity : 0}
        100%{opacity : 1}
    }
    .p2{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: p_two 2s both ease-out;-ms-animation: p_two 2s both ease-out;animation:p_two  2s both ease-out;
    }
    @-webkit-keyframes p_two {
        0%{opacity : 1}
        100%{opacity : 0}
    }
    @-ms-keyframes p_two { 
        0%{opacity : 1}
        100%{opacity : 0}
    }
    @keyframes p_two {
        0%{opacity : 1}
        100%{opacity : 0}
    }
    .p3{background-color: #000;width: 100px;height: 100px;-webkit-animation: p_three 4s both ease-out;-ms-animation: p_three 4s both ease-out;animation:p_three  4s both ease-out;
    }
    @-webkit-keyframes p_three {
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
    @-ms-keyframes p_three { 
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
    @keyframes p_three {
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
</style>

</head>
<body>

<p class='p1'>透明度从0-100渐入</p>
<p class='p2'>透明度从100-0渐出</p>
<p class='p3'>透明度从0-100渐入,再从100-0渐出</p>

</body>
</html>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>