Base case
01- Carousel Figure progress bar
Training Description
After completion of the mouse you can
Training Tips
- Add a background image, set the style initialization
- Using a cassette, the cassette positioning location, provided the width and height li
- Setting a small span height, provided with the pseudo-element span span the same size, alignment and bottom left, width default is 0
- When the mouse over to the pseudo element widths
Steps
Creating index file, the new css folder, the file is created and initialized base.css code base, the new images folder
Save index.css to create a folder css, html files introduced css styles Home
Write the code structure
Create a parent box, set up nesting boxes
<div class="progress"> <ul> <li> <span></span> </li> <li> <span></span> </li> </ul> </div>Set the default style
html, body { height: 100%; } body { background: url(../images/vivo-banner-z3ys-bg.jpg) no-repeat center top; background-size: cover; /*覆盖*/ position: relative; } .progress { position: absolute; display: block; width: 100%; height: auto; bottom: 40px; text-align: center; } .progress li { position: relative; display: inline-block; width: 40px; height: 20px; margin: 0 4px; text-align: center; z-index: 3; cursor: pointer; } .progress li span { position: absolute; width: 40px; height: 2px; left: 50%; margin-left: -20px; bottom: 0; background-color: rgba(0, 0, 0, .2); -webkit-transition: all .3s .1s ease-out; transition: all .3s .1s ease-out; }Set pseudo-element style and rollover style
.progress li span::after { content: ""; position: absolute; width: 0; height: 100%; left: 0; bottom: 0; background-color: #666; -webkit-transition: all .3s .1s ease-out; transition: all .3s .1s ease-out; } .progress li:hover span { height: 5px; } .progress li:hover span::after { width: 100%; -webkit-transition: width 5s ease; transition: width 5s ease; }
02- hot news continuous scrolling text
Training Description
This approach is generally called a seamless scrolling, usually need two content, scrolling can not stop
Training Tips
First the basic layout, content copy, arranged in one row
- Statement animation, so after the first box out, be right back, and the rate of movement is constant rate
The introduction of animation, repeat
Steps
1, create a basic structure
<div class="container">
<div class="gonggao">
<div class="gg-pic"></div>
<div class="gg-text">
<div class="gg-info">
<p>从前有座山，山里有座庙，庙里有个页面找呀找不到 </p>
<p>从前有座山，山里有座庙，庙里有个页面找呀找不到 </p>
</div>
</div>
</div>
</div>2, the basic layout styles
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.container {
max-width: 640px;
height: 100%;
margin: 0 auto;
background-color: #f8f8f8;
}
.gonggao {
padding-top: 80px;
}
.gg-pic {
float: left;
width: 100px;
height: 40px;
background-color: sandybrown;
}
.gg-text {
margin-left: 100px;
height: 40px;
line-height: 40px;
font-size: 16px;
font-family: 'Microsoft Yahei';
overflow: hidden;
}
.gg-info {
width: 200%;
position: relative;
animation: gonggao 4s linear infinite;
}
.gg-info p {
position: absolute;
top: 0;
width: 50%;
}
.gg-info p:first-child {
left: 0;
}
.gg-info p:last-child {
left: 50%;
}
@keyframes gonggao {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}Extended Case
03- defense "Thunder" Home rotate a picture
Training Description
1, the bottom line of the navigation, there is a transition to an intermediate open to both sides at the time of rollover
2, rotating around the first picture screen picture
Training Tips
- To complete navigation, the navigation through the fixedly positioned at the top, as well as mouse after the big box background color
- Setting basic image, rotate pictures after adding other
Steps
1, the basic structure of the new navigation
<header>
<div class="header-inner clearfix">
<h1 class="xl-logo">
<img src="images/xl-logo2x.png" alt="">
</h1>
<ul class="xl-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">区块链</a></li>
<li><a href="#">广告服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">投资者关系</a></li>
</ul>
</div>
</header>2, create a CSS style navigation
header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
-webkit-transition: .3s ease;
transition: .3s ease;
}
header:hover {
background-color: rgba(0,0,0,.8);
}
.header-inner {
max-width: 1200px;
margin: 0 auto;
}
.xl-logo {
float: left;
margin-top: 14px;
width: 78px;
height: 37px;
}
.xl-logo img {
width: 100%;
height: 100%;
}
.xl-nav {
text-align: right;
white-space: nowrap;
}
.xl-nav li {
position: relative;
display: inline-block;
margin-left: 2.5%;
}
.xl-nav li a {
display: inline-block;
font-size: 14px;
color: #fff;
padding: 0 10px;
line-height: 64px;
}
.xl-nav li a::after {
opacity: 0;
position: absolute;
content: "";
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 2px;
-webkit-transform: scaleX(0);
-ms-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all .4s ease;
transition: all .4s ease;
background-color: #fff;
}
.xl-nav li a:hover::after {
opacity: 1;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}
.xl-nav li.active a::after {
opacity: 1;
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
}3, create the basic structure of the first screenshots
<div class="container">
<div class="home-inner">
<div class="home-inner-c">
<div class="home-inner-pro">
<div class="earth-box">
<i class="banner-earth"></i>
</div>
<div class="banner-line">
<i class="circle01"></i>
<i class="circle02"></i>
</div>
</div>
</div>
</div>
</div>4, the first screen style statement and picture position
<header>
<div class="header-inner clearfix">
<h1 class="xl-logo">
<img src="images/xl-logo2x.png" alt="">
</h1>
<ul class="xl-nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">区块链</a></li>
<li><a href="#">广告服务</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">投资者关系</a></li>
</ul>
</div>
</header>5, the first screen to create a picture of the base style
.home-inner {
position: relative;
width: 100%;
height: 1080px;
overflow: hidden;
margin-bottom: -152px;
background-color: #080325;
zoom: 0.6;
/*缩小当前的盒子*/
}
.home-inner-c {
position: relative;
top: 50%;
left: 50%;
margin: -540px 0 0 -960px;
width: 1920px;
height: 1080px;
background-image: url(../images/banner_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
.banner-earth {
position: absolute;
top: 82px;
left: 0;
right: 0;
display: block;
margin: auto;
background: url(../images/earth01.png) no-repeat;
width: 730px;
height: 730px;
}
.banner-line {
position: absolute;
top: 70px;
left: 0;
right: 0;
width: 750px;
height: 750px;
margin: auto;
}
/*
A>B 表示选择A元素的所有子B元素（只选择第一代）
A B 表示选择A元素的所有子B元素（选择在A标签里面所有的B元素，不止第一代）
A+B表示HTML中紧随A的B元素：用一个结合符只能选择两个相邻兄弟中的第二个元素
*/
.banner-line > i {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
margin: auto;
}6, create two rotating box styles and animations
.circle01 {
background-image: url(../images/spr_bannerPathway.png);
background-position: -2436px 0px;
background-repeat: no-repeat;
width: 719px;
height: 719px;
-webkit-animation: ani_line 30s linear infinite;
animation: ani_line 30s linear infinite;
}
.circle02 {
background-image: url(../images/spr_bannerPathway.png);
background-position: -2436px -724px;
background-repeat: no-repeat;
width: 648px;
height: 674px;
animation: ani_line 3s steps(180) infinite reverse;
}
@keyframes ani_line {
0% {
-webkit-transform: none;
transform: none;
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}