css3关于透明度的问题

Letme
  • 177

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

csshtml5html5html
回复
阅读 2.9k
5 个回答
得票最新
ezmo
  • 7k

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

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

使用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; }
}
回复
絡克大叔
  • 71
回复
明月清风_
  • 268
.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

回复
li是我的岩
  • 45

<!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>

回复
查看全部 5 个回答
宣传栏
2919