HTML5电视节目介绍表单模板

悬停在封面图片上会出现轻微翘起的动画。

html5, 模板

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

TV SHOW DATA

var rating = ["", " ★★★★★", " ★★★★☆", " ★★★☆☆"];
var show = ['', 'Breaking Bad', 'Daredevil', 'Suits'];
var seasons = ["", "5", "2", "4"];
var year = ["", "2013", "2015", "2011"];
var desc = ["", "A high school chemistry teacher dying of cancer teams with a former student to secure his family's future by manufacturing and selling crystal meth.", "Blinded as a young boy, Matt Murdock fights injustice by day as a lawyer and by night as the Super Hero Daredevil in Hell's Kitchen, New York City.", "When he impresses a big lawyer with his razor-sharp mind, a college dropout scores a coveted associate job, even though he has no legal credentials."];
var bgFull = ["", "https://images4.alphacoders.com/258/258026.png", "http://images6.fanpop.com/image/photos/38400000/Cast-of-Season-One-daredevil-netflix-38400066-1920-1080.jpg", "http://www.usanetwork.com/sites/usanetwork/files/Suits_16x9_FeaturedPromo_1920x1080.jpg"];
var bgHalf = ["", "http://spinoff.comicbookresources.com/wp-content/uploads/2012/06/breaking-bad-season5.jpg", "http://cdn.collider.com/wp-content/uploads/2015/02/daredevil-tv-series-poster-matt-murdock.jpg", "http://cimg.tvgcdn.net/i/r/2015/05/27/1ba24116-0359-4835-ab0f-f484071db9dc/resize/815x1055/5eb91b36ae3777915874716a7b003e83/suitsfinalupdated.jpg"];
/*

PRELOADING

*/
$('<img/>').attr('src', 'http://images6.fanpop.com/image/photos/38400000/Cast-of-Season-One-daredevil-netflix-38400066-1920-1080.jpg').load(function() {
    $(this).remove(); // prevent memory leaks as @benweet suggested
});

