为什么我的transition不生效哇
来源：2-8 过渡效果实战课（1）
情分的小前端
2020-12-07 21:06:25
# 具体遇到的问题
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
在这里输入代
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="Keywords" content="旅游，团购，舒服">
<meta name="Description" content="是最好的旅游机构，提供最好的服务，最巴适的环境">
<link rel="stylesheet" href="css/cssHomeWork.css">
<title>Trip</title>
</head>
<body>
<!-- 页头 -->
<header class="Header">
<div class="header-top">
<!-- logo -->
<div class="logo">
<h1><a href="">Career Builder</a></h1>
</div>
<!-- 功能区 -->
<div class="tool">
<ul>
<li><a href="">HOME</a></li>
<li><a href="">ABOUT</a></li>
<li><a href="">GALLERY</a></li>
<li><a href="">FACULTY</a></li>
<li><a href="">EVENTS</a></li>
<li><a href="">CONTACT</a></li>
</ul>
</div>
</div>
</header>
<!-- banner -->
<section class="banner">
<!-- 图片区 -->
<div class="Photo">
<img src="images/banner3.jpg" alt="" srcset="">
</div>
<!-- 遮罩层 -->
<div class="Shade">
</div>
<!-- 表单 -->
<div class="Form">
<form action="">
<input type="text" placeholder="your name">
<input type="text" placeholder="your Phone">
<input type="text" placeholder="your Email">
<!-- <input type="text" placeholder="Write Your Content Here"> -->
<textarea placeholder="Write Your Content Here"></textarea>
<!-- <input type="text" placeholder="SEND MESSAGE"> -->
<button value="SEND MESSAGE">SEND MESSAGE</button>
</form>
</div>
</section>
<!-- 网页主要内容 -->
<section>
<!-- about -->
<div class="about">
<!-- 标题,简单描述 -->
<div class="Tit-des">
<div class="Tit">
<h2>ABOUT</h2>
<span></span>
</div>
<div class="Des">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<!-- 详细描述detailed-->
<div class="Det-about">
<div class="lef-words">
<p>
<h2>A WORD</h2>
</p>
<p>
<h2>ABOUT US</h2>
</p>
</div>
<form class="lef-box-fom">
<p>Praesent dignissim viverry est,sed</p>
<p>bibendum ligula congue non.Sed</p>
<p>ac nisl et feils gravida commodo?</p>
<p>Suspendiss eget ullamcorper</p>
<p>ipsum.Suspendisse diam armet.</p>
<input type="button" value="EXPLORE"></input>
</form>
<div class="rit-number">
<div class="up">
<h2>70000</h2>
<span></span>
<p>Students</p>
</div>
<div class="down">
<h2>600</h2>
<span></span>
<p>Faculty</p>
</div>
</div>
<div class="centu">
<img src="images/b1.jpg">
</div>
</div>
</div>
<!--图文混排区 -->
<div class="Ph-tit">
<div class="Ph-tit-1">
<div class="Ph_1">
<!-- <img src="images/b1.jpg" alt="" srcset=""> -->
</div>
<form class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<!-- <input type="button" value="EXPLORE"> -->
<button>EXPLORE</button>
</form>
</div>
<div class="Ph-tit-1">
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="Ph_1">
<!-- 图片2 -->
</div>
</div>
<div class="Ph-tit-1">
<div class="Ph_1">
<!-- 图片3 -->
</div>
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
</div>
<div class="Ph-tit-1">
<div class="tit_1">
<h2>Library</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<button>EXPLORE</button>
</div>
<div class="Ph_1">
<!-- 图片4 -->
</div>
</div>
</div>
<!-- Gallery -->
<div class="Gallery">
<!-- 标题,简单描述 -->
<div class="Tite-dese">
<div class="Tite">
<h2>Gallery</h2>
<span></span>
</div>
<div class="Dese">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<p>industry.Lorem Ipsum has been the industry's standard dummy</p>
<p>text ever since the 1500s.</p>
</div>
</div>
<!-- 详细描述detailed-->
<div class="detailed">
<div class="Det-Gallery">
<ul>
<li><img src="images/03-01.jpg"><span>Science Lab</span></li>
<li><img src="images/03-02.jpg"><span>Indoor Stadium</span></li>
<li><img src="images/03-03.jpg"><span>Transportation</span></li>
<li><img src="images/03-04.jpg"><span>Kids Room</span></li>
<li><img src="images/03-05.jpg"><span>Meditation Classes</span></li>
<li><img src="images/03-06.jpg"><span>Kids Play Ground</span></li>
</ul>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="Footer">
<p>©2016 imooc.com 京ICP备13046642号</p>
</footer>
</body>
</html>
* {
margin: 0;
padding: 0;
}
a,
li {
list-style: none;
text-decoration: none;
}
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_457xrv6gssx.eot');
/* IE9*/
src: url('//at.alicdn.com/t/webfont_457xrv6gssx.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/webfont_457xrv6gssx.woff2') format('woff2'), url('//at.alicdn.com/t/webfont_457xrv6gssx.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/webfont_457xrv6gssx.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_457xrv6gssx.svg#AlibabaPuHuiTiH') format('svg');
/* iOS 4.1- */
}
@font-face {
font-family: 'webfont2';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_q2qy9a66aqr.eot');
/* IE9*/
src: url('//at.alicdn.com/t/webfont_q2qy9a66aqr.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/webfont_q2qy9a66aqr.woff2') format('woff2'), url('//at.alicdn.com/t/webfont_q2qy9a66aqr.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/webfont_q2qy9a66aqr.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_q2qy9a66aqr.svg#AlibabaPuHuiTiL') format('svg');
/* iOS 4.1- */
}
/* 头部开始 */
.Header {
height: 80px;
width: 100%;
background-color: #07cbc9;
}
.header-top {
margin: 0 auto;
height: 80px;
width: 1200px;
overflow: hidden;
background-color: #07cbc9;
}
.header-top .logo {
float: left;
height: 64px;
/* width: 600px; */
padding-top: 16px;
/* line-height: 80px; */
}
.header-top .logo a {
height: 48px;
color: #fff;
}
.header-top .logo h1 {
height: 48px;
line-height: 48px;
font-family: 'webfont';
font-weight: normal;
}
.header-top .tool {
padding-top: 16px;
float: right;
/* width: 600px; */
height: 64px;
}
.header-top .tool ul {
height: 48px;
}
.header-top .tool ul li {
/* height: 48px;
width: 83px; */
margin-right: 20px;
line-height: 48px;
display: inline-block;
font-family: 'Courier New', Courier, monospace;
font-size: 16px;
}
.header-top .tool ul li:last-child {
margin-right: 0;
}
.header-top .tool ul li a {
color: #fff;
/* display: block;
height: 48px;
width: 83px; */
}
/* banner开始 */
.banner {
position: relative;
height: 600px;
width: 100%;
}
.banner .Photo {
height: 600px;
}
.banner .Photo img {
height: 600px;
width: 100%;
}
.banner .Shade {
position: absolute;
height: 600px;
width: 100%;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, .4);
}
.Form {
position: absolute;
height: 410px;
width: 504px;
top: 50%;
left: 50%;
margin-top: -205px;
margin-left: -252px;
/* background-color: blue; */
}
.Form form {
height: 410px;
width: 504px;
}
.Form form input,
textarea,
button {
color: #808080;
border: 2px solid #808080;
height: 40px;
width: 500px;
margin: 0 auto;
display: block;
margin-bottom: 20px;
background: none;
outline: none;
}
.Form form textarea {
width: 500px;
height: 110px;
resize: none;
}
.Form form button {
text-align: center;
width: 200px;
height: 40px;
margin-bottom: 0;
cursor: pointer;
}
/* .Form form input:last-child {
text-align: center;
width: 200px;
height: 40px;
margin-bottom: 0;
} */
/* .Form form input:nth-last-child(2) {
width: 500px;
height: 110px;
} */
/*网页主要内容开始 */
.about {
width: 1201px;
margin: 0 auto;
}
.Tit-des {
width: 1200px;
text-align: center;
margin-top: 30px;
}
.Tit-des .Tit span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.Tit-des .Tit h2 {
font-size: 32px;
}
.Tit-des .Des p {
font-size: 14px;
color: #808080;
}
.Det-about {
width: 1201px;
height: 464px;
padding-top: 30px;
/* text-align: center; */
position: relative;
/* overflow: hidden; */
}
.Det-about .centu {
margin: 0 auto;
width: 650px;
height: 435px;
}
.Det-about .centu img {
width: 650px;
height: 435px;
/* margin: 0 auto; */
}
.Det-about .lef-words {
text-align: left;
display: inline;
float: left;
overflow: hidden;
}
.Det-about .lef-box-fom {
position: absolute;
text-align: left;
width: 300px;
/* height: 240px; */
top: 50%;
left: 0;
margin-top: -120px;
padding: 20px;
border: 1px solid gray;
background-color: rgba(255, 255, 255, .5);
}
.Det-about .lef-box-fom p {
font-size: 18px;
}
.Det-about .lef-box-fom input {
width: 140px;
height: 40px;
color: white;
font-size: 18px;
margin-top: 26px;
border: none;
background-color: rgb(0, 0, 0);
}
.Det-about .rit-number {
position: absolute;
right: 0px;
}
.Det-about .rit-number .up,
.down {
width: 260px;
text-align: center;
padding: 40px 0;
border: 1px solid #07cbc9;
}
.Det-about .rit-number .up,
.down h2 {
font-size: 28px;
}
.Det-about .rit-number .up {
margin-bottom: 20px;
}
/* .Det-about .rit-number .down h2 {
font-size: 28px;
} */
.Det-about .rit-number .up span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
.Det-about .rit-number .down span {
display: block;
width: 60px;
height: 3px;
background-color: #07cbc9;
margin: 10px auto;
}
/* 图文混排区开始 */
.Ph-tit {
width: 1560px;
overflow: hidden;
}
.Ph-tit .Ph-tit-1 {
height: 760px;
float: left;
width: 25%;
position: relative;
/* width: 380px; */
/* margin-right: 0; */
}
.Ph-tit .Ph-tit-1 .Ph_1 {
height: 380px;
width: 100%;
background: url(../images/b1.jpg) no-repeat;
/* background-size: 420px 420px; */
background-size: cover;
}
.Ph-tit .Ph-tit-1 .tit_1 {
height: 340px;
width: 350px;
background-color: #07cbc9;
padding: 20px;
}
.Ph-tit .Ph-tit-1 .tit_1 h2 {
margin-bottom: 30px;
color: white;
}
.Ph-tit .Ph-tit-1 .tit_1 p:nth-of-type(1) {
font-size: 16px;
margin-bottom: 20px;
color: white;
}
.Ph-tit .Ph-tit-1 .tit_1 p:nth-of-type(2) {
font-size: 14px;
color: gray;
margin-bottom: 30px;
}
/* .Ph-tit .Ph-tit-1 .tit_1 input {
width: 138px;
height: 40px;
background-color: black;
color: white;
border: none;
margin: 0 auto;
} */
.Ph-tit .Ph-tit-1 .tit_1 button {
width: 138px;
height: 40px;
background-color: black;
color: white;
border: none;
margin: 0 auto;
}
.Ph-tit .Ph-tit-1:nth-of-type(2n)::before {
content: '';
/* width: 200px;
height: 200px; */
border: 30px solid transparent;
border-right-color: #07cbc9;
position: absolute;
left: -60px;
top: 25%;
margin-top: -15px;
}
.Ph-tit .Ph-tit-1:nth-of-type(2n+1)::after {
content: '';
/* width: 200px;
height: 200px; */
border: 30px solid transparent;
border-left-color: #07cbc9;
position: absolute;
right: -60px;
bottom: 25%;
margin-bottom: -15px;
z-index: 999;
}
/* Gallery开始 */
.Gallery .Tite-dese {
width: 1200px;
padding-top: 30px;
text-align: center;
margin: 0 auto;
}
.Gallery .Tite-dese .Tite {
font-size: 32px;
}
.Gallery .Tite-dese .Tite span {
display: block;
width: 60px;
height: 3px;
margin: 10px auto;
background-color: #07cbc9;
}
.Gallery .Tite-dese .Dese {
font-size: 14px;
color: #808080;
}
.Gallery .detailed {
width: 100%;
}
.Gallery .detailed .Det-Gallery {
width: 1200px;
padding: 20px;
margin: 0 auto;
}
.Gallery .detailed .Det-Gallery ul {
overflow: hidden;
}
.Gallery .detailed .Det-Gallery ul li {
float: left;
width: 360px;
height: 240px;
margin-right: 40px;
position: relative;
}
.Gallery .detailed .Det-Gallery ul li:last-child {
margin-right: 0;
}
.Gallery .detailed .Det-Gallery ul li:nth-child(1),
li:nth-child(2),
li:nth-child(3) {
margin-bottom: 30px;
}
.Gallery .detailed .Det-Gallery ul li img {
width: 360px;
height: 240px;
}
.Gallery .detailed .Det-Gallery ul li span {
display: block;
font-family: 'webfont2';
position: absolute;
/* font-style: normal; */
padding-left: 30px;
height: 30px;
line-height: 30px;
width: 330px;
color: white;
left: 0;
bottom: 0;
background-color: black;
opacity: 0;
transition: opacity 1s linear 0;
}
.Gallery .detailed .Det-Gallery ul li:hover span {
opacity: 1;
}
码，可通过选择【代码语言】突出显示
1回答
-
好帮手慕夭夭
2020-12-08
同学你好，是因为动画延迟时间没有加单位，所以无效。即使时间是0，也要加单位秒。参考如下设置：
祝学习愉快~
0
相似问题