CSS3 RSS源横向和竖向列表布局

数据从本地json文件读取（也可以通过开放api读取），然后以弹性列表的形式展示数据，可切换横竖向布局。

list

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var colors = ['72,35,68', '43,81,102', '66,152,103', '250,178,67', '224,33,48'];
//var RSSUrl = encodeURIComponent('http://codepen.io/posts/feed');
var $feedTitle = $('#header-title');
var $posts = $('#posts');
var $btnHori = $('#btn-hori');
var $btnVert = $('#btn-vert');

// get the posts thr open api
//$.ajax({
//  url: 'http://ajax.googleapis.com/ajax/services/feed/load?v=2.0&q='+RSSUrl+'&num=15',
//  dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
//  success: createPosts
//});
// get the posts from local file
console.log("get the posts from local file");
$.ajax({
  url: '/uploads/140922/feeds.json',
  dataType: 'json',
  success: createPosts
});

// add events for buttons
$btnVert.on('click', function() {
   $btnVert.addClass('active');
   $btnHori.removeClass('active'); $posts.removeClass('horizontal').addClass('vertical');
})

$btnHori.on('click', function() {
   $btnHori.addClass('active');
   $btnVert.removeClass('active'); $posts.removeClass('vertical').addClass('horizontal');
})

编译

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
* {
  padding: 0;
  margin: 0; }

html, body {
  height: 100%;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  letter-spacing: 0.1em; }

.header {
  position: fixed;
  background: #fff;
  right: 0;
  left: 0;
  height: 50px;
  z-index: 10;
  top: 0;
  line-height: 53px; }

.header-title, .btn {
  margin: 0px 10px;
  text-transform: uppercase; }

.btn {
  border: 1px solid #000;
  padding: 2px 6px;
  font-size: 14px;
  top: -2px;
  position: relative;
  cursor: pointer; }

.btn:hover, .btn.active {
  color: #fff;
  background: #000; }

.posts {
  height: 100%;
  width: 100%;
  top: 50px;
  position: absolute;
  white-space: nowrap; }

.overlay {
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  transition: transform 0.3s; }

.posts:hover .overlay {
  opacity: 0.3; }

.post {
  position: relative;
  z-index: 0;
  color: #fff;
  min-height: 100px; }

.post .more {
  letter-spacing: 0;
  margin-top: 20px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: 0;
  -webkit-transform: translateY(20px);
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -o-transform: translateY(20px);
  transform: translateY(20px);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s; }

.post:hover {
  z-index: 5; }

.post:hover .more {
  opacity: 1;
  -webkit-transform: translateY(0px);
  -moz-transform: translateY(0px);
  -ms-transform: translateY(0px);
  -o-transform: translateY(0px);
  transform: translateY(0px); }

.horizontal .post {
  width: 100%; }

.horizontal .content {
  padding: 20px 10px; }

.vertical .post {
  width: 220px;
  height: 100%;
  display: inline-block;
  vertical-align: top; }

.vertical .content {
  padding: 20px;
  white-space: normal; }

.post .content {
  z-index: 2;
  position: relative;
  font-family: 'Open Sans', sans-serif;
  pointer-events: none; }

.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  transition: transform 0.3s; }

h3 {
  font-weight: normal;
  font-size: 20px;
  font-family: 'Yanone Kaffeesatz', sans-serif; }

.author {
  font-size: 12px; }

.post-link {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }

.horizontal .post:hover .bg {
  -webkit-transform: scaleY(1.3);
  -moz-transform: scaleY(1.3);
  -ms-transform: scaleY(1.3);
  -o-transform: scaleY(1.3);
  transform: scaleY(1.3); }

.vertical .post:hover .bg {
  -webkit-transform: scaleX(1.2);
  -moz-transform: scaleX(1.2);
  -ms-transform: scaleX(1.2);
  -o-transform: scaleX(1.2);
  transform: scaleX(1.2); }

HTML

数据从本地json文件读取（也可以通过开放api读取），然后以弹性列表的形式展示数据，可切换横竖向布局。

list

编辑器支持Emmet

快捷键

数据从本地json文件读取（也可以通过开放api读取），然后以弹性列表的形式展示数据，可切换横竖向布局。

list

6个CSS3团队成员卡片列表介绍页面动效

使用anime.js和SVG实现的列表项删除破碎玻璃特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：