基于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="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 /> <div style="width: 300px; height: 150px;"> <br /> <img src="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="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>
基于CSS3和HTML5图片加工前后对比代码的更多相关文章
- 一款基于css3的3D图片翻页切换特效
今天给大家分享一款基于css3的3D图片翻页切换特效.单击图片下方的滑块会切换上方的图片.动起你的鼠标试试吧,效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id= ...
- CSS3鼠标悬停图片上浮显示描述代码
效果:http://hovertree.com/texiao/css3/20/ 效果图: 代码如下: <!doctype html> <html lang="zh" ...
- HTML5+CSS3鼠标悬停图片特效
点击预览效果 下载该特效: HTML5+CSS3鼠标悬停图片特效.zip 特效说明: 一款HTML5+CSS3鼠标悬停图片事件网页特效,集合了最流行鼠标悬停图片文字.图片动画移动 ...
- MixItUp:超炫!基于 CSS3 & jQuery 的过滤和排序插件
MixItUp 是一款轻量,但功能强大的 jQuery 插件,提供了对分类和有序内容的美丽的动画过滤和排序功能.特别适合用于作品集网站,画廊,图片博客以及任何的分类或有序内容. 它是如何工作的? Mi ...
- 分享10款效果惊艳的HTML5图片特效
在HTML5的世界里,图片特效都十分绚丽,我们在网站上也分享过很多不错的HTML5图片特效,现在我们精选10款效果惊艳的HTML5图片特效分享给大家. 1.HTML5 3D正方体旋转动画 很酷的3D特 ...
- 16种基于 CSS3 & SVG 的创意的弹窗效果
在去年,我给大家分享了<基于 CSS3 的精美模态窗口效果>,而今天我要与大家分享一些新鲜的想法.风格和趋势变化,要求更加适合现代UI的不同的效果.这组新模态窗口效果包含了一些微妙的动画, ...
- 分享10款效果惊艳的HTML5图片特效【转】
先插入一条广告,博主新开了一家淘宝店,经营自己纯手工做的发饰,新店开业,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!店名: 小鱼尼莫手工饰品店经营: 发饰.头花.发夹.耳环等(手工制作)网店: ...
- 8款精美的HTML5图片动画分享
From:http://geek.csdn.net/news/detail/196250 HTML5结合jQuery可以让网页图片变得更加绚丽多彩,比如实现一些图片3D切换.CSS3动画绘制以及各种图 ...
- jQuery css3鼠标悬停图片显示遮罩层动画特效
jQuery css3鼠标悬停图片显示遮罩层动画特效 效果体验:http://hovertree.com/texiao/jquery/39/ 效果图: 源码下载:http://hovertree.co ...
随机推荐
- atitit.元编程总结 o99
atitit.元编程总结 o99.doc 1. 元编程(Metaprogramming) 1 2. 元编程的历史and发展 1 3. 元类型and元数据 1 4. 元编程实现方式 2 4.1. 代码生 ...
- iOS开发——高级技术&PassBook服务
PassBook服务 Passbook是苹果推出的一个管理登机牌.会员卡.电影票.优惠券等信息的 工具.Passbook就像一个卡包,用于存放你的购物卡.积分卡.电影票.礼品卡等,而这些票据就是一个“ ...
- java匿名对象_面向对象
class Student{ public void tell(){ System.out.println("Hello jikexueyuan"); } public void ...
- es6学习笔记5--promise
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise是一个对象,从它可以获取异步操作的消息.Promise提供统一的API, ...
- mysql忘记密码重置(mac)
setp1: 苹果->系统偏好设置->最下边点mysql 在弹出页面中 关闭mysql服务(点击stop mysql server) step2:进入终端输入:cd /usr/local/ ...
- python爬虫代码
原创python爬虫代码 主要用到urllib2.BeautifulSoup模块 #encoding=utf-8 import re import requests import urllib2 im ...
- Winform TreeView 查找下一个节点
转载:http://www.cnblogs.com/Ruiky/archive/2013/02/01/2888674.html public static class TreeViewHelper { ...
- Swift - UITableViewCell倒计时重用解决方案
Swift - UITableViewCell倒计时重用解决方案 效果 源码 https://github.com/YouXianMing/Swift-Animations // // CountDo ...
- CentOS下httpd下php 连接mysql 本机可以,127.0.0.1不能访问
你看到的这个文章来自于http://www.cnblogs.com/ayanmw php代码很简单: $server="127.0.0.1"; println("Begi ...
- Windows XP 中设置VPN(PPTP连接方式)
第一步:点开始-网上邻居或者控制面板-网络连接,选择-创建一个新的连接 第二步:点击-下一步 第三步:选择-连接到我的工作场所的网络,点击-下一步 第四步:选择-虚拟专用网络连接,点击-下一步 第五步 ...