CSS和JS部分知识点的运用(小A一轮)
目录
首页
首页大标题蓝色边框动画的实现
- 关于运动元素的设置
- 设置四个小点于同一位置
- 为防止小点受其他的影响，应用绝对定位
/* 4个点的样式 */
.bule-hoop1 {
position: absolute;
width: 5px;
height: 5px;
bottom: 160px;
right: -10px;
background-color: #0f9cf5;
animation: blue1 4s 1s infinite linear;
}
- 关于动画效果
- 运动从点到线又到点，在一个矩形中应分为8个时期
- 0~12.5%：向左宽度增加以变成线
- 12.5%~25%：向右往左缩减宽度并变成左下角的点
- 25~37.5%：向上增加高度变成线
- 37.5~50%:从下往上减小高度变成左上角的点
- 后面也是这个规律
- 根据一个点运动一圈为4s，给后面每个点都延迟1s，制作良好的效果
- 运动从点到线又到点，在一个矩形中应分为8个时期
@keyframes blue1 {
from {
bottom: 160px;
}
12.5% {
right: -10px;
bottom: 160px;
width: 640px;
height: 5px;
}
25% {
/* 变成点定在左下教 */
right: 630px;
width: 5px;
height: 5px;
}
37.5% {
right: 630px;
bottom: 160px;
width: 5px;
height: 90px;
}
50% {
right: 630px;
bottom: 245px;
width: 5px;
height: 5px;
}
62.5% {
bottom: 245px;
right: -10px;
width: 640px;
height: 5px;
}
75% {
right: -10px;
bottom: 245px;
width: 5px;
height: 5px;
}
87.5% {
bottom: 160px;
width: 5px;
height: 90px;
}
100% {
bottom: 160px;
right: -10px;
}
}
头部导航条黄色块的实现
- 通过给每个选项设置伪元素来实现
- 脱离文档流防止影响布局，通过visibility来隐藏
/* 通过伪元素设置选项中的黄色下底线 */
.top-bar a::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
content: "";
width: 38px;
height: 6px;
background-color: #ffd155;
visibility: hidden;
}
/* 设置点击顶部选项时的效果 */
.top-bar a:hover::after {
visibility: visible;
}
.top-bar a:hover li {
color: #0f9cf5;
font-weight: bold;
}
第三个英文标题透明字体的实现
- 通过-webkit-text-stroke 来镂空字体并加自定义颜色的边框
li.banner-font3 {
margin-bottom: 20px;
margin-left: 15px;
z-index: 2;
font-size: 40px;
font-family: "Franklin Gothic Medium";
-webkit-text-stroke: 1px black;
/* 镂空字体 */
color: white;
}
通过伪元素修饰各个标题
- ::after 和 ::before设置absolute脱离文档流，不占据位置，然后来实现效果
右侧导航条
右侧导航栏的样式实现
- 设置导航栏的位置容器为固定定位，并居中
- 为了防止缩放页面导致看不见或不位于期望的位置
- 采取tranlateX的方式来实现水平位置的确定
.nav-wrapper {
position: fixed;
left: 0;
right: 0;
margin: auto;
transform: translateX(836%);
top: 250px;
width: 80px;
height: 400px;
z-index: 999;
}
- 设置弹性盒来装元素
- 通过通过空白区的布局属性来调整各个选项之间的位置
.navbox {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: flex-start;
width: 61px;
height: 440px;
}
右侧导航栏展开内容的动画实现
- 每个选项后加一个div来存文字内容
- 动画的实现是通过从0拉长宽度来实现的
- 设置选中的选项取消透明来突出效果
.nav-content {
text-align: center;
height: 50px;
width: 0px;
margin-left: -30px;
background-color: #0f9cf5;
color: white;
line-height: 50px;
border-radius: 0px 50px 50px 0px;
font-size: 16px;
transition: 0.4s;
opacity: 0;
}
.navbox li:hover .nav-content {
width: 140px;
opacity: 1;
}
右侧导航栏图标字体的引用
- 引入了font-awesome的图标字体库
- 通过设置i标签，在zeal中查询类名来实现
右侧导航栏自动滚轮动画的js实现
- 用标签名获取元素
- 因为这里不太复杂，所以一个事件绑定一个处理程序
- 所以这里用了ele.onclick = function(){ }，没有用obj.addEventListener(type,fn,false)
- 里面存放了一个定时器
- 用于设置点击选项之后自动滚动
var li = document.getElementsByClassName("navli");
var u = parseInt(window.pageYOffset);
li[6].onclick = function(){
var time6 = setInterval(function(){
scrollBy(0,50);
u++;
if(parseInt(window.pageYOffset) > 7800) {
clearInterval(time6);
}
},1)
}
轮播图
轮播图的弹性容器设置
- 思想：设置recycle-box一个容纳所有要轮播的组，六个组的话设置七组的长度，因为第七组图要与第一组相同实现不断轮播
- 对于每组之间的间隔，七组有六个间隔，如果想设置每两组之间100px的间隔
- 满足以下公式recycle-box的宽度=每个轮播组的宽度*7 + 100px * 6，然后利用justify-content来实现弹性盒中空白的分配
.recycle-box {
width: 9000px;
position: relative;
display: flex;
justify-content: space-between;
}
轮播图无限自动轮播的js实现
- 设置定时器，让recycle-box的margin-x从"0"到 “-(每个轮播组的宽度1200+间隔100)*6px”
- 设置变量i来实现数值上的递增，当i为7801时，再重新设置margin-x为“0”
var timer1 = setInterval(function () {
loop1.style.marginLeft = -i + "px";
i += 1;
if(i>1 && i< 1200){
act1(0);}
if(i > 1200 && i<2500){
act1(1);}
if(i > 2500 && i<3800){
act1(2);}
if(i > 3800 && i<5100){
act1(3);}
if(i > 5100 && i<6400){
act1(4);}
if(i > 6400 && i<7700){
act1(5);}
// 很不情愿的写法，因为用swtich对某个点的话，会有随机性
if (i == 7801) {
// clearInterval(1);
loop1.style.marginLeft = "0";
i = 1;
}
注意：中间的act1函数是实现轮播点和轮播图组同步的效果
轮播点随着轮播图切换的js实现
- 通过以有样式的class组名的来设置轮播点效果，用for来遍历每个点
- 这里的"actived"是一个class名，样式是被点亮，q是每个点都有的(样式是未点亮)
var act1 = function (s){
for (var n = 0; n < 6; n++) {
q[n].className = "q";
}
q[s].className = "q actived";
}
轮播点点击时的被选中的js实现
- 给每个轮播点设置click事件类型
- 用for遍历，通过立即执行函数实现给每个点绑定方法
for (var j = 0; j < 6; j++) {
(function (k) {
q[k].onclick = function () {
loop1.style.transition = "1s";
//增加切换时的过渡效果
loop1.style.marginLeft = -1300 * k + "px";
//切换到该点对应的组图
clearInterval(timer1);
act1(k);
};
})(j);
}
圈圈动画效果的实现
- 弹性容器的尺寸变换与动画结合
- 下面时“关于我们”栏的圈圈动画的代码
div.pointer-wrapper {
position: absolute;
right: 0;
bottom: 0px;
display: flex;
flex-direction: column-reverse;
justify-content: space-around;
width: 30px;
height: 80px;
font-size: 20px;
animation: longer1 2s infinite alternate;
}
@keyframes longer1 {
from {
height: 80px;
}
to {
height: 500px;
}
}
- 当鼠标移入矩形时，轮播图悬浮的效果
- 设置视距，结合transform:translateZ来实现悬浮的视距效果
div.pride-wrapper {
position: relative;
margin-top: 40px;
height: 900px;
background-image: url(../img/teamHonorbg.png);
background-repeat: no-repeat;
background-size: cover;
perspective: 50px;
/* 视距的设置 */
}
/* 团队荣誉的外部容器，含背景 */
.pride-box:hover li {
border: #f0f0f0 2px solid;
box-shadow: 5px 5px 30px #737373;
transform: translateZ(1px);
}
/* 设置鼠标在矩形内选项卡会浮动 */
公用样式中的设置
- 对于设计稿中的1200px，在每一个栏目都设置一个大容器，宽度是整个页面的100%，里面放的是装内容的容器，利用这样来实现水平居中，在它的class类名中增加w即可
.w {
/* 给容器设置相对定位，方便子元素在容器内进行布局，不影响其他的容器 */
position: relative;
/* 设置容器居中 */
margin: 0 auto;
/* 设计稿中提到的安全距离 */
width: 1200px;
}
- 未防止高度塌陷的问题，同样是设置一个公用样式，需要只需要添加类名即可
.clearfix::before,
.clearfix::after {
content: "";
display: table;
clear: both;
}
关于固定定位与粘滞定位与视距的一个问题
- 在制作右侧导航栏的时候考虑到了这两种定位
- 总结:设置了粘滞定位的元素，是不脱离文档流的，比如我在body下面加一个div，设置了粘滞定位，给它设置了宽高，则后面的所有内容都会因为这个div的高度下移
- 解决办法：用一个大容器装下面的所有内容，增加一个margin-top = -div的高度
- 另外，粘滞定位的兼容性一般
- 当设置了固定定位，元素确实脱离了文档流，但是一开始并没有生效（即滚动滚动条元素并没有相对视口固定）
- 原因是给html设置视距
html{
prespective : 100px;
}
- 解决方法
- 对于需要用到视距的元素，在它的父元素设置即可，这样就不会影响到其他元素设置固定定位功能失效的效果