你的位置:首页 > 网页设计

[网页设计]基于CSS3和HTML5图片加工前后对比代码


分享一款CSS3和HTML5图片加工前后对比代码。这是一款通过CSS3和HTML5将图像转换为自动响应的元素;图像缩放和裁剪以适应容器。效果图如下:

在线预览    源码下载

实现的代码。

html代码:

 <div id="intelligence" class="section">    <div class="container">      <div class="row">        <div class="col-md-6 col-md-offset-3">          <img src="images/explorer.jpg" />          <br />          <br />          <p class="text-center">原始图像</p>          <br />        </div>      </div>      <div class="row">        <div class="col-md-4 text-center">          <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>          <br />          <br />          <div class="frame-container"><div class="frame frame-square"><img src="images/explorer.jpg" /></div></div>          <br />          <p>广场</p>        </div>        <div class="col-md-4 text-center">          <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>          <br />          <br />          <div class="frame-container"><div class="frame frame-landscape"><img src="images/explorer.jpg" /></div></div>          <br />          <p>景观</p>        </div>        <div class="col-md-4 text-center">          <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>          <br />          <br />          <div class="frame-container"><div class="frame frame-portrait"><img src="images/explorer.jpg" /></div></div>          <br />          <p>肖像</p>        </div>      </div>    </div>  </div>  <div class="divider"></div>  <div id="customizable" class="section">    <div class="container">      <div class="row">        <div class="col-md-4">          <h2>站长素材</h2>          <p>照片加工前后对比</p>          <p class="coding">            <span class="colored">#HTML</span>            <br />            &lt;div &gt; <br /> &nbsp; &lt;img src="yourimage.jpg" <br /> &nbsp; <span class="colored">data-positionx="right"</span> <br /> &nbsp; <span class="colored">data-positiony="top"</span>/&gt; <br /> &lt;/div&gt;          </p>        </div>        <div class="col-md-4 text-center">          <br />          <div class="frame-container"><div class="frame frame-full"><img src="images/traveler.jpg" /></div></div>          <br />          <p>标准</p>        </div>        <div class="col-md-4 text-center">          <span class="special-arrow glyphicon glyphicon-menu-down" aria-hidden="true"></span>          <br />          <div class="frame-container"><div class="frame frame-optimum"><img src="images/traveler.jpg" /></div></div>          <br />          <p>最适合的图像</p>        </div>      </div>    </div>  </div>  <div class="divider"></div>

via:http://www.w2bc.com/article/55875