Meetup People 隐藏的人物照片

相片默认是隐藏的，当鼠标停放在上面时，才会翻开。这样的应用有一种偶遇和猎奇的感觉。

photo

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1387
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/*the data is from 
https://api.meetup.com/2/profiles.json/?group_urlname=CodePen-Meetups&key=59435fb5a50665735103b424139f67
if you put the above link as url, u should change the ajax dataType to jsonp 
*/
(function() {
    var url;
    url = '/uploads/141102/meetups.json';
    $.ajax({
        type: 'GET',
        dataType: 'json',
        cache: false,
        url: url,
        success: function(data) {
            if (document.getElementById('photos')) {
                return $.each(data.results, function(index, photo) {
                    if (photo.photo_url !== void 0) {
                        photo = '<div class=\'photo\'>' + '<a href=\'' + photo.profile_url + '\' target=\'_blank\'>' + '<img class=\'main\' src=\'' + photo.photo_url + '\' />' + '</a>' + '</div>';
                        return $('#photos').append(photo);
                    }
                });
            }
        }
    });
    setTimeout(function() {
        return $('.photo:nth-of-type(odd) a').addClass('show');
    }, 1000);
}.call(this));

编译

CSS

body {
    background: #1d1d1d;
}
.photo {
    position: relative;
    display: inline-block;
    margin: 0;
    vertical-align: bottom;
    z-index: 2;
}
.photo:nth-of-type(even) a {
    animation-duration: 1s;
    animation-name: flips;
    animation-iteration-count: 3;
}
.photo:nth-of-type(odd) a.show {
    animation-duration: 1s;
    animation-name: flips2;
    animation-iteration-count: 3;
}
.photo img {
    display: inline-block;
    width: 210px;
    margin: 0;
    vertical-align: bottom;
    position: absolute;
    top: 0;
    left: 0;
    margin-left: -50%;
    margin-top: -50%;
}
a {
    position: relative;
    width: 82px;
    height: 82px;
    overflow: hidden;
    display: block;
    margin: 0px;
    padding: 0px;
    transition: 0.3s;
    opacity: 0;
    transform: rotateY(360deg);
    transform-style: preserve-3d;
}
a:hover {
    opacity: 1;
    transform: rotateY(-180deg);
}
@keyframes flips {
    0% {
        transform: rotateY(360deg);
    }
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}
@keyframes flips2 {
    0% {
        transform: rotateY(-360deg);
    }
    50% {
        opacity: 1;
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(-360deg);
    }
}

HTML

相片默认是隐藏的，当鼠标停放在上面时，才会翻开。这样的应用有一种偶遇和猎奇的感觉。

photo

编辑器支持Emmet

快捷键

相片默认是隐藏的，当鼠标停放在上面时，才会翻开。这样的应用有一种偶遇和猎奇的感觉。

photo

基于Mansory构建的一款带运动效果的网格布局照片墙网页模板

three.js构建电影胶卷风格的3D幻灯片

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：