css3关于透明度的问题

Question

Ask a Question

Welcome To Ask or Share your Answers For Others

css3关于透明度的问题

asked Feb 6, 2021 in Technique[技术] by 深蓝 (71.8m points)

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

495 views

1 Answer

深蓝 · Answer 1 · 2021-02-06T00:15:28+0000

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

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

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

DEMO: 在线查看效果

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>

用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; }
}

Categories

css3关于透明度的问题

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags