css布局实现一个电视tv列表及详情页效果代码-html代码-BFW代码库

代码语言：html

代码描述：css布局实现一个电视tv列表及详情页效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400'>
  
<style>
/*--------------------
Body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #ffee75, #ff8930);
  color: #8b9095;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

/*--------------------
App
--------------------*/
.app {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 640px;
  height: 390px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
}
.app h2 {
  color: #525661;
  font-size: 17px;
  box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.1);
  padding: 20px 28px 0;
  margin: -6px 0 0 0;
}

/*--------------------
Header
--------------------*/
header {
  padding: 30px;
  position: relative;
  height: 70px;
}
header h1 {
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 20px;
  text-transform: uppercase;
  text-align: center;
  color: #1c222b;
}
header h1 strong {
  background: #F16018;
  color: #fff;
  display: inline-block;
  border-radius: 30px;
  padding: 6px;
  font-size: 83%;
  line-height: 1;
  position: relative;
  top: -1px;
  left: 2px;
}
header nav {
  cursor: pointer;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 28px;
  left: 28px;
}
header nav::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #363a47;
  border-radius: 2px;
  box-shadow: 0 5px 0 #363a47, 0 10px 0 #363a47;
}
header .search {
  position: absolute;
  top: 26px;
  right: 18px;
  cursor: pointer;
}
header .search svg {
  width: 20px;
  height: 20px;
}

/*--------------------
Movies
--------------------*/
.movies {
  display: -webkit-box;
  display: flex;
  padding: 8px 18px;
}
.movies .movie {
  padding: 10px;
  cursor: pointer;
}
.movies .movie .poster {
  width: 100%;
  margin-bottom: 6px;
  border-radius: 4px;
}
.movies .movie .poster.active {
  opacity: 0;
}
.movies .movie .title {
  color: #525661;
  margin-bottom: 4px;
  font-size: 16px;
}
.movies .movie .info {
  font-size: 11px;
  opacity: .8;
}
.movies .movie .desc {
  display: none;
}

/*--------------------
Detail
--------------------*/
.detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  padding: 37px 30px 30px 255px;
  display: none;
}
.detail::before {
  content: '';
  background: #fff;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
  transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
  position: absolute;
  top: 21px;
  right: 22px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  border: 6px solid #FFF;
  box-sizing: content-box;
  z-index: 10;
}
.detail .poster {
  position: absolute;
  z-index: 2;
  top: -10%;
  left: -6%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
  transition: all 0.5s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .title,
.detail .info,
.detail .desc,
.detail .play,
.detail .close {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px);
  opacity: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
  transition: all 0.4s cubic-bezier(0.67, 0.13, 0.1, 0.81);
}
.detail .close {
  -webkit-transform: translateX(10px);
          transform: translateX(10px);
}
.detail .title {
  font-size: 35px;
  font-weight: 300;
  color: #525661;
  margin-bottom: 5px;
}
.detail .info {
  font-size: 11px;
  opacity: 0;
  margin-left: 2px;
}
.detail .desc {
  margin-top: 30px;
  font-size: 14px;
  line-height: 1.6;
}
.detail .play {
  background: -webkit-gradient(linear, left top, right top, from(#E4761F), to(#FF8B32));
  background: linear-gradient(90deg, #E4761F, #FF8B32);
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  padding: 8px 17px;
  margin: 30px 0 0 -2px;
  text-transform: uppercase;
  z-index: 10;
  outline: none !important;
  cursor: pointer;
  opacity: 0;
}
.detail .play svg {
  vertical-align: middle;
  position: relative;
  top: -2px;
  margin-right: 3px;
}

.detail.ready::before {
  opacity: 1;
}
.detail.ready .info {
  opacity: .8;
}
.detail.ready .poster {
  opacity: 1;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
}
.detail.ready .title,
.detail.ready .info,
.detail.ready .desc,
.detail.ready .play,
.detail.ready .close {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  opacity: 1;
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-duration: .5s;
          transition-duration: .5s;
}
.detail.ready .title {
  -webkit-transition-delay: .2s;
          transition-delay: .2s;
}
.detail.ready .info {
  -webkit-transition-delay: .3s;
          transition-delay: .3s;
}
.detail.ready .desc {
  -webkit-transition-delay: .4s;
          transition-delay: .4s;
}
.detail.ready .play {
  -webkit-transition-delay: .5s;
          transition-delay: .5s;
}

.the-most {
  position: fixed;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 50vw;
  max-width: 200px;
  padding: 10px;
}
.the-most img {
  max-width: 100%;
}
</style>


</head>

<body translate="no" >
  <!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->

<div class="app">
  <header>
    <h1>HOT MOVIE</h1>
    <nav></nav>
    <div class="search"><svg><use xlink:href="#ico-search"></use></svg></div>
  </header>
  <h2>Most Popular Movies</h2>
  <section class="movies">
    <div class="movie">
      <img src="//repo.bfw.wiki/bfwrepo/image/5fc1ae951e91a.png" alt="" class="poster" />
      <div class="title">Room</div>
      <div class="info">
        <span class="length">117 min</span>
        <span class="year">2015</span>
      </div>
      <div class="desc">
        Jack is a young boy of 5 years old who has lived all his life in one room. He believes everything within it are the only real things in the world. But what will happen when his Ma suddenly tells him that there are other things outside of Room?
      </div>
    </div>
    <div class="movie">
      <img src="//repo.bfw.wiki/bfwrepo/image/5fc1aecf36d5a.png" alt="" class="poster" />
      <div .........完整代码请登录后点击上方下载按钮下载查看