$('<img/>').attr('src', 'http://www.usanetwork.com/sites/usanetwork/files/Suits_16x9_FeaturedPromo_1920x1080.jpg').load(function() {
    $(this).remove(); // prevent memory leaks as @benweet suggested
});
/*

LOADING TV SHOW DATA

*/
$(".box").click(function() {
    $(".box").removeClass("active");
    $(this).addClass("active");
    var i = $(this).index() + 1;
    $(".bbg").css("background-image", "url(" + bgFull[i] + ")");
    $(".bg").css("background-image", "url(" + bgHalf[i] + ")");
    setTimeout(
        function() {
            $(".content h1").html(show[i]);
            $(".content h3").html("<table>" +
                "<tr>" +
                "<td> " +
                "<p class='star'>" + rating[i] + "</p>" +
                "</td>" +
                "<td>" +
                "<p>" + year[i] + "</p>" +
                "</td>" +
                "<td>" +
                "<p>" + seasons[i] + " Seasons</p>" +
                "</td>" +
                "</tr>" +
                "</table>");
            $(".content .desc").html(desc[i]);
        }, 500);
});
/*

HOVERING THING

*/
var array = ["", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"];
var x = function(a) {
    $(".hover:nth-child(" + a + ")").hover(function() {
        $(".bg").addClass(array[a]);
    }, function() {
        $(".bg").removeClass(array[a]);
    });
}
for (var i = 0; i < 10; i++) {
    x(i);
}

编译

CSS

@import url("https://fonts.googleapis.com/css?family=Lato:400,300,700");
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,
html {
    height: 100%;
    min-height: 100%;
}
body {
    font-family: 'Lato', sans-serif;
    overflow-x: hidden;
    perspective: 2000px;
}
.bbg {
    position: absolute;
    top: -100px;
    left: -100px;
    min-height: calc(100% + 200px);
    height: auto;
    width: calc(100% + 200px);
    z-index: -1;
    background: url("/uploads/161001/normal1.jpg");
    background-size: cover;
    -webkit-filter: blur(42px);
    transition: 0.5s all ease-in;
}
.wrapper {
    height: 100%;
    display: table;
    margin: 0 auto;
}
.wrapper .container {
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}
.wrapper .container .card {
    height: 500px;
    width: 1026px;
    position: relative;
}
.wrapper .container .card .bg {
    border-radius: 10px;
    height: 550px;
    width: 375px;
    position: absolute;
    z-index: 2;
    background-image: url("/uploads/161001/pokemonGo.jpg");
    background-size: 375px 550px;
    background-position: center;
    left: 0;
    top: -25px;
    transition: 0.5s all ease-in;
    transform: rotateX(0deg) rotateY(0deg) translateZ(0);
}
.wrapper .container .card .bg.one {
    transform: rotateX(10deg) rotateY(-5deg) translateZ(0);
}
.wrapper .container .card .bg.two {
    transform: rotateX(10deg) rotateY(0deg) translateZ(0);
}
.wrapper .container .card .bg.three {
    transform: rotateX(10deg) rotateY(5deg) translateZ(0);
}
.wrapper .container .card .bg.four {
    transform: rotateX(0deg) rotateY(-5deg) translateZ(0);
}
.wrapper .container .card .bg.five {
    transform: rotateX(0deg) rotateY(0deg) translateZ(0px);
}
.wrapper .container .card .bg.six {
    transform: rotateX(0deg) rotateY(5deg) translateZ(0);
}
.wrapper .container .card .bg.seven {
    transform: rotateX(-10deg) rotateY(-5deg) translateZ(0);
}
.wrapper .container .card .bg.eight {
    transform: rotateX(-10deg) rotateY(0deg) translateZ(0);
}
.wrapper .container .card .bg.nine {
    transform: rotateX(-10deg) rotateY(5deg) translateZ(0);
}
.wrapper .container .card .bg:hover {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.wrapper .container .card .bg .hover {
    box-sizing: border-box;
    height: calc(550px / 3);
    width: calc(375px / 3);
    float: left;
}
.wrapper .container .card .content {
    height: 100%;
    width: 100%;
    background: #eee;
    border-radius: 10px;
    position: relative;
}
.wrapper .container .card .content .padding {
    height: calc(100% - 100px);
    width: 275px;
    padding: 50px 0px 50px 35px;
    position: absolute;
    left: 375px;
}
.wrapper .container .card .content .padding h1 {
    font-weight: 700;
    padding: 5px;
    font-size: 35px;
}
.wrapper .container .card .content .padding h3 {
    padding: 5px 5px 20px 5px;
}
.wrapper .container .card .content .padding h3 table tr td {
    border-right: 1px solid #999;
}
.wrapper .container .card .content .padding h3 table tr td:nth-child(3) {
    border: none;
}
.wrapper .container .card .content .padding h3 table tr td p {
    text-align: center;
    font-weight: 400;
}
.wrapper .container .card .content .padding h3 table tr td p.star {
    color: #fbbc05;
}
.wrapper .container .card .content .padding p {
    font-weight: 100;
    padding: 0 5px;
    font-size: 15px;
}
.footer {
    position: absolute;
    height: 100%;
    top: 0;
    width: 297px;
    right: 0;
    z-index: 3;
}
.footer .box {
    height: calc(100% / 3);
    padding-right: 20px;
    background-size: contain;
    position: relative;
    cursor: pointer;
}
.footer .box.active {
    border: 3px solid #999;
}
.footer .box:nth-child(1) {
    border-top-right-radius: 10px;
}
.footer .box:nth-child(3) {
    border-bottom-right-radius: 10px;
}

HTML

悬停在封面图片上会出现轻微翘起的动画。

html5, 模板

编辑器支持Emmet

快捷键

悬停在封面图片上会出现轻微翘起的动画。

html5, 模板

HTML5带左右滑动切换动效的登录/注册表单页面模板

HTML5 CSS3 SVG团队成员介绍卡片页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：