html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效

这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效。该特效将图片制作为圆形图片，以网格形式布局，带点击相应的分类按钮后，该类别的图片被放大显示，其它类别的图片被缩小，效果非常的不错。

制作方法

HTML结构

该图片过滤特效使用无序列表来制作网格图片布局。每个

元素中的data-teams属性是该图片的所属类别，类别可以有多个，用空格隔开。

Angel
Beast

......

用于作为分类的按钮则使用和的组合来制作。

Original X-Men

CSS样式

过滤效果实现的原理是在各个input按钮被选择时，选取data-teams中相应的图片，来执行帧动画效果：

#original:checked ~ .characters [data-teams~="original"] img,

#force:checked ~ .characters [data-teams~="force"] img,

#factor:checked ~ .characters [data-teams~="factor"] img,

#hellfire:checked ~ .characters [data-teams~="hellfire"] img {

-webkit-animation: avatar .3s forwards;

animation: avatar .3s forwards;

}

@-webkit-keyframes avatar {

70% {

opacity: 1;

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

transform: scale(1);

}

@keyframes avatar {

70% {

opacity: 1;

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

100% {

opacity: 1;

-webkit-transform: scale(1);

transform: scale(1);

}

该特效还使用媒体查询来控制各个屏幕尺寸下.characters元素和H1元素的大小。

@media only screen and (min-width: 500px) {

.characters {

width: 480px;

}

@media only screen and (min-width: 740px) {

.characters {

width: 720px;

}

h1 {

font-size: 60px;

}

@media only screen and (min-width: 980px) {

.characters {

width: 960px;

}

其余代码请参考下载文件。

html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效相关推荐

html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构折叠面板的html结 ...
html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
html的悬停图片圆形,css3炫酷圆形图片鼠标滑过特效
这是一款纯css3炫酷圆形图片鼠标滑过特效插件.在插件中,所有的缩略图都被用css3 border-radius制作成圆形,然后再在其上做各种鼠标滑过特效. HTML 所有demo的html结构都如下 ...
纯CSS3炫酷3D星空动画特效
效果: 源码: <!DOCTYPE html> <html lang="zh"> <head><meta charset="UT ...
php星空背景动态,纯CSS3炫酷3D星空动画特效
简要教程这是一款使用纯CSS3制作的炫酷3D星空动画特效.该特效中,以飞船向前快速移动为视角,所有的星星都快速的变大并向后移动,效果非常逼真. 使用方法 HTML结构该3D星空特效只使用一个元素 ...
用html浮雕效果图,纯CSS3炫酷3D浮雕质感文字动画特效
这是一款效果非常酷的纯CSS3 3D浮雕质感文字动画特效.该特效中文字被制作为浮雕文字,就像是从一块石板上将文字雕刻下来的一样.而且文字还会来回的摆动旋转,效果非常好. 制作方法 HTML结构该CS ...
纯css3炫酷科技感菜单
下载地址一款样式炫酷的旋转导航菜单,纯css3代码实现的炫酷科技感菜单,带css3旋转动画特效. dd:
html5 圆形加载进度条,纯css3超酷圆形Loading加载进度条特效
这是一款效果炫酷的纯css3圆形Loading加载进度条特效插件.该loading特效使用:before和:after伪元素来制作动画d的不同部分,然后给他们设置absolute定位和CSS tran ...
html浮动炫酷样式,jQuery和CSS3炫酷表单浮动标签特效
这是一款炫酷的jQuery和CSS3表单浮动标签特效.浮动标签是指输入框中的文字或占位文本在输入框聚焦的时候,以动画的方式浮动到指定的地方.浮动标签特效是一种新颖时尚的动画特效,不仅效果很酷,而且能以 ...

html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效

Angel

Beast

html img 圆头像_纯CSS3炫酷圆形头像图片过滤特效相关推荐

最新文章

热门文章