纯CSS实现电视连续剧 | 电影列表界面设计

Pure CSS TV Series Widget 左边列表，右边是选中节目简介：大图片背景、缩略图、描述。缩略图在选中时，会有一个漂移动效。

css3, tv, movie, template

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@import url(https://fonts.googleapis.com/css?family=Nunito:400,700);
body {
    background: #3C3A46;
    font-family: 'Nunito', sans-serif;
    height: 100vh;
    overflow: hidden;
}
body .container {
    box-shadow: 0px 28px 40px -20px rgba(0, 0, 0, 0.33);
    width: 600px;
    position: absolute;
    top: 50%;
    border-radius: 8px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    margin: auto;
    right: 0;
}
body .container_inner {
    border-radius: 12px;
}
body .container_inner__list {
    border-radius: 8px;
    overflow: hidden;
}
body .container_inner__list .list_item:nth-of-type(1) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(1) label .list_item__placeholder {
    top: 15px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(2) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(2) label .list_item__placeholder {
    top: 72px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(3) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(3) label .list_item__placeholder {
    top: 129px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(4) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(4) label .list_item__placeholder {
    top: 186px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(5) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(5) label .list_item__placeholder {
    top: 243px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(6) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(6) label .list_item__placeholder {
    top: 300px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(7) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(7) label .list_item__placeholder {
    top: 357px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(8) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(8) label .list_item__placeholder {
    top: 414px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(9) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(9) label .list_item__placeholder {
    top: 471px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(10) label .list_item__image,
body .container_inner__list .list_item:nth-of-type(10) label .list_item__placeholder {
    top: 528px;
    left: 158px;
}
body .container_inner__list .list_item:nth-of-type(1) label .list_item__bg {
    background: url("https://latimesherocomplex.files.wordpress.com/2015/04/daredevil.jpg");
}
body .container_inner__list .list_item:nth-of-type(2) label .list_item__bg {
    background: url("http://unspoiledpodcasts.com/wp-content/uploads/2014/09/Breaking-Bad.jpg");
}
body .container_inner__list .list_item:nth-of-type(3) label .list_item__bg {
    background: url("http://images.cwtv.com/images/shows/og-image/the-flash.png");
}
body .container_inner__list .list_item:nth-of-type(4) label .list_item__bg {
    background: url("http://flicksided.com/files/2015/05/lost-cast-abc.jpg");
}
body .container_inner__list .list_item:nth-of-type(5) label .list_item__bg {
    background: url("http://www.guusarts.com/wp-content/uploads/2015/04/b28117ea-41bc-47fe-93ef-f82a1f31717b.jpg");
}
body .container_inner__list .list_item:nth-of-type(6) label .list_item__bg {
    background: url("http://assets1.ignimgs.com/2015/06/03/poster-prison-break-season-2jpg-e3aaf9_1280w.jpg");
}
body .container_inner__list .list_item:nth-of-type(1) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/dd_small.png");
}
body .container_inner__list .list_item:nth-of-type(2) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/bb_small.png");
}
body .container_inner__list .list_item:nth-of-type(3) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/tf_small.png");
}
body .container_inner__list .list_item:nth-of-type(4) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/l_small.png");
}
body .container_inner__list .list_item:nth-of-type(5) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/d_small.png");
}
body .container_inner__list .list_item:nth-of-type(6) label .list_item__image {
    background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/pb_small.png");
}
body .container_inner__list .list_item__bg {
    position: absolute;
    background-size: cover !important;
    top: -100%;
    left: -100%;
    opacity: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
    width: 1920px;
    z-index: -1;
    height: 1200px;
}
body .container_inner__list .list_item__image,
body .container_inner__list .list_item__placeholder {
    width: 26px;
    height: 26px;
    background-size: 102% !important;
    position: absolute;
    left: 0;
    z-index: 2;
    top: 0;
    border-radius: 2px;
    float: right;
    -webkit-transition: all 1s 0.1s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 1s 0.1s cubic-bezier(0.19, 1, 0.22, 1);
}
body .container_inner__list .list_item__placeholder {
    background: #31A993;
}
body .container_inner__list .list_item label {
    padding: 20px;
    width: 160px;
    font-weight: normal;
    cursor: pointer;
    color: #A5B9C7;
    font-size: 13px;
    display: block;
    background: #536F84;
    -webkit-transition: all .2s;
    transition: all .2s;
}
body .container_inner__list .list_item label:hover {
    background: #4C677B;
}
body .container_inner__list .list_item label:hover .icon {
    opacity: 1;
    left: 20px;
}
body .container_inner__list .list_item label:hover span {
    padding-left: 20px;
}
body .container_inner__list .list_item input[type="radio"] {
    display: none;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .list_item__feature {
    display: block;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .list_item__bg {
    opacity: .4;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .list_item__image {
    position: absolute;
    top: 20px;
    left: 220px;
    width: 80px;
    height: 80px;
}
body .container_inner__list .list_item input[type="radio"]:checked + label {
    background: -webkit-linear-gradient(left, #1DB99D 0%, #32C5AB 100%);
    background: linear-gradient(left, #1DB99D 0%, #32C5AB 100%);
    color: white;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .icon {
    opacity: 1;
    left: 20px;
}
body .container_inner__list .list_item input[type="radio"]:checked + label span {
    padding-left: 20px;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(1) {
    -webkit-animation: pop 0.2s 0.2s forwards;
    animation: pop 0.2s 0.2s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(2) {
    -webkit-animation: pop 0.2s 0.25s forwards;
    animation: pop 0.2s 0.25s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(3) {
    -webkit-animation: pop 0.2s 0.3s forwards;
    animation: pop 0.2s 0.3s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(4) {
    -webkit-animation: pop 0.2s 0.35s forwards;
    animation: pop 0.2s 0.35s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(5) {
    -webkit-animation: pop 0.2s 0.4s forwards;
    animation: pop 0.2s 0.4s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(6) {
    -webkit-animation: pop 0.2s 0.45s forwards;
    animation: pop 0.2s 0.45s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(7) {
    -webkit-animation: pop 0.2s 0.5s forwards;
    animation: pop 0.2s 0.5s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(8) {
    -webkit-animation: pop 0.2s 0.55s forwards;
    animation: pop 0.2s 0.55s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(9) {
    -webkit-animation: pop 0.2s 0.6s forwards;
    animation: pop 0.2s 0.6s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .ion-android-star:nth-of-type(10) {
    -webkit-animation: pop 0.2s 0.65s forwards;
    animation: pop 0.2s 0.65s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label h1 {
    -webkit-animation: pop .2s .1s forwards;
    animation: pop .2s .1s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label h2 {
    -webkit-animation: pop .2s .15s forwards;
    animation: pop .2s .15s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label p {
    -webkit-animation: pop .6s .5s forwards;
    animation: pop .6s .5s forwards;
}
body .container_inner__list .list_item input[type="radio"]:checked + label .watch {
    -webkit-animation: poptwo .6s .6s forwards;
    animation: poptwo .6s .6s forwards;
}
body .container_inner__list .list_item .icon {
    position: absolute;
    left: 0px;
    font-size: 14px;
    opacity: 0;
}
body .container_inner__list .list_item span,
body .container_inner__list .list_item .icon {
    -webkit-transition: padding .2s, left .2s, opacity .2s;
    transition: padding .2s, left .2s, opacity .2s;
}
body .container_inner__list .list_item__feature {
    display: none;
    width: 400px;
    overflow: hidden;
    position: absolute;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    right: 0;
    top: 0;
    height: 100%;
}
body .container_inner__list .list_item__feature .gif {
    position: absolute;
}
body .container_inner__list .list_item__feature .gif_overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.69);
}
body .container_inner__list .list_item__feature .information {
    z-index: 2;
    position: relative;
    left: 120px;
}
body .container_inner__list .list_item__feature .information h1,
body .container_inner__list .list_item__feature .information h2,
body .container_inner__list .list_item__feature .information p {
    opacity: 0;
    position: relative;
    top: 7px;
}
body .container_inner__list .list_item__feature .information h1 {
    font-size: 16px;
    margin: 27px 0px 0px 0px;
}
body .container_inner__list .list_item__feature .information h2 {
    font-size: 12px;
    margin: 0px 0px 10px 0px;
}
body .container_inner__list .list_item__feature .information .ion-android-star {
    float: left;
    color: #EAA739;
    opacity: 0;
    position: relative;
    top: 4px;
    margin-right: 3px;
}
body .container_inner__list .list_item__feature .watch {
    position: absolute;
    bottom: 10px;
    left: 20px;
    opacity: 0;
    padding: 10px 20px;
    border-radius: 4px;
    -webkit-transition: all .2s;
    transition: all .2s;
    border: 2px solid white;
}
body .container_inner__list .list_item__feature .watch:hover {
    color: #536F84;
    background: white;
}
body .container_inner__list .list_item__feature .watch .ion-android-star {
    float: left;
    margin-right: 10px;
}
body .container_inner__list .list_item__feature .description {
    z-index: 2;
    position: relative;
    left: 20px;
    top: 20px;
}
body .container_inner__list .list_item__feature .description p {
    width: 370px;
    opacity: 0;
    position: relative;
    top: 7px;
    clear: both;
    font-size: 11px;
    line-height: 16px;
}
@-webkit-keyframes pop {
    100% {
        top: 0;
        opacity: 1;
    }
}
@keyframes pop {
    100% {
        top: 0;
        opacity: 1;
    }
}
@-webkit-keyframes poptwo {
    100% {
        bottom: 20px;
        opacity: 1;
    }
}
@keyframes poptwo {
    100% {
        bottom: 20px;
        opacity: 1;
    }
}

HTML

Pure CSS TV Series Widget 左边列表，右边是选中节目简介：大图片背景、缩略图、描述。缩略图在选中时，会有一个漂移动效。

css3, tv, movie, template

编辑器支持Emmet

快捷键

Pure CSS TV Series Widget 左边列表，右边是选中节目简介：大图片背景、缩略图、描述。 缩略图在选中时，会有一个漂移动效。

css3, tv, movie, template

使用纯CSS实现一款很棒的材料化设计日历（日程安排 | 计划管理）移动应用页面模板

HTML5 CSS3树状（树形）评论列表界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

Pure CSS TV Series Widget 左边列表，右边是选中节目简介：大图片背景、缩略图、描述。缩略图在选中时，会有一个漂移动效。