Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> CSS

Tạo hiệu ứng chuyển động cho thuộc tính CSS opacity


Để thực hiện animation trên thuộc tính opacity với CSS, bạn có thể chạy đoạn mã sau:

Ví dụ

<!DOCTYPE html> <html>    <head>       <style>          #demo1 {             position: absolute;             top: 60px;             width: 300px;             height: 150px;             background-color: lightblue;             animation: myanim 4s infinite;          }          #demo2 {             position: absolute;             top: 90px;             left: 30px;             width: 300px;             height: 150px;             background-color: orange;             animation: myanim 3s infinite;          }          #demo3 {             position: absolute;             top: 120px;             left: 60px;             width: 350px;             height: 150px;             background-color: coral;            }          @keyframes myanim {             30% {                opacity: 0.4;             }          }       </style>    </head>    <body>       <p>Showing opacity</p>       <div id = "demo1"><h1>End div</h1></div>       <div id = "demo2"></div>       <div id = "demo3"><h1>Start div</h1></div>    </body> </html>