你的位置:首页 > 软件开发 > 网页设计 > 基于CSS3和HTML5图片加工前后对比代码

基于CSS3和HTML5图片加工前后对比代码

发布时间:2015-08-12 13:00:07
分享一款CSS3和HTML5图片加工前后对比代码。这是一款通过CSS3和HTML5将图像转换为自动响应的元素;图像缩放和裁剪以适应容器。效果图如下:在线预览 源码下载实现的代码。html代码: <div id="intelligence&qu ...

分享一款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/loading.gif' data-original="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/loading.gif' data-original="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/loading.gif' data-original="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/loading.gif' data-original="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='/images/loading.gif' data-original="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/loading.gif' data-original="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/loading.gif' data-original="images/traveler.jpg" /></div></div>          <br />          <p>最适合的图像</p>        </div>      </div>    </div>  </div>  <div class="divider"></div>

原标题:基于CSS3和HTML5图片加工前后对比代码

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。