Rinhe
2020-04-07T17:22:44+00:00
[url]https://mp.weixin.qq.com/s/AKyWRfISclK-HU67ObSuRQ[/url]
点击之后图片变亮，清晰度也很棒？有没有懂的老哥指点下，谢谢[s:ac:晕]
点击之后图片变亮，清晰度也很棒？有没有懂的老哥指点下，谢谢[s:ac:晕]
人民日报点亮武汉的那条微信是如何实现的？
KickGrapes
插值颜色过渡？
cep
[s:ac:无语]本来是彩色的，然后降低灰度，微信让怎么实现就不知道了，也许允许css吧
sergiorev
两张图叠一起，亮度高的放前面，透明度设置为0，点击后透明度逐渐变为100%
Yiroo
做个隐形按钮，两张图做个过渡不就行了[s:a2:那个…]
mya~
最简单的方法就是两张图叠在一起，点击后分别改变透明度
bean-_-
应该不是两张图单纯的透明度运算，效果没这么好。
Itachikan
[url]https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg[/url]
[url]https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg[/url]
两个图的渐变应该是
[url]https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg[/url]
两个图的渐变应该是
ѕнι̂яσ-ѕαη
外行人猜想，是不是就像动画片一样，比如做十张图，一张比一张颜色更明亮，然后10秒钟，第一秒播放第一张，第二秒播放第二张。。。。到第十秒播放第十张？
Sinestrea
[s:ac:blink]用HTML得话就是点击一下就可以实现
phyx
类似两张图片做成按钮那样，灰色的在顶上，按一下变成底下明亮的那张，感觉是这样
Joe Gam
如果你懂程序的话应该一眼能看出来它的实现，就是两张图，灰色在下面，彩色在上面，彩色的透明度从0到1
<section data-width="100%" style="display: inline-block;
width: 100%;
font-size: 0px;
background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg');
background-position: 0% 0%;
background-size: cover;
vertical-align: top;
background-repeat: no-repeat;
background-attachment: scroll;
box-sizing: border-box;
text-align: center;
max-width: 100% !important;">
<svg data-width="100%" enable-background="new 0 0 1080 1800" space="preserve"
style="display: inline-block;
outline: none;
opacity: 0;
width: 100%;
margin-top: -1px;
border-width: initial;
border-style: none;
border-color: initial;
vertical-align: top;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: 100%;
background-attachment: scroll;
background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg');
-webkit-tap-highlight-color: transparent;"
version="1.1" viewBox="0 0 1080 1800" x="0px" xlink="http://www.w3.org/1999/xlink" xml=""
xmlns="http://www.w3.org/2000/svg" y="0px">
<animate attributeName="opacity" from="0" to="1" begin="click" dur="4s" fill="freeze" restart="never"></animate>
</svg>
</section>
width: 100%;
font-size: 0px;
background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qODWdSDKJgxCzCab49zGfngsibQ3ibG3wo43iaubNNgwGt2g7ANIicxwQcg/640?wx_fmt=jpeg');
background-position: 0% 0%;
background-size: cover;
vertical-align: top;
background-repeat: no-repeat;
background-attachment: scroll;
box-sizing: border-box;
text-align: center;
max-width: 100% !important;">
<svg data-width="100%" enable-background="new 0 0 1080 1800" space="preserve"
style="display: inline-block;
outline: none;
opacity: 0;
width: 100%;
margin-top: -1px;
border-width: initial;
border-style: none;
border-color: initial;
vertical-align: top;
background-position: 0% 0%;
background-repeat: no-repeat;
background-size: 100%;
background-attachment: scroll;
background-image: url('https://mmbiz.qpic.cn/mmbiz_jpg/xrFYciaHL08BMqJHibZNtafa9nkBVlUr5qX5cotNibgRrj4fKZkJ5vWD6LgOW0fCDIEdsSfKRMnZIpfDzDPVteL9g/640?wx_fmt=jpeg');
-webkit-tap-highlight-color: transparent;"
version="1.1" viewBox="0 0 1080 1800" x="0px" xlink="http://www.w3.org/1999/xlink" xml=""
xmlns="http://www.w3.org/2000/svg" y="0px">
<animate attributeName="opacity" from="0" to="1" begin="click" dur="4s" fill="freeze" restart="never"></animate>
</svg>
</section>
OSHMOS
opacity
David(Yoink)
只是从黑白过渡到彩色还用什么两张图啊，一张图就够了，CSS3自带滤镜和动画过度
但是他这个图变亮后还多了文字，这个就不是滤镜能做的了，只能两张图叠一起，或者单独制作文字层的渐变
但是他这个图变亮后还多了文字，这个就不是滤镜能做的了，只能两张图叠一起，或者单独制作文字层的渐变
TheDuck
[quote][pid=411429872,21175913,1]Reply[/pid] Post by [uid=452951]marilan[/uid] (2020-04-08 01:47):
外行人猜想，是不是就像动画片一样，比如做十张图，一张比一张颜色更明亮，然后10秒钟，第一秒播放第一张，第二秒播放第二张。。。。到第十秒播放第十张？[/quote]看来你的确是外行人[s:ac:哭笑]没必要那么复杂的
外行人猜想，是不是就像动画片一样，比如做十张图，一张比一张颜色更明亮，然后10秒钟，第一秒播放第一张，第二秒播放第二张。。。。到第十秒播放第十张？[/quote]看来你的确是外行人[s:ac:哭笑]没必要那么复杂的
Elzeha
推送文章支持一些svg动画的
反而css动画很多不管用
反而css动画很多不管用
DnD
看了下源代码，靠的是JavaScript 不过是加密代码，没仔细研究，估计github上应该有开源的。
Iuigi
[quote][pid=411437454,21175913,1]Reply[/pid] Post by [uid=41791593]Eversuperior[/uid] (2020-04-08 03:15):
看了下源代码，靠的是JavaScript 不过是加密代码，没仔细研究，估计github上应该有开源的。[/quote]F12看下Dom的css就行了，看源代码干什么。。js一两句话的事
看了下源代码，靠的是JavaScript 不过是加密代码，没仔细研究，估计github上应该有开源的。[/quote]F12看下Dom的css就行了，看源代码干什么。。js一两句话的事