JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<ul class="demo">
    <li>
        <a href="#"><img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" /></a>
      <span>normal(无filter效果)</span>
      <pre>-webkit-filter:none;</pre>
    </li>
    <li>
      <a href="#">
        <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
        <img class="grayscale" title="grayscale" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
      </a>
      <span>grayscale（灰度）</span>
      <pre>-webkit-filter:grayscale(1);</pre>
    </li>
    <li>
      <a href="#">
        <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
        <img class="sepia" title="sepia" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
      </a>
      <span>sepia（褐色）</span>
      <pre>-webkit-filter:sepia(1);</pre>
    </li>
    <li>
      <a href="#">
        <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
        <img class="saturate" title="saturate" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
      </a>
      <span>saturate（饱和度）</span>
      <pre>-webkit-filter:saturate(.5);</pre>
    </li>
    <li>
      <a href="#">
        <img class="normal" title="normal" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
        <img class="saturate2" title="saturate" width="128" height="128" alt="HTML5 Logo" src="http://www.w3cplus.com/sites/default/files/filter.jpg" />
      </a>
      <span>saturate（饱和度）</span>
      <pre>-webkit-filter:saturate(3);</pre>
    </li>
    <li>
      <a...

CSS

* {
          margin: 0;
          padding: 0;
        }
        ul {
          width: 1000px;
          margin: 0 auto;          
        }
        li {
          border: 1px solid #ccc;
          padding: 10px;
          margin: 5px;
          float: left;
          list-style: none outside none;
          text-align: center;
          width: 35%;
        }
        li a,
        li span,
        li pre {
          display: block;
          cursor:pointer;
          text-align: center;
        }
        li span {
          border-top: 2px solid #ccc;
          margin-top: 5px;
        }
        
        li a img {
          margin: 0 5px;
          width: 128px;
        }
        li pre {
          background-color: #FEFBF3;
          border: 1px solid #1684C8;
          color: #195F91;
          font-family: Monaco,"Bitstream Vera Sans Mono","Lucida Consol","Courier New",Courier,monospace;
          padding: 5px;
          font-size: 12px;
        }

       li a img{
            -webkit-transition: all .5s ease-in-out;
            -moz-transition: all .5s ease-in-out;
            -ms-transition: all .5s ease-in-out;
            -o-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
            
        }
        li a:hover img{
            -webkit-filter:none;
        }
        li a .grayscale{
            -webkit-filter:grayscale(1);
        }
        li a .sepia{
            -webkit-filter:sepia(1);
        }
       li a .saturate{
            -webkit-filter:saturate(0.5);
        }
        li a .saturate2{
              -webkit-filter:saturate(3);
          }
       li a .hue-rotate{
            -webkit-filter:hue-rotate(90deg);
        }
       li a .invert{
            -webkit-filter:invert(1);
        }
       li a .opacity{
            -webkit-filter:opacity(.2);
        }
       li a .brightness{
            -webkit-filter:brightness(.5);
        }
       li a .contrast{
            -webkit-filter:contrast(2);
        }
      ...