五一假期小作业
JS 版星级评分
如图所示，在曾经曾用 CSS3 的方案实现过。现在用 JavaScript 重新实现。
演示地址：https://antmoe.gitee.io/project/2020/05/01/index.html
遇到的问题
- JavaScript 不能直接操纵伪类元素，因此只能用控制类的方式
- 没有搞明白三种状况
- 第一次点击
- 第二次点击是加星还是减星
- 判断循环判断循环（代码太烂）
- 部分过渡动画存在一定缺陷
- 嵌套过于多（代码太烂）
解决方案
由于五个五角星的实现依靠五个一模一样的
<i>标签，因此使用事件委托方式定义一个列表，用于存储当前页面中的所有星（
<i>标签）定义一个变量，用作用户是否第一次操作的标志。（即判断是否是第一次操作）
- 如果是第一次操作，那么直接循环添加类名即可
- 不是第一次操作，需要判断是否添加过类名
在用户第一次操作后，需要判断是加星还是减星
即判断当前点击的元素是否含有星
- 如有有星星，取消右边和当前点击的星
- 如果没有星，将左边所有未点亮的星和当前点击的星点亮
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>星星评级动态效果</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/4.5.6/css/ionicons.min.css"
/>
<style>
body {
background: #222;
}
.rating {
font-family: "Ionicons";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.rating i {
position: relative;
margin-right: 6px;
font-size: 5em;
color: gold;
cursor: pointer;
}
.rating i:hover::before {
content: "\f384";
opacity: 1;
transition: 0.5s;
transform: scale(1.2);
}
.active::before {
content: "\f384";
opacity: 1;
transition: 0.5s;
}
</style>
</head>
<body>
<div class="rating">
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
<i class="icon ion-md-star-outline"></i>
</div>
<script>
var rating = document.getElementsByClassName("rating")[0];
var icon = document.getElementsByClassName("icon");
var iconList = [];
for (var i = 0; i < icon.length; i++) {
iconList.push(icon[i]);
}
// 没有点过
var flag = true;
document.addEventListener("click", function (event) {
var target = event.target;
if (target.nodeName === "I") {
var num = iconList.indexOf(target);
if (flag) {
for (var j = 0; j <= num; j++) {
icon[j].className += " active";
}
flag = false;
} else {
// 判断加还是取消
if (icon[num].className.indexOf(" active") === -1) {
// 没有找到,则添加
for (var m = num; m >= 0; m--) {
if (icon[m].className.indexOf(" active") === -1) {
icon[m].className += " active";
}
}
} else {
// 否则,进行删星星
for (var i = num; i <= icon.length; i++) {
icon[i].className = icon[i].className.replace(" active", "");
}
}
}
}
});
</script>
</body>
</html>下载按钮动态效果
基于上次进行修改为 JavaScript 版很简单。只需要将 focus 触发的效果赋值于一个新的类。并未按钮绑定事件即可。
演示地址：https://antmoe.gitee.io/project/2020/05/02/index.html
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>下载按钮动态效果</title>
<style>
@keyframes circle {
0%,
15%,
45%,
75% {
transform: translate(-50%, -50%) scale(0.8);
}
30%,
60%,
90% {
transform: translate(-50%, -50%) scale(1.2);
}
100% {
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes dot {
8% {
transform: scale(0);
}
16% {
transform: scale(1) rotate(30deg) translateX(48px);
}
95% {
transform: scale(1) rotate(1000deg) translateX(48px);
}
100% {
transform: scale(0.125) rotate(1050deg) translate(52px);
}
}
body {
background-color: #000;
}
.button {
display: block;
width: 160px;
height: 41px;
background: transparent;
border-radius: 10px;
color: white;
border: none;
outline: none;
cursor: pointer;
margin: 100px auto;
position: relative;
}
.button::after,
.button::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transform-origin: 50% 50%;
}
.button::before {
width: 100%;
height: 100%;
background-color: #6d58ff;
border-radius: 10px;
transition: all 0.5s;
}
.button::after {
content: "";
width: 16px;
height: 16px;
background: #fff;
z-index: 2;
border-radius: 50%;
transform: scale(0);
/* 设置外部白色圆圈的圆心位置 */
transform-origin: 0 0;
}
.button span {
position: relative;
z-index: 1;
}
.button svg {
width: 15px;
height: 13px;
display: block;
position: absolute;
left: 50%;
top: 50%;
stroke: #fff;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
transform: translate(-50%, -50%);
stroke-dasharray: 17px;
stroke-dashoffset: 17px;
transition: stroke-dashoffset 0.3s ease;
transition-delay: 3s;
}
.button:focus svg {
stroke-dashoffset: 34px;
}
.transport::before {
width: 41px;
height: 41px;
border-radius: 50%;
animation: circle 3s linear forwards;
}
.transport::after {
animation: dot 3s linear forwards;
}
.button:focus span {
display: none;
}
</style>
</head>
<body>
<button class="button">
<span>下载</span>
<svg view-Box="0 0 15 13">
<polyline points="2 6.5 6 10.5 13 2.5"></polyline>
</svg>
</button>
<script>
// 获取按钮
var buttonElement = document.getElementsByClassName("button")[0];
// 获取文本
var aElement = document.getElementsByTagName("span")[0];
// 绑定事件
buttonElement.addEventListener("click", function () {
if (buttonElement.className.indexOf(" transport") === -1) {
buttonElement.className += " transport";
aElement.style.display = "none";
} else {
buttonElement.className = "button";
aElement.style.display = "block";
}
});
</script>
</body>
</html>百叶窗效果轮播图
https://antmoe.gitee.io/project/2020/05/03/index.html
基于上次进行修改为 JavaScript 版很简单。但需要注意的问题是：
图片是用四张小图拼成的，因此控制的是四张小图
其余内容基本与上一版轮播图一致。
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>小米轮播图示例--百叶窗效果</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.container {
width: 1226px;
height: 460px;
background: lightcyan;
margin: 100px auto;
position: relative;
}
.container .imgList {
width: 100%;
position: relative;
}
/* 图片容器 */
.container .imgList .img {
height: 100%;
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
/* 四个小部分 */
.container .imgList .img .frag {
float: left;
height: 460px;
width: 25%;
background-size: 1226px 460px;
opacity: 0;
z-index: 0;
transform-origin: center right;
filter: saturate(0) blur(10px) brightness(0.6) contrast(4);
transition: transform 0.6s, opacity 0.6s, filter 0.6s ease-out;
}
/* 每一个容器里的小部分显示的图片 */
.container .imgList .img:nth-child(1) .frag {
background-image: url(https://ae01.alicdn.com/kf/U1a6b653720d845c682f97d2fcf75c22f6.png);
}
.container .imgList .img:nth-child(2) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6bd4174b8c5aad67a64864a5716ad152.jpg);
}
.container .imgList .img:nth-child(3) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e909ef0e50960f61a730380013bc960a.jpg);
}
.container .imgList .img:nth-child(4) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/755aca9487082e7698e16f17cfb70839.jpg);
}
.container .imgList .img:nth-child(5) .frag {
background-image: url(https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e5b37cdb85b3b93b5938cc508a10c906.jpg);
}
/* 分割每一小部分需要显示的区域(位置) */
.container .imgList .img .frag:nth-child(2) {
background-position: -306.5px 0;
transition-delay: 0.2s;
}
.container .imgList .img .frag:nth-child(3) {
background-position: -613px 0;
transition-delay: 0.3s;
}
.container .imgList .img .frag:nth-child(4) {
background-position: -919.5px 0;
transition-delay: 0.4s;
}
.container .imgList .img .frag:nth-child(5) {
background-position: -1226px 0;
transition-delay: 0.5s;
}
.container .slide-controls {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.container .slide-controls .slide-left,
.container .slide-controls .slide-right {
width: 41px;
height: 69px;
position: absolute;
top: 50%;
transform: translateY(-50%);
background-image: url(https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png);
cursor: pointer;
z-index: 2;
}
.container .slide-controls .slide-left {
left: 0;
background-position: -84px 0;
}
.container .slide-controls .slide-left:hover {
background-position: 0 0;
}
.container .slide-controls .slide-right {
right: 0;
background-position: -124px 0;
}
.container .slide-controls .slide-right:hover {
background-position: -42px 0;
}
/* 导航 */
.container .nav {
width: 100px;
height: 20px;
position: absolute;
left: 50%;
right: 0;
bottom: 8px;
transform: translateX(-50%);
z-index: 2;
}
.container .nav .slide-nav {
width: 12px;
height: 12px;
border: 2px solid #fff;
border-color: hsla(0, 0%, 100%, 0.3);
border-radius: 10px;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
margin: 0 4px;
float: left;
z-index: 3;
}
.container .nav .slide-nav:hover {
background: hsla(0, 0%, 100%, 0.4);
border-color: rgba(0, 0, 0, 0.4);
}
</style>
<script
type="text/javascript"
nonce="4db1ec836d6049f58177b1533ea"
src="//local.adguard.org?ts=1588483546206&type=content-script&dmn=antmoe.gitee.io&css=1&js=1&gcss=1&rel=1&rji=1&stealth=1&uag="
></script>
<script
type="text/javascript"
nonce="4db1ec836d6049f58177b1533ea"
src="//local.adguard.org?ts=1588483546206&name=AdGuard%20Popup%20Blocker&name=AdGuard%20Assistant&name=AdGuard%20Extra&type=user-script"
></script>
</head>
<body>
<!-- 视觉容器 -->
<div class="container">
<!-- 左右切换菜单 -->
<div class="slide-controls">
<div class="slide-left"></div>
<div class="slide-right"></div>
</div>
<!-- 图片列表 -->
<div class="imgList">
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
<div class="img">
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
<div class="frag"></div>
</div>
</div>
<!-- 轮播图的导航 -->
<div class="nav">
<div class="slide-nav"></div>
<div class="slide-nav"></div>
<div class="slide-nav"></div>
<div class="slide-nav"></div>
<div class="slide-nav"></div>
</div>
</div>
<script>
// 图片列表容器
var imgList = document.getElementsByClassName("imgList")[0];
// 图片列表
var imgs = imgList.getElementsByClassName("img");
// 底部导航栏
var slideElements = document.getElementsByClassName("slide-nav");
var slideRight = document.getElementsByClassName("slide-right")[0];
var slideLeft = document.getElementsByClassName("slide-left")[0];
// 导航条
var navElement = document.getElementsByClassName("nav")[0];
// 用于存放nav
var arr = [];
for (var i = 0; i < slideElements.length; i++) {
arr.push(slideElements[i]);
}
var num = 0;
// 控制图片显示及消失
function show(num) {
var drag = imgs[num].getElementsByClassName("frag");
for (var i = 0; i < drag.length; i++) {
drag[i].style.opacity = 1;
drag[i].style.zIndex = 1;
drag[i].style.filter =
"saturate(1) blur(0px) brightness(1) contrast(1)";
drag[i].style.transition =
"rotateY(90deg) translateZ(180deg) scale(1.5)";
}
slideElements[num].style.backgroundColor = "hsla(0, 0%, 100%, .4)";
slideElements[num].style.borderColor = "rgba(0, 0, 0, .4)";
}
function hidden() {
var drag = document.getElementsByClassName("frag");
for (var i = 0; i < drag.length; i++) {
drag[i].style.opacity = 0;
drag[i].style.zIndex = 0;
drag[i].style.transform = null;
drag[i].style.filter = null;
}
for (var m = 0; m < slideElements.length; m++) {
slideElements[m].style.backgroundColor = null;
slideElements[m].style.borderColor = null;
}
}
// 初始初始化页面
show(0);
// 向右切换按钮的动态效果
slideRight.addEventListener("click", function () {
num++;
console.log(num, num === imgs.length);
hidden();
if (num === imgs.length) {
num = 0;
console.log(num);
show(num);
} else {
show(num);
}
});
// 向左切换按钮的动态效果
slideLeft.addEventListener("click", function () {
hidden();
if (num <= 0) {
num = imgs.length - 1;
show(num);
} else {
show(num - 1);
num--;
}
});
// 导航器的动态效果
navElement.addEventListener("click", function (event) {
var target = event.target;
num = arr.indexOf(target);
console.log(num);
if (target.className === "slide-nav") {
hidden();
show(num);
}
});
</script>
</body>
</html>模仿快手官网
https://antmoe.gitee.io/project/2020/05/04/index.html
相对来说 ， 快手官网还是较为简单的。大概可以分为四个部分
头部
包含左侧 logo 和右侧导航条
需要注意的是导航条是二级目录。
中间
一行字，一张图，两个按钮
底部
也就是版权声明
背景
实现思路
头部
头部需要注意的只是二级导航。其实现很简单。html 结构使用父子级（子级 display 为 none）。当悬停到父级时，将子级显示即可。
主区域部分
常规操作即可。
底部
常规操作
背景
使用视频背景简单的做法就是写入一个新的 div，div 内部放一个
video标签。<div class="video-wrap"> <video id="video" class="video" loop="" muted="" autoplay=""> <source src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4" type="video/mp4" /> 抱歉，您的浏览器不支持内嵌视频 </video> </div>将其进行绝对定位，也就是固定在整个页面。
.video-wrap .video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>模仿快手官网小demo</title>
<style>
body {
background-color: #000;
overflow: hidden;
color: white;
}
li,
ol,
ul {
list-style: none;
padding: 0;
}
a {
background-color: rgba(0, 0, 0, 0);
text-decoration: none;
color: white;
}
@font-face {
font-family: "iconfont";
src: url("iconfont.eot?t=1588408129484");
/* IE9 */
src: url("iconfont.eot?t=1588408129484#iefix") format("embedded-opentype"),
/* IE6-IE8 */
url("data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMIAAsAAAAABrQAAAK6AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCfgqBIIEcATYCJAMMCwgABCAFhG0HOxvfBRHVk1dkf4Q4xnYIzQxJ6dLPWNbsF8rRCZXgfHF7If9lWxgy06CkoBVIAAAAAIAgwjG9T1JEt6m2Q8lkp6ZQEcopJOHRzhMrliiBJLnCBhw0hDwNgDdAgEz8AOiJHZ4qfQfYyiwXslphAw54ogkzW1Yf7P2fs6qRURGmKGfRjm0xaTn/pRngnRMkjLu7PH2KJmjZFty1sTBaoF59Ai7jihawmas7nT9VuY3wM2TP57mc3gQ6O5ofKKc1cYxt9fwwwDigAMdatIVLKOOG6eULGsjNEMBJqmxSU2csiEH3EkB6u/oSzCUwGFa2I1hrJloL5Viwqzk1VsLvy+cSFBaNHtjQrhvYyy/b2uRnk0+QBAFOtwAayAYGpLG20AAI4zTOQohhX60EXkr+v/BdyF55BfLX2Uo3AOnQpu7I4OzcmgFOQQGgAbDmS+kgB7HhgwUJh9s/C3uj6dlymvhaJt1jBwsZj+acvxvLqn3XRfz3GXiN3sxnzjiyKOxTpPR77t+KNNA/z9APR43mY86kmWathNY5Gzpow3nLvwr0q00VAgh0r444xP3AAHD/mgNt/9KA/SRBgR8WsE2LWZh0XhsA6ZwehjThHj0V4MQJJHUk6Hm8M9I7B4I9ZxoRspHCobETIw2bDQsucmDFTjmcZKmf7iJkGBDjADJNAQh+W1B4OYDG75I07BMsRH3Dij/gpFFY0EUitpwkGCtmkNygTLkj69ZJVL3F/NTEkjWFwhGlL9PgO16xvMIOZY4h/TkPVAlIuIUl2A6bhsEIV5iqU6iaqetS3Y2clFtrQoKxYgbJDcqUO/Lr66T0+S3mpyaWFlWueUTpy+bBd7we5Mre9VLdyzX9OQ9UCUi4hSVoh03DYOrbVZiqU4zImalralFfu7O+s/2+DYATvYIWJVoM9MdnO+NLN4jiJ2NZAAA=")
format("woff2"), url("iconfont.woff?t=1588408129484") format("woff"),
url("iconfont.ttf?t=1588408129484") format("truetype"),
/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url("iconfont.svg?t=1588408129484#iconfont") format("svg");
/* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-nav-down:before {
content: "\e6b9";
}
.icon-nav-up:before {
content: "\e6ba";
}
.video-wrap .video {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.header {
position: relative;
z-index: 2;
padding: 29px 5.875% 29px 7.625%;
}
.header .logo {
float: left;
width: 7.6875%;
height: 3.3125%;
cursor: pointer;
}
.header .logo img {
width: 100%;
}
.header .list,
.header .volumn {
float: right;
}
.header .list {
padding: 0px 100px 0;
}
.header .list .item:first-child {
margin-left: 0;
}
.header .list .item {
position: relative;
display: inline-block;
margin-left: 50px;
}
.header .list .item .nav {
position: relative;
display: inline-block;
height: 20px;
overflow: visible;
padding-bottom: 6px;
color: #fff;
font-size: 14px;
line-height: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
transition: border-color 0.3s ease-in;
}
.header .list .down-item {
position: absolute;
display: none;
width: 120px;
left: 0;
top: 26px;
border-radius: 2px 2px 6px 6px;
background-color: hsla(0, 0%, 100%, 0.3);
}
.header .list .item .nav {
font-size: 16px;
line-height: 22px;
}
.header .list .sub-menu .icon-nav {
display: inline-block;
}
.header .list .sub-menu .icon-nav::before {
content: "\e6b9";
}
.header .list .item .iconfont {
position: relative;
left: -1px;
color: #fff;
font-size: 12px;
}
.header .sub-menu:hover .down-item {
display: block;
}
.header .sub-menu:hover .icon-nav::before {
content: "\e6ba";
}
.header .list .down-item li {
line-height: 50px;
text-align: center;
}
.header .list .down-item li a {
color: white;
transition: all 0.5s;
}
.header .list .down-item li:first-child {
padding-top: 10px;
}
.header .list .down-item li:last-child {
padding-bottom: 10px;
}
.header .list .down-item li:hover > a {
color: #ff5000;
text-shadow: none;
}
/* 主区域部分 */
.main {
position: absolute;
left: 7.625%;
top: 36.333%;
}
.main .kwai-slogan {
margin-bottom: 18px;
font-weight: 500;
font-size: 50px;
color: #fff;
text-align: left;
line-height: 72px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.main .qr-code {
width: 137px;
width: 8.5625vw;
margin: 0 2.1875vw 0 0;
text-align: center;
}
.main .btn-wrap,
.main .qr-code {
display: inline-block;
vertical-align: top;
}
.main .qr-code .image {
width: 100%;
height: 140px;
height: 8.75vw;
margin-bottom: 3px;
border-radius: 6px;
}
.main .qr-code .text {
font-size: 12px;
line-height: 17px;
color: #d8d8d8;
}
.main .btn-wrap .btn {
display: block;
width: 190px;
height: 58px;
width: 11.875vw;
height: 3.625vw;
background: none no-repeat 50% / contain;
border-radius: 30px;
cursor: pointer;
-webkit-transition: background-image 0.3s;
-o-transition: background-image 0.3s;
transition: background-image 0.3s;
color: #fff;
font-size: 28px;
line-height: 58px;
}
.main .btn-wrap .ios {
background-image: url(https://static.yximgs.com/udata/pkg/fe/ios_normal.png);
margin-bottom: 28px;
}
.main .btn-wrap .android {
background-image: url(https://static.yximgs.com/udata/pkg/fe/android_normal.png);
}
/* 页脚 */
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 87px;
padding: 0 0 23px;
text-align: center;
}
.footer .com-footer {
margin: 0 auto;
text-align: center;
}
.footer .com-footer .list a {
margin-right: 30px;
color: white;
}
</style>
</head>
<body>
<div class="video-wrap">
<video id="video" class="video" loop="" muted="" autoplay="">
<source
src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_video.c8e339ab.mp4"
type="video/mp4"
/>
抱歉，您的浏览器不支持内嵌视频
</video>
</div>
<div class="header">
<a href="#" class="logo"
><img
src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_home_logo.png"
alt="快手"
/>
</a>
<ul class="list">
<li class="item">
<a href="/" class="nav checked" title="首页">首页</a>
</li>
<li class="item sub-menu">
<a
href="https://live.kuaishou.com"
class="nav "
title="快手直播"
target="_blank"
>快手直播</a
>
<i class="iconfont icon-nav"></i>
<ul class="down-item">
<li>
<a href="https://live.kuaishou.com" target="_blank">快手直播</a>
</li>
<li>
<a href="https://live.kuaishou.com/live-partner" target="_blank"
>直播伴侣</a
>
</li>
</ul>
</li>
<li class="item sub-menu">
<a href="javascript:void(0);" class="nav " title="系列产品"
>系列产品</a
>
<i class="iconfont icon-nav"></i>
<ul class="down-item">
<li><a href="/kuaiying">快影</a></li>
<li>
<a href="http://www.acfun.cn/" target="_blank" rel="nofollow"
>AcFun</a
>
</li>
<li>
<a href="https://1tian.kuaishou.com/?f=www" target="_blank"
>一甜相机</a
>
</li>
</ul>
</li>
<li class="item">
<a
href="https://music.kuaishou.com"
class="nav "
title="音乐人"
target="_blank"
>音乐人</a
>
</li>
<li class="item sub-menu">
<a href="javascript:void(0);" class="nav " title="创作者服务"
>创作者服务</a
>
<i class="iconfont icon-nav"></i>
<ul class="down-item">
<li><a href="/verify/" target="_blank">用户认证</a></li>
<li>
<a
href="https://cp.kuaishou.com/article/publish/video?origin=www.kuaishou.com"
target="_blank"
>上传视频</a
>
</li>
<li>
<a href="https://cp.kuaishou.com/" target="_blank"
>创作者服务平台</a
>
</li>
</ul>
</li>
<li class="item">
<a
href="https://pay.ssl.kuaishou.com/pay"
class="nav "
title="快币充值"
>快币充值</a
>
</li>
<li class="item sub-menu">
<a href="/about/contact" class="nav " title="联系我们">联系我们</a>
<i class="iconfont icon-nav"></i>
<ul class="down-item">
<li>
<a href="https://e.kuaishou.com/" target="_blank" rel="nofollow"
>商务合作</a
>
</li>
<li><a href="/about/contact">联系我们</a></li>
<li><a href="/about/">关于我们</a></li>
<li>
<a href="https://www.kwaishop.com/" target="_blank" rel="nofollow"
>快手电商</a
>
</li>
<li>
<a href="https://mcn.kuaishou.com/" target="_blank" rel="nofollow"
>机构入驻</a
>
</li>
<li>
<a
href="https://zhaopin.kuaishou.com/"
target="_blank"
rel="nofollow"
>加入我们</a
>
</li>
<li><a href="/help/report">违规举报</a></li>
</ul>
</li>
<li class="item sub-menu">
<a href="javascript:void(0);" class="nav " title="社会责任"
>社会责任</a
>
<i class="iconfont icon-nav"></i>
<ul class="down-item">
<li><a href="/csr/" target="_blank">快手行动</a></li>
<li><a href="/committee/">专家委员会</a></li>
</ul>
</li>
</ul>
</div>
<div class="main">
<h1 class="kwai-slogan">快手，<br />记录世界 记录你</h1>
<div class="qr-code">
<img
src="https://ali.static.yximgs.com/udata/pkg/fe/kwai_qrcode.png"
alt="二维码"
class="image"
/>
<span class="text">扫码下载 快手</span>
</div>
<div class="btn-wrap">
<a
href="https://apps.apple.com/cn/app/快手/id440948110"
class="btn ios"
></a>
<a
href="https://m.kuaishou.com/download/kwai?platform=android&f=www_home"
class="btn android"
></a>
</div>
</div>
<div class="footer">
<div class="com-footer">
<div class="list">
<a href="//www.kuaishou.com/about/" class="item" title="关于快手"
>关于快手</a
>
<a
href="//www.kuaishou.com/help/feedback"
class="item"
title="快手帮助中心"
>帮助中心</a
>
<a
href="https://zhaopin.kuaishou.com/"
target="_blank"
class="item"
title="快手招聘"
>加入我们</a
>
<a
href="//www.kuaishou.com/about/contact"
class="item"
title="联系快手"
>联系我们</a
>
<a href="//www.kuaishou.com/about/policy" target="_blank" class="item"
>法律声明</a
>
</div>
<p class="info">
<span>www.kuaishou.com <span id="this-year">2020</span></span>
<span>@ All rights Reserved</span>
<span>京网文（2017）2551-280号</span>
<span>京ICP备07035647号-4</span>
<a
target="_blank"
rel="nofollow"
href="https://zzlz.gsxt.gov.cn/businessCheck/verifKey.do?showType=p&serial=11000020190617100242000003563691-SAIC_SHOW_10002020190621144025721&signData=MEQCIP0/+UH+ntaa/CsUaIa29DiFE/5haWZtEr21SBp7ZH3FAiAaZbzsn7SkDMMICyfCAsZly9BxiPl94sRConkJ4tEgzw=="
><span class="license-icon"></span>
</a>
<a
class="police-link"
target="_blank"
rel="nofollow"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020421"
>京公网安备 11010802020421号</a
>
</p>
</div>
</div>
</body>
</html> 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小康博客！
wechat- alipay
评论
TwikooDisqusjs
