分享一款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. Java String字符串/==和equals区别,str。toCharAt(),getBytes,indexOf过滤存在字符,trim()/String与StringBuffer多线程安全/StringBuilder单线程—— 14.0

    课程概要 String 字符串 String字符串常用方法 StringBuffer StringBuilder String字符串: 1.实例化String对象 直接赋值  String str=& ...

  2. Leetcode 299 Bulls and Cows 字符串处理 统计

    A就是统计猜对的同位同字符的个数 B就是统计统计猜对的不同位同字符的个数 非常简单的题 class Solution { public: string getHint(string secret, s ...

  3. 解决用navicate远程连接数据库出现1045 access denied for user 'root'@'localhost' using password yes

    在mysql命令行中执行 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('123456');  GRANT ALL PRIVILEGES ON *.*  ...

  4. Disable multi finger touch in my app

    http://stackoverflow.com/questions/12777435/disable-multi-finger-touch-in-my-app android:splitMotion ...

  5. 关于启明星系统(OA系统,预定系统,请假系统等)安全性的说明

    启明星系统推荐是安装在内网里,因此,系统采用了较为简单的身份验证. 事实上,在访问页面时,系统会判断当前cookie的uid是否大于0,如果是,则表示用户已经登录,否则表示未登录. public st ...

  6. netstat(转载)

    简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...

  7. django文件上传下载

    views: def mgmt_files(request): #列出树形目录,上传文件页面 if request.method == 'POST': path_root = "D:\\py ...

  8. Android按键之Menu详解

    Android手机一般都有三个键,返回键.Home键.菜单键: Android系统的菜单支持主要通过4个接口来实现. 从上图可以看出Menu是一个父类接口,它下面有两个子类一个是ContextMenu ...

  9. Spark随机森林实现学习

    前言 最近阅读了spark mllib(版本:spark 1.3)中Random Forest的实现,发现在分布式的数据结构上实现迭代算法时,有些地方与单机环境不一样.单机上一些直观的操作(递归),在 ...

  10. Maven Learning - Direct Dependencies & Transitive Dependencies

    Dependencies declared in your project's pom.xml file often have their own dependencies. The main dep ...