3d旋转的菜单选项
<!-- html -->
<ul>
<li>
<a href="javascript:;">
<span>选项一</span>
<span>option1</span>
</a>
</li>
<li>
<a href="javascript:;">
<span>选项二</span>
<span>option2</span>
</a>
</li>
<li>
<a href="javascript:;">
<span>选项三</span>
<span>option3</span>
</a>
</li>
</ul>
/* css */
li{
width: 200px;
height: 60px;
list-style: none;
float: left;
line-height: 60px;
text-align: center;
/* 透视景深 */
perspective: 150px;
}
li > a, li span{
display: block;
}
li > a{
height: 60px;
/* 3d样式 */
transform-style: preserve-3d;
transition: .5s;
transform-origin: center center -30px;
}
li a span{
/* 背面不可见 */
backface-visibility: hidden;
}
li a span:last-child{
background: pink;
/* 先把另一面隐藏好 */
transform: rotateX(-90deg);
transform-origin: top;
}
li > a:hover{
transform: rotateX(90deg);
}
效果图
导航栏滑块
html
<div class="nav">
<ul class="nav-list">
<li class="nav-item">首页</li>
<li class="nav-item">导航一</li>
<li class="nav-item">导航二</li>
<li class="nav-item">导航三</li>
<li class="nav-item">导航四</li>
<li class="slider"></li>
</ul>
</div>
css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav-list{
display: flex;
position: relative;
}
.nav-item{
width: 120px;
text-align: center;
line-height: 40px;
color: white;
cursor: pointer;
}
.slider{
width: 100px;
height: 40px;
background: #38afda;
border-radius: 6px;
position: absolute;
z-index: -1;
left: 10px;
bottom: 0;
transition: all 0.3s;
}
.nav-item:nth-child(1):hover ~ .slider{
left: 10px;
}
.nav-item:nth-child(2):hover ~ .slider{
left: 130px;
}
.nav-item:nth-child(3):hover ~ .slider{
left: 250px;
}
.nav-item:nth-child(4):hover ~ .slider{
left: 370px;
}
.nav-item:nth-child(5):hover ~ .slider{
left: 490px;
}
效果
汉堡按钮
html
<div class="burger">
<div class="top-line"></div>
<div class="middle-line"></div>
<div class="bottom-line"></div>
</div>
css
.burger{
width: 60px;
height: 50px;
border: 3px white solid;
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
cursor: pointer;
}
.burger > div{
width: 40px;
height: 3px;
background: white;
transition: all 0.3s;
}
.burger.active .top-line{
transform: rotate(45deg) translate(12px, 11px);
}
.burger.active .bottom-line{
transform: rotate(-45deg) translate(12px, -11px);
}
.burger.active .middle-line{
transform: translateX(-30px);
opacity: 0;
}
js
let burgerBtn = document.querySelector('.burger');
let flag = false;
burgerBtn.onclick = function(){
if(!flag){
this.classList.toggle('active');
flag = true;
}else{
this.classList.remove('active');
flag = false;
}
}
效果
进度条动画
html
<ul>
<li class="html5">HTML5</li>
<li class="css3">CSS3</li>
<li class="js">JavaScript</li>
<li class="vue">Vue</li>
<li class="react">React</li>
</ul>
css
ul, li{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 500px;
position: relative;
margin-bottom: 50px;
color: white;
}
li::before, li::after{
content: "";
display: block;
height: 20px;
background-color: #1f4a59;
border-radius: 10px;
position: absolute;
bottom: -28px;
}
li::before{
width: 100%;
}
li::after{
background-image: linear-gradient(90deg, #0fbcf9, #34e7e4);
/*动画时长*/
animation-duration: 1.2s;
/*动画模式,动画停止时停在最后*/
animation-fill-mode: forwards;
animation-timing-function: ease-in-out;
}
li.html5::after{
animation-name: html5;
}
li.css3::after{
animation-name: css3;
}
li.js::after{
animation-name: js;
}
li.vue::after{
animation-name: vue;
}
li.react::after{
animation-name: react;
}
@keyframes html5{
from {width: 0;}
to {width: 90%;}
}
@keyframes css3{
from {width: 0;}
to {width: 70%;}
}
@keyframes js{
from {width: 0;}
to {width: 80%;}
}
@keyframes vue{
from {width: 0;}
to {width: 90%;}
}
@keyframes react{
from {width: 0;}
to {width: 80%;}
}
效果
圆圈转动
html
<div id="wrap">
<div class="box-left">
<div class="circle-left"></div>
</div>
<div class="box-right">
<div class="circle-right"></div>
</div>
</div>
css
#wrap{
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
border-radius: 50%;
}
/*底部圆圈*/
#wrap::before{
content: "";
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
left: 0;
top: 0;
border: 10px solid rgba(255,255,255,0.5);
border-radius: 50%;
}
/*左右两个盒子里面各放着一个半圆圈,主要overflow*/
.box-left, .box-right{
width: 50%;
height: 100%;
box-sizing: border-box;
position: absolute;
top: 0;
overflow: hidden;
}
.box-left, .circle-left{
left: 0;
}
.box-right, .circle-right{
right: 0;
}
.circle-left, .circle-right{
width: 200%;
height: 100%;
box-sizing: border-box;
border: 10px blue solid;
border-radius: 50%;
position: absolute;
top: 0;
}
/*左边盒子里的圆圈初始时只显示右半边*/
.circle-left{
border-top-color: transparent;
border-left-color: transparent;
transform: rotate(-45deg);
animation: circleRotate 2s linear forwards 2s;
}
/*右边盒子里的圆圈初始时只显示左半边*/
.circle-right{
border-bottom-color: transparent;
border-right-color: transparent;
transform: rotate(-45deg);
animation: circleRotate 2s linear forwards;
}
@keyframes circleRotate{
from {transform: rotate(-45deg)}
to {transform: rotate(135deg)}
}
效果
body背景图固定,其他元素正常滚动
知识点:
- background-attachment: fixed; 固定背景图片。
- background-size在background复合样式中使用时必须要有background-position且用 / 分割(如:center/cover)
方法1
html
<body>
<div id="container">
<div class="gap"></div>
<div class="text"></div>
<div class="gap"></div>
<div class="text"></div>
<div class="gap"></div>
<div class="text"></div>
<div class="gap"></div>
<div class="text"></div>
<div class="gap"></div>
</div>
</body>
css
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
background: url("https://images.pexels.com/photos/1054289/pexels-photo-1054289.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260") no-repeat fixed center/cover;
/* background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover; */
}
.text{
width: 80%;
height: 300px;
background-color: white;
border: 1px red solid;
margin: 0 auto;
}
.gap{
width: 100vw;
height: 300px;
}
注意:background-attachment在移动端不太支持,这时可以用一个元素固定定位全屏达到同样效果。
body:before {
content: ' ';
position: fixed;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url(path/to/image) center 0 no-repeat;
background-size: cover;
}
方法2
html
<div class="article">内容...</div>
<div class="gap"></div>
<div class="article">内容...</div>
css
*{
margin: 0;
padding: 0;
}
html{
overflow: hidden;
}
body{
height: 100vh;
overflow-y: auto;
background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1579010052674&di=50846ec6e5d032cd5d0d4b6075da977c&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F8%2F54a212912e5dd.jpg") no-repeat;
background-size: cover;
}
.gap{
height: 500px;
}
.article{
color: white;
background: rgba(0, 0, 0, 0.7);
padding: 3em 1em;
text-indent: 2em;
text-align: justify;
line-height: 1.5em;
letter-spacing: 0.1em;
}
类似mac桌面导航菜单鼠标划过动画
html
<div class="wrapper">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>
<div class="box box7"></div>
<div class="box box8"></div>
</div>
css
.wrapper{
width: 900px;
height: 100px;
/*border: 3px white solid;*/
display: flex;
justify-content: space-between;
align-items: flex-end;
margin: 100px;
}
.box{
width: 100px;
height: 100px;
border-radius: 50%;
transition: all 0.3s ease-out;
}
.box1{
background-color: #880015;
}
.box2{
background-color: #ed1c24;
}
.box3{
background-color: #ff7f27;
}
.box4{
background-color: #fff200;
}
.box5{
background-color: #22b14c;
}
.box6{
background-color: #00a2e8;
}
.box7{
background-color: #3f48cc;
}
.box8{
background-color: #a349a4;
}
js
var aBox = document.querySelectorAll('.box');
aBox.forEach((el, index) => {
el.onmouseenter = function(){
// 当前元素变大到1.6倍
el.style.width = '160px';
el.style.height = '160px';
// 相邻两个元素变大到1.2倍
aBox[index+1] ? (aBox[index+1].style.width = '120px', aBox[index+1].style.height = '120px') : null;
aBox[index-1] ? (aBox[index-1].style.width = '120px', aBox[index-1].style.height = '120px') : null;
}
el.onmouseleave = function(){
aBox.forEach(el => {
// 元素恢复到原来大小
el.style.width = '100px';
el.style.height = '100px';
})
}
})
效果: