文档章节

CSS模拟android电视盒子卡片选中变大特效

我等你
 我等你
发布于 2015/03/31 17:38
字数 332
阅读 38
收藏 0

所有CSS样式:

/* 基础样式  */
body {
	padding: 40px;
	background-color: #333;
}
.card img {
	height: 100%;
	width: 100%;
}
.card {
	background: #FFFFFF;
	width: 150px;
	height: 200px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
	margin: 2px;
	text-align: center;
	float: left;
}

/* 核心样式 */
.card {
	/* 定义过渡属性,就是平滑的变大,看起来不会那么生硬  */
	transition: all 1s 1 ease-in-out;
	/* webkit写法,现在的chrome版本已经支持transition这种方式了 */
	-webkit-transition: all 1s 1 ease-in-out;
}
.card:hover,.card:focus {
	/* 依次定义变换、阴影、阴影的动画  */
	transform: scale(1.2);
	box-shadow: 2px 4px 6px #555555;
	animation: glow 1500ms ease-out infinite alternate;
	
	-webkit-transform: scale(1.2);
	-webkit-box-shadow: 2px 4px 6px #555555;
	-webkit-animation: glow 1500ms ease-out infinite alternate;
	
	outline: none;
}

/* 阴影的呼吸灯效果 */
@keyframes glow {
    0% {
		border-color: #FFF;
		box-shadow: 0 0 5px 5px transparent;
    }	
    100% {
		border-color: #FFF;
		box-shadow: 0 0 10px 5px #FFF;
    }
}
@-webkit-keyframes glow {
    0% {

body元素

<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>
	<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>
	<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>
	<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>
	<a href='javascript:void(0)' class='card'><img alt="" src="pic.jpg"></a>

图片大金刚,自己换了就OK

代码只在chrome上做了测试,其他浏览器如果支持上述CSS特性,那么应该也是可以的。

来看看效果图

© 著作权归作者所有

共有 人打赏支持
我等你
粉丝 2
博文 15
码字总数 4555
作品 0
成都
程序员
Android TV Launcher 桌面导航

现在基于Android 互联网电视盒子的生存越来越艰难了,广电总局这种行政压经济的方式....分享一个喜欢的Android TV桌面导航的UI与交互方式,不喜欢小米那种放大悬浮的样子.. 图是在我的平板上...

iSnowFlake
2014/07/23
0
1
Android Design与Holo Theme详解

在国内,有个很有意思的现状。一方面,几个国内最大的公司/企业的客户端/应用依旧冥顽不灵,丝毫不愿意遵循 Android Design,以各种扯淡的理由坚持使用 iOS UI 或者 Metro UI,或者其他叫不出...

枫影Xda
2013/05/21
0
1
一款APK,集成Lighttpd、phpMyAdmin、Drupal7、ownCloud等等工具

一、用途介绍: 手机服务站提供了Wifi热点、Web服务、MySQL数据库、PHP、phpMyAdmin、ownCloud私有云、Drupal内容管理、ssh远程登录服务、Transmission智能下载等功能。旨在帮助用户充分利用...

挽风阁
2014/08/01
0
0
经典升级,只为更好K歌提升直播体验——联想K歌麦克风UM20S测评

作为全球PC生产行业的大佬,联想不光是生产笔记本电脑,在其他的数码IT行业都有涉足且表现不错,在这些领域多有技术沉淀。例如智能手机,平板电脑,服务器,智能电视,服务器,工作站等等。其...

智科技
08/27
0
0
从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

Daotin
08/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

初级开发-编程题

` public static void main(String[] args) { System.out.println(changeStrToUpperCase("user_name_abc")); System.out.println(changeStrToLowerCase(changeStrToUpperCase("user_name_abc......

小池仔
24分钟前
0
0
现场看路演了!

HiBlock
昨天
4
0
Rabbit MQ基本概念介绍

RabbitMQ介绍 • RabbitMQ是一个消息中间件,是一个很好用的消息队列框架。 • ConnectionFactory、Connection、Channel都是RabbitMQ对外提供的API中最基本的对象。Connection是RabbitMQ的s...

寰宇01
昨天
4
0
官方精简版Windows10:微软自己都看不过去了

微软宣布,该公司正在寻求解决方案,以减轻企业客户的Windows 10规模。该公司声称,企业客户下载整个Windows 10文件以更新设备既费钱又费时。 微软宣布,该公司正在寻求解决方案,以减轻企业...

linux-tao
昨天
4
0
TypeScript基础入门之JSX(二)

转发 TypeScript基础入门之JSX(二) 属性类型检查 键入检查属性的第一步是确定元素属性类型。 内在元素和基于价值的元素之间略有不同。 对于内部元素,它是JSX.IntrinsicElements上的属性类型...

durban
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部