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. Mac环境下QT编译MySQL驱动屡次失败？如何？2. javascript - 怎么实现让 div 里面的 img 元素 中心居中, 如下示例图3. javascript - 移动端一个小效果4. 微信开放平台 - ios APP能不能打开微信然后通过微信跳转到指定的URL？5. javascript - vue引入样式的问题6. thinkphp5.1学习时遇到session问题7. php - 微信开发验证服务器有效性8. Android下，rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多？9. javascript - vue+iview upload传参失败 跨域问题后台已经解决 仍然报403，这是怎么回事啊？10. javascript - nodejs调用qiniu的第三方资源抓取，返回401 bad token，为什么
网公网安备