css3关于透明度的问题

Letme
  • 177

<div class=''div1>透明度从0-100渐入</div>
<div class='div2'>透明度从100-0渐出</div>
<div class='div3'>透明度从0-100渐入,再从100-0渐出</div>

回复
阅读 2.9k
5 个回答

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

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

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

DEMO: 在线查看效果

  1. Html内容

    <html>
    <head>
      <title>This is a demo</title>
    </head>
    <body>
      <div class='div1'>透明度从0-100渐入</div>
      <div class='div2'>透明度从100-0渐出</div>
      <div class='div3'>透明度从0-100渐入,再从100-0渐出</div>
    </body>
    </html>
  2. 用Css3的Animation实现你要的效果

    .div1 {
      opacity: 1;
      animation: fadein 5s;
      -moz-animation: fadein 5s;    /* Firefox */
      -webkit-animation: fadein 5s;    /* Safari 和 Chrome */
      -o-animation: fadein 5s;   /* Opera */
    }
    
    .div2 {
      opacity: 0;
      animation: fadeout 5s;
      -moz-animation: fadeout 5s;    /* Firefox */
      -webkit-animation: fadeout 5s;    /* Safari 和 Chrome */
      -o-animation: fadeout 5s;    /* Opera */
    }
    
    .div3 {
      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; }
    }
.div1{
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

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

<meta charset="UTF-8">
<title>Document</title>
<style>
    .div1{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: div_one 2s both ease-out;-ms-animation: div_one 2s both ease-out;animation:div_one  2s both ease-out;
    }
    @-webkit-keyframes div_one {
        0%{opacity : 0}
        100%{opacity : 1}
    }
    @-ms-keyframes div_one { 
        0%{opacity : 0}
        100%{opacity : 1}
    }
    @keyframes div_one {
        0%{opacity : 0}
        100%{opacity : 1}
    }
    .div2{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: div_two 2s both ease-out;-ms-animation: div_two 2s both ease-out;animation:div_two  2s both ease-out;
    }
    @-webkit-keyframes div_two {
        0%{opacity : 1}
        100%{opacity : 0}
    }
    @-ms-keyframes div_two { 
        0%{opacity : 1}
        100%{opacity : 0}
    }
    @keyframes div_two {
        0%{opacity : 1}
        100%{opacity : 0}
    }
    .div3{background-color: #000;width: 100px;height: 100px;-webkit-animation: div_three 4s both ease-out;-ms-animation: div_three 4s both ease-out;animation:div_three  4s both ease-out;
    }
    @-webkit-keyframes div_three {
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
    @-ms-keyframes div_three { 
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
    @keyframes div_three {
        0%{opacity : 0}
        50%{opacity : 1}
        100%{opacity : 0}
    }
</style>

</head>
<body>

<div class='div1'>透明度从0-100渐入</div>
<div class='div2'>透明度从100-0渐出</div>
<div class='div3'>透明度从0-100渐入,再从100-0渐出</div>

</body>
</html>

宣传栏