分享一款CSS3和HTML5图片加工前后对比代码。这是一款通过CSS3和HTML5将图像转换为自动响应的元素;图像缩放和裁剪以适应容器。效果图如下:在线预览 源码下载实现的代码。html代码: <div id="intelligence&qu ...
分享一款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 /> <div > <br /> <img src='/images/loading.gif' data-original="yourimage.jpg" <br /> <span class="colored">data-positionx="right"</span> <br /> <span class="colored">data-positiony="top"</span>/> <br /> </div> </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
(#换成@)。