html - css3關于透明度的問題
問題描述
<p class=’’p1>透明度從0-100漸入</p><p class=’p2’>透明度從100-0漸出</p><p class=’p3’>透明度從0-100漸入,再從100-0漸出</p>
問題解答
回答1:問題描述很需要完善啊。把你想知道的描述詳細,大家也就都能有的放矢,現在都是猜測:你想實現文字的淡入和淡出效果?
前面幾位兄弟的回答應該是能解決你的問題,我的威望值不夠,不能編輯別人的答案完善,所以自己也整一套。
使用Css3的Animation來解決你的問題。
DEMO: 在線查看效果
Html內容
<html><head> <title>This is a demo</title></head><body> <p class=’p1’>透明度從0-100漸入</p> <p class=’p2’>透明度從100-0漸出</p> <p class=’p3’>透明度從0-100漸入,再從100-0漸出</p></body></html>
用Css3的Animation實現你要的效果
.p1 { opacity: 1; animation: fadein 5s; -moz-animation: fadein 5s; /* Firefox */ -webkit-animation: fadein 5s; /* Safari 和 Chrome */ -o-animation: fadein 5s; /* Opera */}.p2 { opacity: 0; animation: fadeout 5s; -moz-animation: fadeout 5s; /* Firefox */ -webkit-animation: fadeout 5s; /* Safari 和 Chrome */ -o-animation: fadeout 5s; /* Opera */}.p3 { 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; }}回答2:
你問的啥玩意
回答3:可以參考animate.css,各種css3動畫效果。
回答4:.p1{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
回答5:<!DOCTYPE html><html lang='en'><head>
<meta charset='UTF-8'><title>Document</title><style> .p1{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: p_one 2s both ease-out;-ms-animation: p_one 2s both ease-out;animation:p_one 2s both ease-out; } @-webkit-keyframes p_one {0%{opacity : 0}100%{opacity : 1} } @-ms-keyframes p_one { 0%{opacity : 0}100%{opacity : 1} } @keyframes p_one {0%{opacity : 0}100%{opacity : 1} } .p2{background-color: #000;width: 100px;height: 100px;margin-bottom: 10px;-webkit-animation: p_two 2s both ease-out;-ms-animation: p_two 2s both ease-out;animation:p_two 2s both ease-out; } @-webkit-keyframes p_two {0%{opacity : 1}100%{opacity : 0} } @-ms-keyframes p_two { 0%{opacity : 1}100%{opacity : 0} } @keyframes p_two {0%{opacity : 1}100%{opacity : 0} } .p3{background-color: #000;width: 100px;height: 100px;-webkit-animation: p_three 4s both ease-out;-ms-animation: p_three 4s both ease-out;animation:p_three 4s both ease-out; } @-webkit-keyframes p_three {0%{opacity : 0}50%{opacity : 1}100%{opacity : 0} } @-ms-keyframes p_three { 0%{opacity : 0}50%{opacity : 1}100%{opacity : 0} } @keyframes p_three {0%{opacity : 0}50%{opacity : 1}100%{opacity : 0} }</style>
</head><body>
<p class=’p1’>透明度從0-100漸入</p><p class=’p2’>透明度從100-0漸出</p><p class=’p3’>透明度從0-100漸入,再從100-0漸出</p>
</body></html>
相關文章:
1. PHP搜索功能的實現 哪里錯了2. 新建index文件夾,然后把controller 以及文件index.php放入index文件夾。修改htaccess文件為擴展訪問。但是訪問的時候提示頁面錯誤!請稍后再試。PHP版本正常,請老師解答3. php - SQL 一條語句查詢出文章和對應的文章標簽4. angular.js使用$resource服務把數據存入mongodb的問題。5. 下載32位vc9和11、14運行庫時解壓錯誤6. 請問一下,圖片上傳成功,但是后臺對應文件夾里面卻沒有圖片,這是什么原因?(已部署到服務器)7. mysql優化 - mysql like語句會導致全表掃描?8. java - mysql緩存問題9. mysql - 千萬級數據表如何有效的變更字段?10. java - 觸發器使兩張表同時更新

網公網安備