文档章节

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

我等你
 我等你
发布于 2015/03/31 17:38
字数 332
阅读 33
收藏 0
点赞 0
评论 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
Android 5.0+(RecycleView、CardView、Palette)

Android L 开发者预览支持库提供两个新的Widgets,RecyclerView和CardView。使用这两个Widgets可以显示复杂的Listview和卡片布局,这两个Widgets默认使用Material design。 RecyclerView R...

让代码飞一会
2015/07/27
0
0
认识Android Support Library

本文目的:认识Android Support Library 本文转载于官网 Android 支持库提供了诸多未内置于框架的功能。这些库提供向后兼容版本的新功能、框架中未包含的实用 UI 元素,以及应用可以利用的一...

lichuangnk
07/10
0
0
Android四种模式里隐含的哲学

Android的核心概念是Activity。一切围绕着Activity展开,Task也不例外。也就是说,Task是作为Activity的一种属性存在的。甚至,整个系统都是作为Activity的运行环境而存在的。 SingleInstan...

刘小兵2014
2012/10/31
0
0
微信公众平台开发:进阶篇(Web App开发入门)

WebApp与Native App有何区别呢? Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包...

LorinLuo
2015/03/06
0
0
电信盒子HG680-J 1.3.7刷机升级

盒子使用的是Android系统,已经升级到1.3.7版了,按照网上说的方法刷当贝市场或沙发管理都启动不成功,可能是网上这个帖子太多,直接被电信升级系统后封杀了,没法用,只好用其它方法曲线升级...

newthink
06/26
0
0
WebApp与Native App的区别

WebApp与Native App的区别 Native App: 1、开发成本非常大。一般使用的开发语言为JAVA、C++、Objective-C。 2、更新体验较差、同时也比较麻烦。每一次发布新的版本,都需要做版本打包,且需...

一真的鱼
07/03
0
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

代码生成利器:IDEA 强大的 Live Templates

代码生成利器:IDEA 强大的 Live Templates

qwfys
15分钟前
1
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
19分钟前
0
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
22分钟前
0
0
日常运维--rsync同步工具

rsync命令是一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件。rsync使用所谓的“rsync算法”来使本地和远程两个主机之间的文件达到同步,这个算法只传送两个文件的不同部分,而...

chencheng-linux
26分钟前
1
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
38分钟前
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
0
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
0
0
rsync工具介绍/rsync通过ssh同步

rsync工具介绍 数据备份是必不可少,在Linux系统下数据备份的工具很多,其中重点介绍就是rsync工具,rsync不仅可以远程同步数据,还可以本地同步数据,且不会覆盖以前的数据在已经存在的数据...

Hi_Yolks
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部