效果图
PC端 (移动端不能访问)
部分代码
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>孤客</title>
<!--页面核心样式-->
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--页面核心JS-->
<script type="text/javascript" src="js/uaredirect.js"></script>
<script type="text/javascript">browserRedirect("/m");</script>
<script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
</head>
<body>
<div class="container slideTxtBox">
<div class="header flex flex-pack-justify flex-align-center">
<div class="user-info flex flex-align-center">
<div class="portrait"><img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" ></div>
<div class="name PangMenZhengDao">孤客NOTES Blog</div><!--左上角 Logo+站名-->
</div>
<div class="link te_c p_r hd">
<ul class="flex flex-align-center">
<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">关于我</a></li>
<li class="p_r"><a href="javascript:void(0);" class="transition OPPOSans-R di_bl">朋友们</a></li>
</ul>
<div class="move-bg"></div><!--右上方 部件-->
</div>
</div>
<!--页面内容-->
<div class="bd">
<!--左侧小部件-MacBook Air-->
<div class="content p_r">
<div class="en_box flex flex-align-center flex-pack-center">
<div class="macbook">
<div class="inner">
<div class="screen">
<div class="face-one">
<div class="camera"></div>
<div class="display">
<div class="shade"></div>
</div>
</div>
<img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" class="logo">
</div>
<div class="body">
<div class="face-one">
<div class="touchpad">
</div>
<div class="keyboard">
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key space"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
<div class="key f"></div>
</div>
</div>
<div class="pad one"></div>
<div class="pad two"></div>
<div class="pad three"></div>
<div class="pad four"></div>
</div>
</div>
<div class="shadow"></div>
</div>
</div>
<!--居中内容-->
<div class="r_content">
<div class="con p_r flex">
<!--你的名字-->
<div class="name flex flex-align-center flex-pack-center OPPOSans-M p_r" id="one_part">
孤客
<div class="tips te_c OPPOSans-B transition"><span class="p_r c1">455px</span></div>
</div>
<!--小部件-GIF-->
<div class="flex flex-align-center flex-pack-center iphone"><img src="images/icon_APP.gif"></div>
<div class="flex flex-align-center flex-pack-center web"><img src="images/icon_WEB.gif"></div>
<div class="flex flex-align-center flex-pack-center vr"><img src="images/icon_VR.gif"></div>
</div>
<!--个人定位-->
<div class="p_r flex con1">
<div class="txt_box p_r">
<div class="txt_con p_r flex">
<div class="ui flex flex-align-center flex-pack-center p_r OPPOSans-M flex-1" id="two_part">
前端爱好者
<div class="tips transition te_c OPPOSans-B transition flex flex-align-center flex-pack-center">
<span class="p_r">127px</span>
</div>
</div>
<!--小部件-音乐-->
<div class="wx flex flex-align-center flex-pack-center p_r" id="three_part">
<audio src="https://m8.music.126.net/20211103183235/79c21ea30480cb2566d5bd8709ef4fc5/ymusic/3b1d/91a2/887d/e4830ab3e11f0421964838effd3c6bfd.mp3" controls="controls" preload id="music1" hidden>
</audio>
<span class="holder" id="bf" onclick="bf();">Music</span>
<div class="tips te_c OPPOSans-B transition">
<span class="p_r c2">70px</span>
</div>
</div>
</div>
<!--个人简介-->
<div class="text OPPOSans-M p_r transition" id="four_part">
<span class="p_r di_in">2024年,秋 我终究还是没能改掉这个毛病</span>
</div>
</div>
<!--个人头像-->
<div class="pic flex flex-align-center flex-pack-center " id="five_part">
<img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" >
</div>
<!--触发器-->
<div class="focus p_r OPPOSans-M">
<div class="txt" style="display: block;" id="default">
position: <span class="c1">absolute</span>;<br>
width: <span class="c2">0px</span>;<br>
height: <span class="c2">0px</span>;<br>
left: <span class="c2">0px</span>;<br>
top: <span class="c2">0px</span>;<br>
font-family: <span class="c1">OPPOSans</span>;<br>
font-style: <span class="c1">normal</span>;<br>
font-weight: <span class="c2">0</span>;<br>
font-size: <span class="c2">0px</span>;<br>
line-height: <span class="c2">0px</span>;
</div>
<div class="txt" id="one">
position: <span class="c1">absolute</span>;<br>
width: <span class="c2">357px</span>;<br>
height: <span class="c2">157px</span>;<br>
left: <span class="c2">336px</span>;<br>
top: <span class="c2">101px</span>;<br>
font-family: <span class="c1">OPPOSans</span>;<br>
font-style: <span class="c2">normal</span>;<br>
font-weight: <span class="c2">500</span>;<br>
font-size: <span class="c2">119px</span>;<br>
line-height: <span class="c2">157px</span>
</div>
<div class="txt" id="two">
position: <span class="c1">absolute</span>;<br>
width: <span class="c2">194px</span>;<br>
height: <span class="c2">63px</span>;<br>
left: <span class="c2">336px</span>;<br>
top: <span class="c2">312px</span>;<br>
font-family: <span class="c1">OPPOSans</span>;<br>
font-style: <span class="c1">normal</span>;<br>
font-weight: <span class="c2">500</span>;<br>
font-size: <span class="c2">48px</span>;<br>
line-height: <span class="c2">63px</span>;
</div>
<div class="txt" id="three">
position: <span class="c1">absolute</span>;<br>
width: <span class="c2">78px</span>;<br>
height: <span class="c2">58px</span>;<br>
left: <span class="c2">621px</span>;<br>
top: <span class="c2">315px</span>;<br>
Wechat: <span class="c1">Joreking8</span>;
</div>
<div class="txt" id="four">
position: <span class="c1">absolute</span>;<br>
width: <span class="c2">375px</span>;<br>
height: <span class="c2">75px</span>;<br>
left: <span class="c2">336px</span>;<br>
top: <span class="c2">439px</span>;<br>
font-family: <span class="c1">OPPOSans</span>;<br>
font-style: <span class="c2">normal</span>;<br>
font-weight: <span class="c2">500</span>;<br>
font-size: <span class="c2">16px</span>;<br>
line-height: <span class="c2">149.1%</span>;
</div>
<!--头像触发器-->
<div class="txt" id="five">
<br>
孑然一身~
<br>
<br>
╭∞━━━╮.oO◎
<br>
┃ ┃
<br>
┃● ●┃
<br>
┃﹋ ε ﹋ ┃
<br>
○━━━━╯
</div>
</div>
<!--右侧内容-->
<div class="works p_r OPPOSans-M">
<div class="txt">
具备Windows、Linux开关机操作,翻墙学习日外语言能力、白嫖熟练度100%,有较强的前端剽窃经验。
</div>
<div class="lock transition p_r">
<input type="text" id="code" value="" placeholder="请输入提取码" class="OPPOSans-M"/>
<div class="error" id="code_error">提取码错误</div>
</div>
<div class="submit" id="btn">
<a href="javascript:void(0);" class="di_bl te_c my">秘密入口:119</a>
<a href="http://www.baidu.com" id="down" class="di_bl te_c down">前往</a>
</div>
</div>
</div>
<!--下方内容-->
<div class="p_r tool_content flex flex-align-center">
<div class="sns flex ">
<div class="flex-center">
<!--小部件-微信-->
<i class="fa fa-weixin fa-siz icon-3d wx p_r transition">
<div class="erwma transition"><img src="images/vx.png"></div>
</i>
<!--小部件-邮箱-->
<a href="javascript:void(0);" class="di_bl copy" data-clipboard-action="copy" data-clipboard-target="#foo" id="mail">
<i class="fa fa-envelope-o fa-siz icon-3d mail p_r">
<div class="copytxt te_c OPPOSans-M transition" id="copyed">已复制</div>
<input id="foo" type="text" value="Zboy@qq.com">
</i></a>
<!--小部件-其他-->
<a href="" target="_blank"><i class="fa fa-github fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-qq fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-telegram fa-siz icon-3d"></i></a>
<a href="" target="_blank"><i class="fa fa-weibo fa-siz icon-3d"></i></a>
</div>
</div>
<div class="text OPPOSans-M">然后知生于忧患而死于安乐<br>
<p>Then know born in sorrow died in peace and happiness</p>
</div>
</div>
</div>
</div>
<!--翻页内容-->
<div class="warp" id="content">
<div class="txt OPPOSans-R">兴趣使然做的一些小东西</div>
<ul class="flex flex-warp">
<li class="transition">
<div class="icon">
<a href="http://www.baidu.com" target="_blank"><img src="https://pic.rmb.bdstatic.com/bjh/240417/de28c7642c0f00188b630295c39a5bf29218.jpeg" ></a>
</div>
<h3 class="OPPOSans-M ellipsis"><a href="http://www.baidu.com" target="_blank">Zboy</a></h3>
<p class="OPPOSans-M ellipsis">前端爱好者的个人主页</p>
</li>
</ul>
<style>
</style>
<canvas id="background"></canvas>
</div>
</div>
</div>
<script src="js/jquery.SuperSlide.2.1.1.js"></script>
<script>jQuery(".slideTxtBox").slide({});</script>
<!-- 滑动效果 -->
<script src="js/jquery.movebg.js"></script>
<script>
$(function(){
$(".link").movebg({width:125/*滑块的大小*/,extra:40/*额外反弹的距离*/,speed:300/*滑块移动的速度*/,rebound_speed:400/*滑块反弹的速度*/});
})
</script>
<link rel="stylesheet" type="text/css" href="css/font.css"/>
<script src="js/clipboard.min.js"></script>
<script>//复制
var clipboard = new Clipboard('.copy');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
$('#mail').click(function(){
$('#copyed').css('opacity',1)
setTimeout(function(){
$('#copyed').css('opacity',0)
},2000)
})
$('#one_part,#two_part,#three_part,#four_part,#five_part').hover(function(){
var that = $(this)
var target = that.attr('id').replace('_part','')
$('.focus .txt').hide()
$('#'+target).show()
},function(){
$('.focus .txt').hide()
$('#default').show()
})
$('#code').focus(function(){
$('#code').attr('placeholder','请输入提取码')
$('#code_error').hide()
})
$('#down').click(function(){
var that = $(this)
var code = $('#code').val();
if(code != '123'){ //提取码
$('#code').attr('placeholder','').val('')
$('#code_error').show()
return false;
}
that.attr('href','http://www.baidu.com')//提取码成功跳转地址
that.attr('target','_blank')
})
</script>
<!-- 下载 -->
<script>
const btn = document.querySelector("#btn");
const item = document.querySelectorAll(".lock");
let showCard = (event) => {
btn.classList.toggle("is-rotate");
for (var i = 0; i < item.length; i++) {
item[i].classList.toggle(`on`);
}
}
btn.addEventListener("click", showCard);
</script>
<!--音乐-->
<script>
function rbf(){
var audio = document.getElementById('music1');
audio.currentTime = 0;
}
function bf(){
var audio = document.getElementById('music1');
if(audio!==null){
alert(audio.paused);
if(audio.paused) {
audio.play('播放');
}else{
audio.pause('暂停');
}
}
}
</script>
<script>
try {
if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
} else {
var canvas = document.querySelector('canvas'),
ctx = canvas.getContext('2d')
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineWidth = .3;
ctx.strokeStyle = (new Color(150)).style;
var mousePosition = {
x: 30 * canvas.width / 100,
y: 30 * canvas.height / 100
};
var dots = {
nb: 250,
distance: 100,
d_radius: 150,
array: []
};
function colorValue(min) {
return Math.floor(Math.random() * 255 + min);
}
function createColorStyle(r, g, b) {
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
function mixComponents(comp1, weight1, comp2, weight2) {
return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
}
function averageColorStyles(dot1, dot2) {
var color1 = dot1.color,
color2 = dot2.color;
var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
}
function Color(min) {
min = min || 0;
this.r = colorValue(min);
this.g = colorValue(min);
this.b = colorValue(min);
this.style = createColorStyle(this.r, this.g, this.b);
}
function Dot() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = -.5 + Math.random();
this.vy = -.5 + Math.random();
this.radius = Math.random() * 2;
this.color = new Color();
console.log(this);
}
Dot.prototype = {
draw: function() {
ctx.beginPath();
ctx.fillStyle = this.color.style;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
}
};
function createDots() {
for (i = 0; i < dots.nb; i++) {
dots.array.push(new Dot());
}
}
function moveDots() {
for (i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
if (dot.y < 0 || dot.y > canvas.height) {
dot.vx = dot.vx;
dot.vy = -dot.vy;
} else if (dot.x < 0 || dot.x > canvas.width) {
dot.vx = -dot.vx;
dot.vy = dot.vy;
}
dot.x += dot.vx;
dot.y += dot.vy;
}
}
function connectDots() {
for (i = 0; i < dots.nb; i++) {
for (j = 0; j < dots.nb; j++) {
i_dot = dots.array[i];
j_dot = dots.array[j];
if ((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > -dots.distance && (i_dot.y - j_dot.y) > -dots.distance) {
if ((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > -dots.d_radius && (i_dot.y - mousePosition.y) > -dots.d_radius) {
ctx.beginPath();
ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
ctx.moveTo(i_dot.x, i_dot.y);
ctx.lineTo(j_dot.x, j_dot.y);
ctx.stroke();
ctx.closePath();
}
}
}
}
}
function drawDots() {
for (i = 0; i < dots.nb; i++) {
var dot = dots.array[i];
dot.draw();
}
}
function animateDots() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
moveDots();
//connectDots();
drawDots();
requestAnimationFrame(animateDots);
}
createDots();
requestAnimationFrame(animateDots);
}
} catch (e) {}
</script>
</body>
</html>
style.css
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
ul,ol,dl,table,th,tr,td,input,textarea,li,a,div,span,em,i{margin: 0;padding: 0; border: 0;}
img {margin: 0;padding: 0; border: 0;}
li {list-style: none;}
/*全局样式*/
html,body {width: 100%; margin: 0 auto;}
/*= 清除浮动=*/
.clear {clear: both;height: 0px;line-height: 0px;font-size: 0px;overflow: hidden;display: block;}
.clearfix:after {content: "";display: block;height: 0px;clear: both;visibility: hidden;font-size: 0px;}
:focus{outline:0}
a, button, input[type="button"], input[type="submit"], input[type="reset"]{cursor:pointer}
/* Hides from IE-mac \*/
* html .clearfix {height: 0%;}
/* End hide from IE-mac */
* + html .clearfix {min-height: 0%;}
/* 针对IE7 */
* + html .clearfix {min-height: 0%;}
.w100 {width: 100%;}
.fl {float: left;}
.fr {float: right;}
/*原文件配置*/
body {color: #FFF;background: #161616 ;font: 16px/30px 'Microsoft YaHei', arial, sans-serif;cursor: url('../images/icon_mouse.svg'), auto;}
a {color: #000;text-decoration: none;}
a:hover {color: #e69f0b;cursor:url('../images/icon_mouse2.svg'), auto;}
a {color: #000;text-decoration: none;}
a:hover {color: #e69f0b;}
/*块级转化*/
.di_in {display: inline-block;}
.di_bl {display: block;}
/*原文件配置 end*/
/*纵向居中*/
.v_middle {vertical-align: middle;}
/*横向居中*/
.te_c {text-align: center;}
/*相对定位*/
.p_r {position: relative;}
/* 白色背景 */
.bgfff {background: #fff;}
.flex {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.flex-v {-webkit-box-orient: vertical;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.flex-1 {-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
.flex-align-center {-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.flex-pack-center {-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;}
.flex-pack-justify {-webkit-box-pack: justify;-webkit-justify-content: pace-between;-ms-flex-pack: justify;justify-content: space-between;}
.flex-warp{flex-flow: wrap}
.flex-column{flex-flow: column}
.ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.transition{-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.img_hover{transition: all .3s;}
.img_hover:hover{transform: scale(1.05,1.05);}
/*全局样式 start*/
.container{width: 100%;height: 100vh;color: #FFF;}
.header{padding: 45px 140px;border-bottom: 1px #262626 dashed;}
.header .user-info .portrait{width: 45px;height: 45px;border: 2px #FFF solid;overflow: hidden;border-radius: 50%;margin-right: 15px;}
.header .user-info .portrait img{width: 100%;}
.header .user-info .name{text-transform: uppercase;font-size: 26px;}
.header .link{height: 44px;line-height: 44px;font-size: 21px;}
.header .link li {width: 125px;border-radius: 22px;z-index: 2;}
.header .link li a{color: #C2C2C2;width: 100%;}
.header .link li.cur{}
.header .link li.cur a{color: #000;}
.header .link a.cur{background-color: #FFF;color: #000;}
.move-bg{position: absolute;background-color: #FFF;color: #000;left: 0;width: 125px;border-radius: 22px;height: 44px;display: none;top: 0;z-index: 1;}
/*全局样式 end*/
.warp{padding: 45px 140px;}
.warp .txt{font-size: 20px;line-height: 1.5;margin-top: 45px;}
.warp ul{margin-top: 20px;padding-bottom: 50px;}
.warp li{border-radius: 10px;background: #202020;border: 1px solid #28292a;width: calc(20% - 2%);height: 180px;margin-right: 2%;margin-top: 40px;padding:30px 40px;overflow: hidden;}
.warp li .icon{width: 54px;height: 54px;border: 1px solid #28292a;}
.warp li .icon img{width: 54px;height: 54px;border-radius: 5px;}
.warp li h3{margin-bottom: 0;font-weight: normal;font-size: 20px;color: #FFF;line-height: 1.5;margin-top: 10px;;}
.warp li h3 a{color: #FFF;}
.warp li p{margin: 0;font-size: 14px;color: #7a7a7b;}
.warp li:hover{margin-top: 10px;}
.c1{color: #30C78C;}
.c2{color: #ED8949;}
.content{padding: 45px 140px;height: calc(100vh - 136px);color: #FFF;}
.content .en_box{position: absolute;left: 0;top: 0;height: 100%;border-right: 1px #262626 dashed;width: 22%;}
.content .en{font-size: 112px;line-height: 1;text-transform: uppercase;transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);margin-bottom: 10vh;}
.content .en span{color: #5D24E4;margin:0 15px;}
.content .r_content{position: absolute;right: 0;top: 0;height: 100%;width: 78%;}
.content .r_content .con{height: 26vh;}
.content .r_content .con::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .name{font-size: 158px;width: 30vw;}
.content .r_content .name .tips{font-size: 19px;position: absolute;left: 4px;right: 4px;bottom: -5px;z-index: 1;opacity: 0;}
.content .r_content .name:hover .tips{opacity: 1;bottom: 5px;}
.content .r_content .name .tips::after{content: '';position: absolute;left: 0;height: 70%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips::before{content: '';position: absolute;right: 0;height: 70%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips span::after{content: '';position: absolute;left: -12.4vw;height: 1px;width: 10.2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .name .tips span::before{content: '';position: absolute;right: -12.4vw;height: 1px;width: 10.2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .iphone{border-left: 1px #262626 dashed;width: 15vw;}
.content .r_content .iphone img{max-width: 90%;}
.content .r_content .web{border-left: 1px #262626 dashed;width: 15.1vw;}
.content .r_content .web img{max-width: 90%;}
.content .r_content .vr{border-left: 1px #262626 dashed;width: 17vw;}
.content .r_content .vr img{max-width: 90%;}
.content .r_content .con1{height: 35vh;}
.content .r_content .con1::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .con1 .txt_box{width: 30vw;}
.content .r_content .con1 .txt_box::after{content: '';position: absolute;right: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .txt_box .txt_con{width: 100%;height: 16.5vh;}
.content .r_content .con1 .txt_box .txt_con::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .con1 .pic{width: 15vw;overflow: hidden;}
.content .r_content .con1 .pic img{height: 100%;width: 100%;}
.content .r_content .con1 .ui{font-size: 64px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .ui .tips{color: #5D24E4;font-size: 18px;position: absolute;right: -15px;bottom: 0;z-index: 1;opacity: 0;top: 0;width: 30px;}
.content .r_content .con1 .ui:hover .tips{opacity: 1;right: 5px;}
.content .r_content .con1 .ui .tips span{transform:rotate(90deg);-ms-transform:rotate(90deg);-moz-transform:rotate(90deg);-webkit-transform:rotate(90deg);-o-transform:rotate(90deg);position: absolute;}
.content .r_content .con1 .ui .tips::after{content: '';position: absolute;left: 50%;height: 1px;width: 60%;background-color: #FFF;transform: translateX(-50%);top: 0;}
.content .r_content .con1 .ui .tips::before{content: '';position: absolute;left: 50%;height: 1px;width: 60%;background-color: #FFF;transform: translateX(-50%);bottom: 0;}
.content .r_content .con1 .ui .tips span::after{content: '';position: absolute;left: -2.2vw;height: 1px;width: 2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .ui .tips span::before{content: '';position: absolute;right: -2.2vw;height: 1px;width: 2vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx{width: 11vw;}
.content .r_content .con1 .wx img{width: 4vw;}
.content .r_content .con1 .wx .tips{font-size: 18px;position: absolute;left: 4px;right: 4px;bottom: -10px;z-index: 1;opacity: 0;}
.content .r_content .con1 .wx:hover .tips{opacity: 1;bottom: 5px;}
.content .r_content .con1 .wx .tips::after{content: '';position: absolute;left: 0;height: 60%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips::before{content: '';position: absolute;right: 0;height: 60%;width: 1px;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips span::after{content: '';position: absolute;left: -3.8vw;height: 1px;width: 3vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .wx .tips span::before{content: '';position: absolute;right: -3.8vw;height: 1px;width:3vw;background-color: #FFF;transform: translateY(-50%);top: 50%;}
.content .r_content .con1 .text{line-height: 1.5;font-size: 20px;padding: 3vh 3vw;}
.content .r_content .con1 .text span{padding-top: 0.8vh;}
.content .r_content .con1 .text::after{content: '';position: absolute;left: 1.2vw;right: 1.2vw;top: 2.8vh;bottom: 2vh;border-top: 1px #ff9850 dashed;border-bottom: 1px #ff9850 dashed;opacity: 0;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .text::before{content: '';position: absolute;left: 2vw;right: 2vw;top: 1.3vh;bottom: 0.5vh;border-left: 1px #ff9850 dashed;border-right: 1px #ff9850 dashed;opacity: 0;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .text:hover::after,.content .r_content .con1 .text:hover::before{opacity: 1;-webkit-transition: all .5s; -moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s;transition: all .5s}
.content .r_content .con1 .focus{width: 15vw;line-height: 1.5;padding: 1.6vh 0 0 1.5vw;font-size: 18px;}
.content .r_content .con1 .focus::after{content: '';position: absolute;left: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .focus .txt{display: none;}
/* 作品下载 */
.content .r_content .con1 .works{width: 15vw;padding: 1.6vh 2vw 0 2vw;}
.content .r_content .con1 .works::after{content: '';position: absolute;left: 0;top: 0;bottom: -2vh;width: 1px;border-right: 1px #262626 dashed;}
.content .r_content .con1 .works .txt{font-size: 18px;line-height: 1.5;text-align: justify;}
.content .r_content .con1 .works a{color: #FFF;}
.content .r_content .con1 .works .submit{height: 44px;line-height: 44px;background-color: #5D24E4;color: #FFF;font-size: 24px;margin-top: 2vh;}
.content .r_content .con1 .works .submit:hover{background-color: #30C78C;}
.content .r_content .con1 .works .submit .down{display: none;}
.content .r_content .con1 .works .submit.is-rotate .down{display: block;}
.content .r_content .con1 .works .submit.is-rotate .my{display: none;}
.content .r_content .con1 .works .lock{margin-top: 10px;opacity: 0;}
.content .r_content .con1 .works .lock.on{opacity: 1;}
.error{color:#FF4B4B;position: absolute;left: 2.5vw;top: 0;line-height: 40px;display: none}
/* 底部 */
.content .r_content .tool_content{padding: 2vh 2vw;height: 18vh;}
.content .r_content .tool_content::after{content: '';position: absolute;left: -1vw;border-bottom: 1px #262626 dashed;right: 0;height: 1px;bottom: 0;}
.content .r_content .tool_content .text{position: absolute;right: 4vw;bottom: 10px;text-align: right;font-size: 20px;}
.content .r_content .tool_content .text p{margin: 0;font-size: 18px;}
.content .r_content .tool_content .sns .wx .erwma{width: 64px;height: 64px;position: absolute;bottom: 24px;left: 50%;transform: translateX(-50%);opacity: 0;}
.content .r_content .tool_content .sns .wx .erwma img{width: 100%;}
.content .r_content .tool_content .sns .wx:hover .erwma{opacity: 1;bottom: 34px;}
.content .r_content .tool_content .sns .figma{background: url(../images/icon_figma.svg)no-repeat center;background-size: 100%;margin-left: 2vw;}
.content .r_content .tool_content .sns .figma:hover{background: url(../images/icon_figma_hover.svg)no-repeat center;}
.content .r_content .con1 .works .lock input {background: #212121 url(../images/lock.svg)no-repeat 0.8vw center;padding-left: 2.5vw;width: 100%;height: 40px;background-size: 22px;color: #FFF;}
.content .r_content .tool_content .sns .mail span{width: 100%;height: 24px;}
.content .r_content .tool_content .sns .mail .copytxt{opacity: 0;position: absolute;left: 50%;transform: translateX(-50%);background-color: #FFF;color: #000;border-radius: 5px;padding: 2px 0px;bottom: 30px;width: 60px;font-size: 14px;}
.content .r_content .tool_content .sns .mail input{opacity: 0;width: 5px;height: 5px;position: absolute;left: 0;z-index: 0;top: 0}
/*icon*/
.flex-center {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.icon-3d {
padding: 10px;
-webkit-animation: icon3d 200ms 10;
animation: icon3d 200ms 10;
color: #b1b1b1;
}
.icon-3d:hover {
-webkit-animation: icon3d 200ms infinite;
animation: icon3d 200ms infinite;
}
.fa-siz {
font-size: 2em;
margin-left: 1vw;
}
@keyframes icon3d {
0% {
text-shadow: 5px 4px #0a29c0, -5px -6px #e50404;
}
25% {
text-shadow: -5px -6px #0a29c0, 5px 4px #e50404;
}
50% {
text-shadow: 5px -4px #0a29c0, -8px 4px #e50404;
}
75% {
text-shadow: -8px -4px #0a29c0, -5px -4px #e50404;
}
100% {
text-shadow: -5px 0 #0a29c0, 5px -4px #e50404;
}
}
/*MacBook Air*/
.macbook {
width: 150px;
height: 96px;
position: absolute;
left: 50%;
top: 50%;
margin: -75px 0 0 -48px;
perspective: 500px;
}
.shadow {
position: absolute;
width: 60px;
height: 0px;
left: 40px;
top: 160px;
transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
animation: shadow infinite 7s ease;
}
.inner {
z-index: 20;
position: absolute;
width: 150px;
height: 96px;
left: 0;
top: 0;
transform-style: preserve-3d;
transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
animation: rotate infinite 7s ease;
}
.screen {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #ddd;
transform-style: preserve-3d;
transform-origin: 50% 93px;
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
animation: lid-screen infinite 7s ease;
background-image: linear-gradient(45deg, rgba(0,0,0,0.34) 0%,rgba(0,0,0,0) 100%);
background-position: left bottom;
background-size: 300px 300px;
box-shadow: inset 0 3px 7px rgba(255,255,255,0.5);
}
.screen .logo {
position: absolute;
width: 20px;
height: 24px;
left: 50%;
top: 50%;
margin: -12px 0 0 -10px;
transform: rotateY(180deg) translateZ(0.1px);
}
.screen .face-one {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #d3d3d3;
transform: translateZ(2px);
background-image: linear-gradient(45deg,rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.screen .face-one .camera {
width: 3px;
height: 3px;
border-radius: 100%;
background: #000;
position: absolute;
left: 50%;
top: 4px;
margin-left: -1.5px;
}
.screen .face-one .display {
width: 130px;
height: 74px;
margin: 10px;
background: url("") no-repeat center center #000;
background-size: 100% 100%;
border-radius: 1px;
position: relative;
box-shadow: inset 0 0 2px rgba(0,0,0,1);
}
.screen .face-one .display .shade {
position: absolute;
left: 0;
top: 0;
width: 130px;
height: 74px;
background: linear-gradient(-135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0.1) 47%,rgba(255,255,255,0) 48%);
animation: screen-shade infinite 7s ease;
background-size: 300px 200px;
background-position: 0px 0px;
}
.screen .face-one span {
position: absolute;
top: 85px;
left: 57px;
font-size: 6px;
color: #666
}
.body {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
background: #cbcbcb;
transform-style: preserve-3d;
transform-origin: 50% bottom;
transform: rotateX(-90deg);
animation: lid-body infinite 7s ease;
background-image: linear-gradient(45deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .face-one {
width: 150px;
height: 96px;
position: absolute;
left: 0;
bottom: 0;
border-radius: 7px;
transform-style: preserve-3d;
background: #dfdfdf;
animation: lid-keyboard-area infinite 7s ease;
transform: translateZ(-2px);
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
}
.body .touchpad {
width: 40px;
height: 31px;
position: absolute;
left: 50%;
top: 50%;
border-radius: 4px;
margin: -44px 0 0 -18px;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #888;
}
.body .keyboard {
width: 130px;
height: 45px;
position: absolute;
left: 7px;
top: 41px;
border-radius: 4px;
transform-style: preserve-3d;
background: #cdcdcd;
background-image: linear-gradient(30deg, rgba(0,0,0,0.24) 0%,rgba(0,0,0,0) 100%);
box-shadow: inset 0 0 3px #777;
padding: 0 0 0 2px;
}
.keyboard .key {
width: 6px;
height: 6px;
background: #444;
float: left;
margin: 1px;
transform: translateZ(-2px);
border-radius: 2px;
box-shadow: 0 -2px 0 #222;
animation: keys infinite 7s ease;
}
.key.space {
width: 45px;
}
.key.f {
height: 3px;
}
.body .pad {
width: 5px;
height: 5px;
background: #333;
border-radius: 100%;
position: absolute;
}
.pad.one {
left: 20px;
top: 20px;
}
.pad.two {
right: 20px;
top: 20px;
}
.pad.three {
right: 20px;
bottom: 20px;
}
.pad.four {
left: 20px;
bottom: 20px;
}
@keyframes rotate {
0% {
transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);
}
5% {
transform: rotateX(-20deg) rotateY(-20deg) rotateZ(0deg);
}
20% {
transform: rotateX(30deg) rotateY(200deg) rotateZ(0deg);
}
25% {
transform: rotateX(-60deg) rotateY(150deg) rotateZ(0deg);
}
60% {
transform: rotateX(-20deg) rotateY(130deg) rotateZ(0deg);
}
65% {
transform: rotateX(-20deg) rotateY(120deg) rotateZ(0deg);
}
80% {
transform: rotateX(-20deg) rotateY(375deg) rotateZ(0deg);
}
85% {
transform: rotateX(-20deg) rotateY(357deg) rotateZ(0deg);
}
87% {
transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
}
100% {
transform: rotateX(-20deg) rotateY(360deg) rotateZ(0deg);
}
}
@keyframes lid-screen {
0% {
transform: rotateX(0deg);
background-position: left bottom;
}
5% {
transform: rotateX(50deg);
background-position: left bottom;
}
20% {
transform: rotateX(-90deg);
background-position: -150px top;
}
25% {
transform: rotateX(15deg);
background-position: left bottom;
}
30% {
transform: rotateX(-5deg);
background-position: right top;
}
38% {
transform: rotateX(5deg);
background-position: right top;
}
48% {
transform: rotateX(0deg);
background-position: right top;
}
90% {
transform: rotateX(0deg);
background-position: right top;
}
100% {
transform: rotateX(0deg);
background-position: right center;
}
}
@keyframes lid-body {
0% {
transform: rotateX(-90deg);
}
50% {
transform: rotateX(-90deg);
}
100% {
transform: rotateX(-90deg);
}
}
@keyframes lid-keyboard-area {
0% {
background-color: #dfdfdf;
}
50% {
background-color: #bbb;
}
100% {
background-color: #dfdfdf;
}
}
@keyframes screen-shade {
0% {
background-position: -20px 0px;
}
5% {
background-position: -40px 0px;
}
20% {
background-position: 200px 0;
}
50% {
background-position: -200px 0;
}
80% {
background-position: 0px 0px;
}
85% {
background-position: -30px 0;
}
90% {
background-position: -20px 0;
}
100% {
background-position: -20px 0px;
}
}
@keyframes keys {
0% {
box-shadow: 0 -2px 0 #222;
}
5% {
box-shadow: 1 -1px 0 #222;
}
20% {
box-shadow: -1px 1px 0 #222;
}
25% {
box-shadow: -1px 1px 0 #222;
}
60% {
box-shadow: -1px 1px 0 #222;
}
80% {
box-shadow: 0 -2px 0 #222;
}
85% {
box-shadow: 0 -2px 0 #222;
}
87% {
box-shadow: 0 -2px 0 #222;
}
100% {
box-shadow: 0 -2px 0 #222;
}
}
@keyframes shadow {
0% {
transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg);
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
}
5% {
transform: rotateX(80deg) rotateY(10deg) rotateZ(0deg);
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
}
20% {
transform: rotateX(30deg) rotateY(-20deg) rotateZ(-20deg);
box-shadow: 0 0 50px 30px rgba(0,0,0,0.3);
}
25% {
transform: rotateX(80deg) rotateY(-20deg) rotateZ(50deg);
box-shadow: 0 0 35px 15px rgba(0,0,0,0.1);
}
60% {
transform: rotateX(80deg) rotateY(0deg) rotateZ(-50deg) translateX(30px);
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
}
100% {
box-shadow: 0 0 60px 40px rgba(0,0,0,0.3);
}
}
/*Music*/
.holder{
color: #60b044;
}
/*翻页渲染*/
#background {
z-index: -1;
position: fixed;
left: 0;
width: 100%;
height: 100%;
}
@media (max-width: 1921px) {
/*修改1441以下、小屏显示器*/
.header{padding: 35px 90px 35px 105px;}
.warp{padding: 0px 105px}
.content{padding: 0px 105px;height: calc(100vh - 116px);}
.warp li{height: 160px;padding:20px 30px;margin-top: 30px;}
.content .r_content .name{font-size: 138px;}
.content .r_content .con1 .ui{font-size: 54px;}
.content .r_content .con1 .text{font-size: 18px;}
.content .r_content .con1 .works .submit{font-size: 22px;}
}
@media (max-width: 1681px) {
/*修改1441以下、小屏显示器*/
.header{padding: 30px 70px 25px 90px;}
.warp{padding: 0px 90px}
.content{padding: 0px 90px;height: calc(100vh - 106px);}
.content .en{font-size: 100px;}
.content .r_content .name{font-size: 128px;}
.content .r_content .con1 .ui{font-size: 42px;}
.content .r_content .con1 .text,.content .r_content .con1 .works .txt{font-size: 16px;}
.content .r_content .con1 .works .submit{font-size: 20px;}
.content .r_content .tool_content .text{font-size: 18px;}
.content .r_content .tool_content .text p{font-size: 16px;}
}
@media (max-width: 1441px) {
/*修改1441以下、小屏显示器*/
.header{padding: 25px 65px 25px 75px;}
.header .user-info .portrait{height: 34px;width: 34px;}
.header .user-info .name{font-size: 20px;}
.header .link{font-size: 16px;height: 34px;line-height: 34px;}
.move-bg{height: 34px;}
.warp{padding: 0px 75px}
.content{padding: 0px 75px;height: calc(100vh - 96px);}
.warp li{width: calc(25% - 2%);margin-top: 20px;}
.content .en_box{width: 20%;}
.content .r_content{width: 80%;}
.content .en{font-size: 90px;}
.content .r_content .name{font-size: 118px;}
.content .r_content .con1 .ui .tips,.content .r_content .con1 .wx .tips,.content .r_content .name .tips{font-size: 16px;}
.content .r_content .con1 .focus{font-size: 16px;}
.content .r_content .con1 .works .txt{font-size: 14px;}
.content .r_content .con1 .works .submit{font-size: 16px;}
.content .r_content .tool_content .text{font-size: 16px;}
.content .r_content .tool_content .text p{font-size: 14px;}
.content .r_content .name .tips span::after,.content .r_content .name .tips span::before{width: 12vw;}
.content .r_content .name .tips span::after{left: -13vw;}
.content .r_content .name .tips span::before{right: -13vw;}
.content .r_content .vr{width: 17vw;}
.content .r_content .con1 .works{width: 16vw;}
}
@media (max-width: 1367px) {
/*修改1441以下、小屏显示器*/
.header{padding: 20px 40px 20px 70px;}
.warp{padding: 0px 70px}
.content{padding: 0px 70px;height: calc(100vh - 86px);}
.content .en{font-size: 80px;}
.content .r_content .name{font-size: 88px;}
.content .r_content .con1 .ui .tips,.content .r_content .con1 .wx .tips,.content .r_content .name .tips{font-size: 14px;}
.content .r_content .con1 .focus{font-size: 14px;}
.content .r_content .vr{width: 18.5vw;}
.content .r_content .con1 .works{width: 16.5vw;}
}
@media (max-width: 1281px) {
/*修改1441以下、小屏显示器*/
.header{padding: 20px 65px;}
.warp{padding: 0px 65px}
.content{padding: 0px 65px;height: calc(100vh - 86px);}
.content .r_content .name{font-size: 98px;}
.content .r_content .con1 .text{font-size: 14px;}
.content .r_content .name .tips span::after,.content .r_content .name .tips span::before{width: 12vw;}
.content .r_content .name .tips span::after{left: -12.8vw;}
.content .r_content .name .tips span::before{right: -12.8vw;}
}
源码领取
动态酷黑主页源码
- 📢博客主页:孤客网络科技工作室官方账号
- 📢欢迎点赞👍收藏⭐️留言 📝如有错误敬请指正!
- 📢本文由孤客原创,若侵权联系作者,首发于CSDN博客
- 📢停下休息的时候不要忘了别人还在奔跑,希望大家抓紧时间学习,全力奔赴更好的生活💻