- sticky navbar
-
黏着导航
步骤：window.onscroll监听用户Y方向拖动导航，if 拖动距离大于1px，给他classList.add('sticky'),else classList.remove('sticky')，scrollY:Y轴方向。
//监听用户拖动Y轴方向
<script>
window.onscroll =function(){
if(window.scrollY > 0){
topnavbar.classList.add('sticky')
}else{
topnavbar.classList.remove('sticky')
}
}
</script>
×××××××××××××××××××××××××××××××××××
//sticky:css效果
.top-nav-bar.sticky{
background-color: white;
padding: 10px 0;
color: rgba(0,0,0,0.6);
z-index: 1;
box-shadow: 0 0 17px rgba(0,0,0,0.5)
}
-
hover:border滑动效果
步骤：hover之后可以用::after(content:''; , display: block;)添加一个假的div，绝对定位在a下方，生成width：0%-100%动画效果，hove之后添加动画名称，动画效果时间：animation: huadong 0.7s;。
//hover效果
.nav-bar .nav ul li a:hover::after{
content:'';
display: block;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #E6686A;
height: 3px;
animation: huadong 0.7s;
}
//生成动画
@keyframes huadong{
0%{
width: 0;
}
100%{
width: 100%;
}
}
-
auto hightlinght navbar
锚点导航变化
缓动函数速查表
tween.js库
tween.js库用法:首先引入tween.js库，由于tween.js库给的相对路径，搜索cdnjs，在cdn搜索Tween.js
在cdn搜索tween.js
cdn下的tween.js，可以直接引用的地址
-
auto scroll
锚点导航内容变化 - menu
-
下拉列表
步骤：分别在作品和博客的li标签添加下拉列表项ul>li，默认隐藏，由于浮动元素，我们需要li换行显示( white-space: nowrap;)，
1.auto hide aside
侧边栏自动隐藏
-
gapless slides
无缝轮播 -
loading animation
加载动画
- 居中：父相子绝定位，子4方向等于0，magin:auto;
- 创建一个动画：s动画名称，0%开始，100%结束，opacity透明度属性
@keyframes s{
0%{
width: 0px; height: 0px; opacity: 1;
}
100%{
width: 50px; height: 50px; opacity : 0;
}
}
- animation: s 2s infinite; --s 2s完成线性动画效果
- animation-delay: 0.5s; -- 动画延迟0.5s
优化前代码
//html
<body>
<div class="wrap">
<div class="yuan"></div>
<div class="yuan"></div>
</div>
</body>
****************************************************
//css
.wrap{
width:100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.yuan{
width: 0px;
height: 0px;
background-color: green;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: s 2s infinite;
}
.yuan:nth-child(2){
animation-delay: 0.5s
}
@keyframes s{
0%{
width: 0px; height: 0px; opacity: 1;
}
100%{
width: 50px; height: 50px; opacity : 0;
}
}
优化后代码
//html
<body>
<div class="loading"></div>
</body>
****************************************************
//css
.loading{
width:100px;
height: 100px;
border: 1px solid red;
position: relative;
}
.loading::before,.loading::after{
content: '';
width: 0px;
height: 0px;
background-color: green;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
animation: s 2s infinite;
}
.loading::after{
animation-delay: 0.5s
}
@keyframes s{
0%{
width: 0px; height: 0px; opacity: 1;
}
100%{
width: 50px; height: 50px; opacity : 0;
}
}
优化前
优化后
-
animate when scroll
滚到到内容内容显示动画效果
网友评论