<div class="wrapper">
<div class="main">
<div class="content">
<header>
<img src="https://space.shirofune.cn/static/images/article-default-cover.jpg" class="main-banner">
<h2 class="banner-title1">麻省理工学院</h2>
<h3 class="banner-title2">
<span class="banner-line"></span>
<span class="banner-text">一所大学</span>
<span class="banner-line"></span>
</h3>
</header>
<article>
<div class="row brief">
<h3 class="row-title">
学校简介<span class="bottom-line"></span>
</h3>
<p class="brief-text slide-tran slide-bottom">
牛津大学成立的确切日期尚不清楚，但该校的历史至少可以追溯到1096年。牛津大学位于伦敦西北约60英里处，该校大约45%的学生是研究生。一半以上的研究生把研究作为他们学习的一部分。牛津大学的研究在其所有四个学术部门进行：人文学科；数学、物理和生命科学；医学科学和社会科学。牛津大学的校历分为三个学期——米迦勒节(秋季)、希拉里节(春季)和三一节(夏季)——每个学期八周。大学的教学语言是英语。牛津大学包括一所中央大学，38所学院，还有六个永久性私人礼堂，它们的规模通常比大学还小，开设的科目更少。
</p>
<div class="brief-imgbox slide-tran slide-left">
<img src="https://space.shirofune.cn/static/images/article-default-cover.jpg" class="brief-img">
<div class="brief-imgbox-content">
<h4 class="imgbox-title">
品牌介绍<span class="bottom-line" style="background: #fff"></span>
</h4>
<p class="imgbox-text">
牛津大学的每个学院都有食堂，休息室和图书馆。本科新生保证提供住房，并且在以后的学习中也可以继续住在那里。研究生没有住房保障，但是有些学院可能会在第一年为他们提供住宿，尤其是国际学生。非欧盟国家学生的学费更高。该大学及其学术部门和学院以及数十个外部组织已经为研究生提供了900多份奖学金。
</p>
</div>
</div>
</div>
<div class="row advantage">
<h3 class="row-title">
学校专业<span class="bottom-line"></span>
</h3>
<ul class="advabox clearfix slide-tran slide-bottom">
<li class="adva-item">
<img src="">
<span>艺术与人文</span>
</li>
<li class="adva-item">
<img src="">
<span> 生物学与生物化学</span>
</li>
<li class="adva-item">
<img src="">
<span>临床医学</span>
</li>
</ul>
</div>
<div class="row product">
<div class="product-wrap">
<h3 class="row-title">
指标排名<span class="bottom-line"></span>
</h3>
<ul class="prodbox clearfix slide-tran slide-left">
<li class="prod-item">
<a class="prod-item-front" target="_blank">
<img src="" alt="">
<h5>总体得分</h5>
<p>87.6</p>
</a>
<div class="prod-item-back">
<img src="" alt="hanamaru">
</div>
</li>
<li class="prod-item">
<a class="prod-item-front" target="_blank">
<img src="" alt="" class="prod-item-data">
<h5>全球研究声誉</h5>
<p>#6</p>
</a>
<div class="prod-item-back">
<img src="https://bu.dusays.com/2021/08/30/0e0b536a59ce0.png" alt="hanamaru">
</div>
</li>
<li class="prod-item">
<a class="prod-item-front" href="" target="_blank">
<img src="" alt="">
<h5>区域研究声誉</h5>
<p>#3</p>
</a>
<div class="prod-item-back">
<img src="https://bu.dusays.com/2021/08/30/0e0b536a59ce0.png" alt="hanamaru">
</div>
</li>
</ul>
</div>
</div>
<div class="row">
<h3 class="row-title">
成功案例<span class="bottom-line"></span>
</h3>
<table class="table slide-tran slide-bottom">
<colgroup>
<col width="33.33%">
<col width="33.33%">
<col width="33.33%">
</colgroup>
<tbody>
<tr>
<th>
申请院校（英文）
</th>
<th>
申请院校（中文）
</th>
<th>
申上人数
</th>
</tr>
<tr>
<td>
University
</td>
<td>
大学名
</td>
<td>
123
</td>
</tr>
<tr>
<td>
University
</td>
<td>
大学名
</td>
<td>
123
</td>
</tr>
<tr>
<td>
University
</td>
<td>
大学名
</td>
<td>
123
</td>
</tr>
<tr>
<td>
University
</td>
<td>
大学名
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</div>
</article>
</div>
</div>
</div>.slide-tran{
transition: all .6s;
}
.slide-bottom{
transform: translateY(100px);
opacity: 0;
}
.slide-top-in{
opacity: 1;
transform: translateY(0);
}
.slide-left{
transform: translateX(-100px);
opacity: 0;
}
.slide-right-in{
opacity: 1;
transform: translateX(0);
}
// --------------------------------------------------------------
.row{
margin-left: 0;
margin-right: 0;
}
*{
box-sizing: border-box;
}
.clearfix {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.wrapper {
.main {
width: 1200px;
min-width: 1200px;
margin: 0 auto;
header{
position: relative;
height: 248px;
.main-banner{
width: 1920px;
position: absolute;
top: 0;
left: -960px;
margin-left: 600px;
z-index: 1;
height: 200px;
object-fit: cover;
}
.banner-title1{
text-align: center;
position: absolute;
top: 86px;
left: 0;
right: 0;
margin: 0 auto;
height: 45px;
font-size: 32px;
font-weight: 600;
color: #FFFFFF;
line-height: 45px;
text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.banner-title2{
position: absolute;
left: 0;
right: 0;
top: 137px;
font-size: 0;
text-align: center;
z-index: 2;
height: 25px;
line-height: 25px;
.banner-line{
display: inline-block;
width: 48px;
height: 2px;
background: #FFFFFF;
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
border-radius: 2px;
margin-bottom: 6px;
}
.banner-text{
height: 25px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #FFFFFF;
line-height: 25px;
text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
margin: 0 27px;
}
}
}
.row{
margin-top: 70px;
&:last-child{
margin-bottom: 30px;
}
.row-title{
font-size: 24px;
color: #333;
font-weight: 600;
line-height: 33px;
height: 33px;
position: relative;
text-align: center;
}
.bottom-line{
width: 40px;
height: 4px;
background-color: #2C6FF7;
border-radius: 2px;
position: absolute;
display: block;
margin: 0 auto;
top: 47px;
left: 0;
right: 0;
}
table{
margin: 48px auto 70px;
width: 100%;
tr{
td{
padding: 15px 0;
background: #fff;
font-size: 16px;
text-align: center;
border: 1px solid #ddd;
color: #333;
font-weight: 400;
}
th{
padding: 15px 0;
font-size: 18px;
text-align: center;
background: #2C6FF7;
color: #fff;
border: 1px solid #2C6FF7;
font-weight: 500;
}
th:first-of-type{
border-right: 1px solid #fff !important;
}
th:nth-of-type(2){
border-right: 1px solid #fff !important;
}
}
}
}
.brief{
.brief-text{
margin-top: 48px;
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 26px;
}
.brief-imgbox{
margin-top: 70px;
position: relative;
width: 100%;
.brief-img{
width: 100%;
height: 374px;
object-fit: cover;
}
.brief-imgbox-content{
width: 640px;
height: 100%;
background: rgba(0, 73, 196, 0.8);
position: absolute;
top: 0;
right: 0;
padding: 60px 60px 0;
.imgbox-title{
width: 96px;
height: 33px;
font-size: 24px;
font-weight: 600;
color: #FFFFFF;
line-height: 33px;
position: relative;
}
.imgbox-text{
width: 520px;
font-size: 16px;
font-weight: 400;
color: #FFFFFF;
line-height: 26px;
margin-top: 48px;
}
}
}
}
.advantage{
.advabox{
margin-top: 48px;
.adva-item{
width: 380px;
height: 174px;
background: #FFFFFF;
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
border-radius: 4px;
padding: 48px;
float: left;
margin-right: 30px;
img{
display: block;
width: 48px;
height: 48px;
display: block;
float: left;
margin-top: 6px;
margin-right: 18px;
}
span{
display: block;
width: 218px;
height: 78px;
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 26px;
float: left;
}
}
.adva-item:last-child{
margin-right: 0;
}
}
}
.product{
position: relative;
margin-top: 70px;
height: 439px;
.product-wrap{
width: 1920px;
position: absolute;
top: 0;
left: -960px;
margin-left: 600px;
z-index: 1;
background: #F5F6F8;
padding: 70px 0;
.prodbox{
width: 1200px;
margin: 48px auto 0;
.prod-item{
display: block;
float: left;
margin-right: 30px;
text-align: center;
position: relative;
transform-style: preserve-3d;
overflow: hidden;
.prod-item-front,
.prod-item-back{
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
width: 380px;
height: 218px;
padding: 48px 0;
border-radius: 4px;
background: #FFFFFF;
display: block;
transition: transform .5s;
position: absolute;
left: 0;
right: 0;
margin: auto;
background-color: #fff;
backface-visibility: hidden;
&.prod-item-front{
transform: rotateY(0);
}
&.prod-item-back{
background-color: #efefef;
position: relative;
transform: rotateY(-180deg);
img{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
}
}
&:hover{
.prod-item-front{
transform: rotateY(-180deg);
}
.prod-item-back{
transform: rotateY(-360deg);
}
}
img{
width: 48px;
}
.prod-item-data{
width: 36px;
}
h5{
height: 25px;
font-size: 18px;
font-weight: 500;
color: #333333;
line-height: 25px;
margin-top: 26px;
margin-bottom: 6px;
}
p{
height: 22px;
font-size: 16px;
font-weight: 400;
color: #666666;
line-height: 22px;
}
}
.prod-item:last-child{
margin-right: 0;
}
}
}
}
.qrcode-footer{
display: none;
}
}
}
class PageSlideIn {
constructor() {
this.initPage()
this.bindDocScroll()
}
// 页面加载后，视口内元素浮现
initPage() {
var that = this
var slideElements = document.querySelectorAll('.slide-tran')
slideElements.forEach((el) => {
if(el.classList.contains('slide-bottom')) {
that.isElementVisible(el, that.slideFromBottom)
} else if(el.classList.contains('slide-left')) {
that.isElementVisible(el, that.slideFromLeft)
}
});
}
// 页面滚动事件
bindDocScroll() {
var that = this
window.addEventListener('scroll', function() {
that.isElementVisible(document.querySelector('.brief-text'), that.slideFromBottom)
that.isElementVisible(document.querySelector('.brief-imgbox'), that.slideFromLeft)
that.isElementVisible(document.querySelector('.advabox'), that.slideFromBottom)
that.isElementVisible(document.querySelector('.prodbox'), that.slideFromLeft)
that.isElementVisible(document.querySelector('.table'), that.slideFromBottom)
})
}
// 检查元素是否在视口内
isElementVisible(el, animationFn) {
const rect = el.getBoundingClientRect()
const vWidth = window.innerWidth || document.documentElement.clientWidth
const vHeight = window.innerHeight || document.documentElement.clientHeight
if(rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) {
return false
} else {
animationFn(el)
}
}
// slideFromBottom动画
slideFromBottom(el) {
if(el.classList.contains('slide-top-in')) return
el.classList.remove('slide-bottom')
el.classList.add('slide-top-in')
}
slideFromLeft(el) {
if(el.classList.contains('slide-right-in')) return
el.classList.remove('slide-left')
el.classList.add('slide-right-in')
}
}
new PageSlideIn()
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.