利用opacity屬性寫過渡效果
阿新 • • 發佈：2019-02-15
opacity的意思是不透明性，opacity取值範圍為0-1；opacity：0；表示完全透明，opacity：1；表示完全不透明。
opacity：0 於overflow:hidden不同，overflow:hidden會完全消除空間，opacity：0 只是視覺上看不到，但是實際上會佔用空間，這點我們常用來於：hover一起使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>demo</title> <style> .love{ background: url(1.jpg) no-repeat; border: 300px; height: 300px; color: red; opacity: 1; position: relative; } .yes{ opacity: 0; position: relative; top: 100px; left: 110px; width: 200px; height: 100px; } .love:hover .yes{ opacity: 1; transition: 2s; } </style> </head> <body> <div class="love"> <div class="yes">佐助和鳴人才是真愛！！</div> </div> </body> </html>