分享一款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="data: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="data: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="data: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="data: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 style="width: 300px; height: 150px;"&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="data: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="data:images/traveler.jpg" /></div></div>
                    <br />
                    <p>最适合的图像</p>
                </div>
            </div>
        </div>
    </div>

    <div class="divider"></div>

via:http://***/article/55875

基于CSS3和HTML5图片加工前后对比代码的更多相关文章

  1. 一款基于css3的3D图片翻页切换特效

    今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id= ...

  2. CSS3鼠标悬停图片上浮显示描述代码

    效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...

  3. HTML5+CSS3鼠标悬停图片特效

    点击预览效果            下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...

  4. MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件

    MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...

  5. 分享10款效果惊艳的HTML5图片特效

    在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...

  6. 16种基于 CSS3 & SVG 的创意的弹窗效果

    在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...

  7. 分享10款效果惊艳的HTML5图片特效【转】

    先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...

  8. 8款精美的HTML5图片动画分享

    From:http://geek.csdn.net/news/detail/196250 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图 ...

  9. jQuery css3鼠标悬停图片显示遮罩层动画特效

    jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...

随机推荐

  1. atitit.元编程总结 o99

    atitit.元编程总结 o99.doc 1. 元编程(Metaprogramming) 1 2. 元编程的历史and发展 1 3. 元类型and元数据 1 4. 元编程实现方式 2 4.1. 代码生 ...

  2. iOS开发——高级技术&PassBook服务

    PassBook服务 Passbook是苹果推出的一个管理登机牌.会员卡.电影票.优惠券等信息的 工具.Passbook就像一个卡包,用于存放你的购物卡.积分卡.电影票.礼品卡等,而这些票据就是一个“ ...

  3. java匿名对象_面向对象

    class Student{ public void tell(){ System.out.println("Hello jikexueyuan"); } public void ...

  4. es6学习笔记5--promise

    所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API, ...

  5. mysql忘记密码重置(mac)

    setp1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2:进入终端输入:cd /usr/local/ ...

  6. python爬虫代码

    原创python爬虫代码 主要用到urllib2.BeautifulSoup模块 #encoding=utf-8 import re import requests import urllib2 im ...

  7. Winform TreeView 查找下一个节点

    转载:http://www.cnblogs.com/Ruiky/archive/2013/02/01/2888674.html public static class TreeViewHelper { ...

  8. Swift - UITableViewCell倒计时重用解决方案

    Swift - UITableViewCell倒计时重用解决方案 效果 源码 https://github.com/YouXianMing/Swift-Animations // // CountDo ...

  9. CentOS下httpd下php 连接mysql 本机可以,127.0.0.1不能访问

    你看到的这个文章来自于http://www.cnblogs.com/ayanmw php代码很简单: $server="127.0.0.1"; println("Begi ...

  10. Windows XP 中设置VPN(PPTP连接方式)

    第一步:点开始-网上邻居或者控制面板-网络连接,选择-创建一个新的连接 第二步:点击-下一步 第三步:选择-连接到我的工作场所的网络,点击-下一步 第四步:选择-虚拟专用网络连接,点击-下一步 第五步 ...