好看的html源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>鼠标悬浮渐变切换视频背景</title>
<style>
.video-box .item {
position: relative;
width: 100%; /* 你可以根据容器大小调整 */
height: 100vh; /* 视频容器的高度 */
overflow: hidden;
}
.video-box .item video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.video-box .item .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色覆盖层 */
opacity: 1;
transition: opacity 1s ease-in-out;
}
.video-box .item:hover .overlay {
opacity: 0; /* 鼠标悬浮时隐藏覆盖层 */
}
.video-box .item:hover .video-content {
opacity: 1; /* 鼠标悬浮时显示视频 */
}
/* 默认显示第一个视频 */
.video-box .item:first-child .video-content {
opacity: 1;
}
</style>
</head>
<body>
<div class="video-box">
<div class="item" onmouseover="hoverVideo(this)" onmouseout="unhoverVideo(this)">
<div class="overlay"></div>
<video id="videos0" class="video-content" autoplay muted loop>
<source src="https://nie.v.netease.com/r/video/20220121/fc6becb0-b3be-4937-8dcf-aa950a1a01f1.mp4" type="video/mp4">
</video>
<span>1</span>
</div>
<div class="item" onmouseover="hoverVideo(this)" onmouseout="unhoverVideo(this)">
<div class="overlay"></div>
<video id="videos1" class="video-content" autoplay muted loop>
<source src="https://mc.v.netease.com/r/video/20210204/d01bbccd-dd92-4a15-a178-b3e93a725dcc.mp4" type="video/mp4">
.
</video>
<span>2</span>
</div>
<div class="item" onmouseover="hoverVideo(this)" onmouseout="unhoverVideo(this)">
<div class="overlay"></div>
<video id="videos2" class="video-content" autoplay muted loop>
<source src="https://yys.v.netease.com/qita/CGkaichang.mp4" type="video/mp4">
</video>
<span>3</span>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 获取所有视频元素
const videos = document.querySelectorAll('.video-content');
// 初始时，除了第一个视频外，其他视频都暂停
videos.forEach((video, index) => {
if (index !== 0) {
video.pause();
}
});
// 为每个视频容器添加鼠标悬浮和移出事件
const items = document.querySelectorAll('.item');
items.forEach(item => {
item.addEventListener('mouseover', function() {
// 暂停所有视频
videos.forEach(video => {
video.pause();
});
// 找到当前鼠标悬浮的视频并播放
const currentVideo = this.querySelector('.video-content');
if (currentVideo) {
currentVideo.play();
}
});
// 注意：通常不需要为mouseout事件编写代码，因为视频默认会在页面加载时自动播放（并设置muted）
// 但如果你想要在用户将鼠标移出视频时执行某些操作（比如暂停视频），你可以在这里添加
// item.addEventListener('mouseout', function() {
// const currentVideo = this.querySelector('.video-content');
// if (currentVideo) {
// currentVideo.pause();
// }
// });
});
});
</script>
</body>
</html>
2、
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Author" content="Noah">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="favicon" href="favicon.ico">
<title>AGou-ops 资源下载</title>
<style>@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.eot?t=1584846914425);src:url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.eot?t=1584846914425#iefix) format('embedded-opentype'),url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAPcAAsAAAAACEAAAAOQAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDVIMaATYCJAMUCwwABCAFhG0HUhswBxEVnPHIfiZkcgn7O+8oo66bEbK2OpSJxjfBA+X1vslMtll8iBW0KuzdSry1J/JGpwASAA0EaO7O95urXT4WOkKV5Nojj7b4hwrpy2SO/v97p78xLfvYuvYslzWHLex8DDAOpEDHnGQljg3TC+cUPEjbIQAHqRRD1GvQzI2BgvQTgBjYr083jJQNVcMRGEZbyVSVKhajY2hztCvAIv178YYywgANXUJ2atW7fk9qmZi1ZMCSjnILC8fbDUAHJFAMUCCGl/oGIm2uGBKHP1RRC3BgoKGZmLxVUbOWZcWqHRkc9A8PBBKFBsIGKXUBUAvlFZhwBAGmhiDBLIqgwKyVRwPuKwAOWAjCWUxL9mpIWOWKcikVmuwiF0+49sx9/bnn5gvfDdO/at6eQHTP5dHLd8Z6V67btSPG061Q523w0S5OzYETx4QbT9zXbnmuP/bdvOsL9lwR2D031utePndvMM7nXRncNy/G4xvlEveE69fc4Tdu+AbcnOdxa4E98/bFyZV75+5WxGRRnfY0cEulpaqbVCzNtxTEU1P1m2J4tFGwJ7VcytpevcrWOXd44oCjAyZu3DXRvQxryi09PV2/BcVQIlRxZPWvAFhMXkb1qQ3bHPFvOVXxWI1TjTLPFjtT5smFsAtxVqK82CcvekwcsbMOHDh4wOBxYw4eZI+NVR+A6Vmx4bGz1ZI0XFw1r0mlXm20lW5RpWd+s0u/ijYZwarmHJsZVi+tXKjMlU2rm186Hlk6tFxaPfwAWLPk3380K2u4Qm6xtmaprTL4b/dj0Nu/F+qwat8MpwLgzvpfdbSsPbbVBj9Ijy//kxa1tAb7qAqUxK4rT8490qpVpxGATiESBDT4aTX/LxTJg3H0MbPIZMAgJgaNIqSAxCCbpGjFQMdJObBhUBMcFKXhbCdRDEcilB0oZAYAQTiHQCOU4yAJ5ypJ0e6DTizvwEa4kODAK6KWdJIrLP1uHgWtYqDuj3zPi2FOvTHlb7BpaiWp1NwvSPRJKrMiW3zFAhljRPy2laohIzzTC9gN08S0Cgf0mjnV9ZLnpuxDWc/z5oZHQasYqPsj3/NiZGO9yX3/DTZNrdQQ+qJfkOjbpzIrWpBedUsrwrXcEr9tpWrICM/0AjyYaI5pLe8U0GvmemTWS47qmba6bH7D/IybAAdkZV1oQgoldGHjYViCYPl3WKxb86g+On/sE/+kc/CLtS1vNg==') format('woff2'),url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.woff?t=1584846914425) format('woff'),url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.ttf?t=1584846914425) format('truetype'),url(//at.alicdn.com/t/font_1706200_3sgw4esvyq9.svg?t=1584846914425#iconfont) format('svg')}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-querenzhengque:before{content:"\e600"}.icon-tishi:before{content:"\e640"}.icon-cuowu:before{content:"\e602"}.icon-jinggao:before{content:"\e62b"}*{box-sizing:border-box;margin:0;padding:0;font-weight:300}body,body ::-webkit-input-placeholder{font-family:Source Sans Pro,sans-serif;color:#fff;font-weight:300}body :-moz-placeholder,body ::-moz-placeholder{font-family:Source Sans Pro,sans-serif;color:#fff;opacity:1;font-weight:300}body :-ms-input-placeholder{font-family:Source Sans Pro,sans-serif;color:#fff;font-weight:300}a{text-decoration:none}.wrapper{background: #01a982; background: linear-gradient(to bottom right,#01a982 0,#60ae80 100%); overflow: hidden;}.bg-bubbles,.wrapper{position:absolute;left:0;width:100%;height:100%}.bg-bubbles{top:0;z-index:1}.bg-bubbles li{position:absolute;list-style:none;display:block;width:40px;height:40px;background-color:hsla(0,0%,100%,.15);bottom:-160px;animation:square 25s infinite;transition-timing-function:linear}.bg-bubbles li:nth-child(1){left:10%}.bg-bubbles li:nth-child(2){left:20%;width:80px;height:80px;animation-delay:2s;animation-duration:17s}.bg-bubbles li:nth-child(3){left:25%;animation-delay:4s}.bg-bubbles li:nth-child(4){left:40%;width:60px;height:60px;animation-duration:22s;background-color:hsla(0,0%,100%,.25)}.bg-bubbles li:nth-child(5){left:70%}.bg-bubbles li:nth-child(6){left:80%;width:120px;height:120px;animation-delay:3s;background-color:hsla(0,0%,100%,.2)}.bg-bubbles li:nth-child(7){left:32%;width:160px;height:160px;animation-delay:7s}.bg-bubbles li:nth-child(8){left:55%;width:20px;height:20px;animation-delay:15s;animation-duration:40s}.bg-bubbles li:nth-child(9){left:25%;width:10px;height:10px;animation-delay:2s;animation-duration:40s;background-color:hsla(0,0%,100%,.3)}.bg-bubbles li:nth-child(10){left:90%;width:160px;height:160px;animation-delay:11s}@keyframes square{0%{transform:translatey(0)}to{transform:translatey(-700px) rotate(600deg)}}@media (max-width:500px){.container h1{font-size:60px}form button,form input{width:500px}}.main{padding:50px 0;z-index:999;position:relative}.main h1{font-size:40px;text-align:center;color:#fff;margin-bottom:30px;text-transform:uppercase}.content{margin:0 auto;width:28%;background:#fff;border-radius:5px}p.footer{font-size:16px;text-align:center;color:#fff;font-weight:500;margin-top:30px}p.footer a{color:#55acee}p.footer a:hover{color:#000;transition:.5s all;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;-ms-transition:.5s all}.content-top h2{font-size:22px;color:#fff;text-align:center;background:#02a982;padding:12px 0;border-radius:5px}.content-top p{text-align:center;font-size:16px;color:#000;margin-top:15px}.content-top ul li{display:block;font-size:15px;color:#000;line-height:1.8em;padding:1em 0 1em 1em;border-bottom:1px solid #e2e0de}.content-top ul li a{color:#000;font-weight:400}.content-top ul li a i{color:#02a982;font-style:normal;display:block;margin:2px 0}.content-top ul li span{display:block;color:#999}.content-top{padding:1.5em}.content-top p a{color:#55acee;margin-left:5px}@media (max-width:1366px){.content{width:31%}}@media (max-width:1280px){.content{width:32%}}@media (max-width:1080px){.content{width:38%}.main h1{font-size:36px}.content-top h2{font-size:20px;padding:10px 0}.content-top p,.content-top ul li,p.footer{font-size:14px}}@media (max-width:800px){.main h1{font-size:34px}.content{width:46%}}@media (max-width:768px){.main{padding:90px 0}.main h1{margin-bottom:55px}p.footer{margin-top:75px}}@media (max-width:736px){.main{padding:70px 0}.main h1{margin-bottom:45px}.content{width:53%}p.footer{margin-top:50px}}@media (max-width:667px){.main h1{font-size:32px;margin-bottom:35px}.main{padding:60px 0}.content{width:57%}.content-top h2{font-size:18px}}@media (max-width:600px){.main h1{font-size:30px}.content-top{padding:1em}.content{width:62%}}@media (max-width:568px){.content{width:68%}}@media (max-width:480px){.content{width:78%}.main h1{font-size:28px}p.footer{margin-top:42px}}@media (max-width:414px){.content-top h2{font-size:16px}.content{width:85%}.main{padding:50px 0}p.footer{line-height:1.8em;margin:42px auto 0;width:85%}}@media (max-width:384px){.main h1{font-size:27px}.content,p.footer{width:90%}p.footer{margin:32px auto 0}}@media (max-width:375px){.main h1{font-size:26px;margin-bottom:25px}.main{padding:45px 0}.content,p.footer{width:92%}.content-top h2{padding:8px 0}}@media (max-width:320px){.main h1{font-size:24px;margin-bottom:30px}.content-top ul li{padding:1em 0 1em 1em;background-size:13%!important}.content-top{padding:1.2em}.content-top p,.content-top ul li,p.footer{font-size:13px}.content,p.footer{width:90%}}@media(max-width:500px){.bg-bubbles, .wrapper{height:auto;}}</style>
</head>
<body >
<div id="all">
<div class="wrapper">
<div class="main">
<h1>网址发布页</h1>
<div class="content">
<div class="content-top">
<h2>请 Ctrl+D 收藏本页到浏览器收藏夹</h2>
<ul>
<li>
金鱼分享
<a href="https://pan.quark.cn/s/a341a9984f28" target="_blank"><i>java拼图</i></a>
</span></span></li>
<li>
阿巴阿巴
<a href="www.baidu.com" target="_blank"><i>进入百度</i></a>
</span></span></li>
<li>
阿巴阿巴
<a href="https://www.taobao.com/" target="_blank"><i>进入淘宝</a>
</span></span></li>
<li>
阿巴巴巴
<a href="https://www.cnblogs.com/guixiangyyds" target="_blank"><i>进入博客园</a>
</span></span></li>
</ul>
</div>
</div>
<p class="footer">© 2020 AGou . All Rights Reserved</p>
</div>
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div style='display:none'><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1278893351&web_id=1278893351"></script></div>
</body>
</html>
3、
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>系统维护通知</title>
<link rel="stylesheet" type="text/css" href="notice.css"/>
</head>
<body>
<div class="notice-wrap">
<div class="notice">
<h1>系统维护升级公告</h1>
<p class="notice-cont">为了给您提供更优质的服务，本站<span>2019年12月4日起</span>进行服务器维护，具体恢复时间将另行通知，维护期间暂停xxxx相关服务，给您带来的不便敬请谅解！</p>
<p class="notice-tel">如有疑问请联系xxxx<span>suofeiyaxx.top</span></p>
<div class="notice-foot">
<p>AGou-ops</p>
<p>2019年12月4日</p>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* :root全局css变量搭配var()函数使用 */
:root {
--light-color: #fff
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
}
.container {
width: 100%;
height: 100%;
display: flex;
}
.light-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
}
.light {
position: absolute;
width: 80px;
height: 80px;
border-radius: 50%;
background-color: var(--light-color);
transition: all 0.24s;
}
.light::before {
content: '';
position: absolute;
width: 35px;
height: 80px;
border-radius: 10px;
background: var(--light-color);
left: 27.5%;
top: -50px;
border-top: 30px solid black;
}
.light span:nth-child(1) {
position: absolute;
width: 30px;
height: 30px;
background: transparent;
box-shadow: 20px 20px 0 10px var(--light-color);
border-bottom-right-radius: 40px;
left: -4px;
top: -16px;
transform: rotate(342deg);
}
.light span:nth-child(2) {
position: absolute;
width: 30px;
height: 30px;
background: transparent;
box-shadow: -20px 20px 0 10px var(--light-color);
border-bottom-left-radius: 40px;
right: -3.4px;
top: -16px;
transform: rotate(16deg);
}
.wire {
width: 4px;
height: 400px;
background-color: #8f8e8e;
top: -18%;
position: absolute;
transition: all 0.24s;
}
.light::after {
position: absolute;
content: '';
width: 140px;
height: 140px;
background: var(--light-color);
border-radius: 50%;
top: 50%;
left: 0;
filter: blur(40px);
transform: translate(-18%, -40px);
box-shadow: 0 0 10px var(--light-color),
0 0 30px var(--light-color),
0 0 60px var(--light-color),
0 0 120px var(--light-color),
0 0 200px var(--light-color),
;
}
button {
position: absolute;
bottom: 240px;
right: 240px;
width: 120px;
height: 36px;
}
</style>
</head>
<body>
<div class="container">
<div class="light-container">
<div class="wire"></div>
<div class="light">
<span></span>
<span></span>
</div>
</div>
</div>
<button>
开始测试
</button>
<script>
let switchOn = true
let btn = document.querySelector('button')
let light = document.querySelector('.light')
let wire = document.querySelector('.wire')
btn.onclick = () => {
switchOn = !switchOn
setTimeout(function() {
// 跳转到1.html页面
window.location.href = './1.html';
}, 300); // 1000毫秒 = 1秒
if (switchOn) {
document.documentElement.style.setProperty('--light-color', '#fff')
wire.style.background = '#8f8e8e'
document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #000');
} else {
document.documentElement.style.setProperty('--light-color', '#333')
wire.style.background = '#333'
document.styleSheets[0].addRule('.light::before', 'border-top: 30px solid #333');
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="4;URL=2.html">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 主要是text-shadow和transform搭配动画的巧妙运用 */
.wrap {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 120px;
background-color: #000;
color: transparent;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
text-align: center; /* 确保文本在h3标签内也居中 */
}
h1 {
text-shadow: 0 0 0 #fff;
animation: smoky 6s infinite;
}
@keyframes smoky {
60% {
text-shadow: 0 0 40px #fff;
}
100% {
text-shadow: 0 0 20px #fff;
/* 这里是重点 */
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skew(70deg) scale(1.5);
opacity: 0;
}
}
h1:nth-child(1) {
animation-delay: 1s;
}
h1:nth-child(2) {
animation-delay:1.7s;
}
h1:nth-child(3) {
animation-delay: 2.4s;
}
/* h1:nth-child(4) {
animation-delay: 4s;
} */
/* h1:nth-child(5) {
animation-delay: 5s;
} */
/* h1:nth-child(6) {
animation-delay: 6s;
} */
</style>
</head>
<body>
<div class="wrap">
<!-- <h1>呐呐~杂鱼哥哥发这个是想教育我吗~嘻嘻~怎么可能啊♡</h1>
<h1>呐呐~杂鱼哥哥不会这样就被捉弄的不会说话了吧♡真是弱哎♡~</h1>
<h1>嘻嘻~杂鱼哥哥不会以为竖个大拇哥就能欺负我了吧~不会吧♡不会吧♡杂鱼哥哥怎么可能欺负得了别人呢~只能欺负自己哦♡~</h1>
<h1>哥哥真是好欺负啊♡嘻嘻~</h1>
<h1>哎♡~杂鱼说话就是无趣唉~只会发一张表情包的笨蛋到处都有吧♡</h1>
<h1>什么嘛~废柴哥哥会想这种事情啊~唔呃，把你肮脏的目光拿开啦~很恶心哦♡</h1> -->
<!-- <h1>你绝对温存，</h1>
<h1>绝对可爱，生机勃勃，全无畏惧而且自信。</h1>
<h1>我从你身上感到一种永存的精神，</h1>
<h1>超过平庸生活里的一切。</h1> -->
<!-- <h1>-﹣王小波</h1> -->
<h1>我看过大海,</h1>
<h1>但是我对你的爱</h1>
<h1>比它还要汹涌</h1>
</div>
</body>
</html>
下面两个为一部分
html,body{
background:#000;
margin:0;
}
/* .centered{
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#000;
filter: blur(10px) contrast(20);
} */
.blob-1,.blob-2{
width:70px;
height:70px;
position:absolute;
background:#fff;
border-radius:50%;
top:50%;left:50%;
transform:translate(-50%,-50%);
}
.blob-1{
left:20%;
animation:osc-l 2.5s ease infinite;
}
.blob-2{
left:80%;
animation:osc-r 2.5s ease infinite;
background:#0ff;
}
@keyframes osc-l{
0%{left:20%;}
50%{left:50%;}
100%{left:20%;}
}
@keyframes osc-r{
0%{left:80%;}
50%{left:50%;}
100%{left:80%;}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="3;URL=3.html">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="jia_zai.css">
</head>
<body>
<div class = "centered">
<div class = "blob-1"></div>
<div class = "blob-2"></div>
</div>
</div>
</body>
</html>
