基于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 ...
随机推荐
- Java String字符串/==和equals区别,str。toCharAt(),getBytes,indexOf过滤存在字符,trim()/String与StringBuffer多线程安全/StringBuilder单线程—— 14.0
课程概要 String 字符串 String字符串常用方法 StringBuffer StringBuilder String字符串: 1.实例化String对象 直接赋值 String str=& ...
- Leetcode 299 Bulls and Cows 字符串处理 统计
A就是统计猜对的同位同字符的个数 B就是统计统计猜对的不同位同字符的个数 非常简单的题 class Solution { public: string getHint(string secret, s ...
- 解决用navicate远程连接数据库出现1045 access denied for user 'root'@'localhost' using password yes
在mysql命令行中执行 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('123456'); GRANT ALL PRIVILEGES ON *.* ...
- Disable multi finger touch in my app
http://stackoverflow.com/questions/12777435/disable-multi-finger-touch-in-my-app android:splitMotion ...
- 关于启明星系统(OA系统,预定系统,请假系统等)安全性的说明
启明星系统推荐是安装在内网里,因此,系统采用了较为简单的身份验证. 事实上,在访问页面时,系统会判断当前cookie的uid是否大于0,如果是,则表示用户已经登录,否则表示未登录. public st ...
- netstat(转载)
简介 Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicast Member ...
- django文件上传下载
views: def mgmt_files(request): #列出树形目录,上传文件页面 if request.method == 'POST': path_root = "D:\\py ...
- Android按键之Menu详解
Android手机一般都有三个键,返回键.Home键.菜单键: Android系统的菜单支持主要通过4个接口来实现. 从上图可以看出Menu是一个父类接口,它下面有两个子类一个是ContextMenu ...
- Spark随机森林实现学习
前言 最近阅读了spark mllib(版本:spark 1.3)中Random Forest的实现,发现在分布式的数据结构上实现迭代算法时,有些地方与单机环境不一样.单机上一些直观的操作(递归),在 ...
- Maven Learning - Direct Dependencies & Transitive Dependencies
Dependencies declared in your project's pom.xml file often have their own dependencies. The main dep ...