webgl+css实现炫酷落叶三维背景引导页落地页搜索页标签页代码
代码语言：html
所属分类：其他
代码描述：webgl+css实现炫酷落叶三维背景引导页落地页搜索页标签页代码
代码标签： webgl css 炫酷 落叶 三维 背景 引导页 落地页 搜索页 标签页 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="en-us" http-equiv="Content-Language">
<meta name="viewport" content="width=device-width, initial-scale=0.9">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.7.0.css">
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time < 24) {
document.getElementById("title").innerHTML = "Good evening!";
}
if (time < 19) {
document.getElementById("title").innerHTML = "Good afternoon!";
}
if (time < 12) {
document.getElementById("title").innerHTML = "Good morning!";
}
if (time < 5) {
document.getElementById("title").innerHTML = "Go to sleep!";
}
</script>
<style>
* {
padding: 0;
margin: 0;
}
.icon {
width: 3em;
height: 3em;
max-width: 72px;
font-size: 2em; /* Adjust size as needed */
color: #fff; /* Match your original design */
display: flex;
align-items: center;
justify-content: center;
}
body {
text-align: center;
background-repeat: no-repeat;
background-color: #353535;
}
#search_input {
width: 90%;
height: 40px;
background-color: transparent;
border: none;
outline: 0;
font-size: 16px;
color: #4a4266;
padding: 0 10px;
border-radius: 50px
}
.search_part {
margin-bottom: 10px;
margin-top: 90px;
}
span {
display: block;
font-size: 12px;
overflow: hidden;
padding-left: 2px;
vertical-align: middle;
}
.search_bar {
box-shadow: 0 0 5px rgba(70,70,40,.255);
-webkit-animation: fadeIn 2.5s;
animation: fadeIn 2.5s;
background-color: transparent;
border-radius: 3px;
display: table;
vertical-align: middle;
width: 80%;
height: 20px;
max-width: 400px;
margin: 10px auto;
}
#search_submit {
outline: 0;
height: 40px;
float: right;
color: #4a4266;
font-size: 18px;
font-weight: 500;
border: none;
background-color: transparent;
padding: 0 13px 0 13px
}
#content {
width: 100%;
text-align: center;
padding-top: 25px;
padding-bottom: 15px;
}
.box {
-webkit-animation: fadeInDown 1s;
animation: fadeInDown 1s;
position: relative;
display: inline-block;
width: 75px;
border: 0;
}
.box a {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.url {
color: #fff;
height: 1.5em;
line-height: 1.5em;
width: 72px;
font-size: 0.75em;
white-space: nowrap;
overflow: hidden;
margin: auto;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
padding-top: 3px;
padding-bottom: 8px;
}
.icon {
width: 3em;
height: 3em;
max-width: 72px;
}
#app-items {
width: 100%;
max-width: 400px;
margin: 0px auto;
text-align: center;
background-color: transparent;
;
padding-top: 0px;
padding-bottom: 15px;
}
.title {
background-color: #fffffff;
font-size: 16px;
height: 30px;
line-height: 30px;
padding: 0 10px 0 20px;
color: #fff;
}
#yiyan {
width: 100%;
max-width: 400px;
margin: 0px auto;
text-align: center;
background-color: transparent;
padding-top: 0px;
padding-bottom: 15px;
}
.shuxing {
color: #fff;
font-size: 12px;
height: 30px;
line-height: 20px;
padding: 0 10px 0 20px;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0);
transform: perspective(400px) rotateX(0);
opacity: 1
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg)
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg)
}
100% {
-webkit-transform: perspective(400px) rotateX(0);
-ms-transform: perspective(400px) rotateX(0);
transform: perspective(400px) rotateX(0);
opacity: 1
}
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fadeIn {
0% {
opacity: 0
}
100% {
opacity: 1
}
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-20px);
-ms-transform: translateY(-20px);
transform: translateY(-20px)
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0)
}
}
</style>
<style>
canvas {
padding: 0;
margin: 0;
position: absolute;
z-index: -1;
left: 0px;
}
#search_input {
width: 100%;
height: 40px;
background-color: transparent;
border: none;
outline: 0;
font-size: 16px;
color: #000000;
}
/*翻译
搜索框边距
下边距︰ 30px;
上边距︰ 20px;
*/
.search_part {
margin-bottom: 10px;
margin-top: 40px;
}
/*翻译
跨度样式
显示︰ 阻止;
溢出︰ 隐藏;
左填充︰ 5px;
垂直对齐︰ 居中;
*/
.search_bar span {
display: block;
font-size: 12px;
overflow: hidden;
padding-left: 2px;
margin-right: 42px;
vertical-align: middle;
}
.search_bar span i {
display: none;
float: right;
width: 35px;
height: 40px;
background-size: 16px;
}
.search_bar .si {
margin: 0 38px 0 10px;
}
li {
list-style: none;
}
/*搜索建议条*/
#suggest {
position: absolute;
left: -1px;
right: -1px;
top: 40px;
border: 1px solid #ccc;
background: #fff;
line-height: 40px;
}
#suggest li {
border-bottom: 1px solid #ccc;
text-align: left;
padding-left: 16px;
}
#suggest li:active {
background: #F0F0F0;
}
#suggest li b {
float: right;
width: 44px;
height: 40px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAI5JREFUSEtjZCACLF261J6RkbELpPT///9l0dHRB4nQRlgJ0ODny5Yt+w/CIDZhHUSqgBkKo4nURljZqMHwMBohQQFK/ECvnkT3LgX8kyAzGZATPwWGgTMPSiYCGvyEWgYiGfyEAcjxoKaroWZ5EM52QBUjJLkRExajQUH7Qgg5E4HYxMQLUWpgmYiUxA8AOdLMz+iDKvIAAAAASUVORK5CYII=) no-repeat scroll center center #fff;
background-size: 11px;
}
#suggest .close {
text-align: right;
font-size: 14px;
color: #888;
padding-right: 12px;
}
.search_bar {
box-shadow: 0 0 5px rgba(70,70,40,.255);
-webkit-animation: fadeIn 2.5s;
animation: fadeIn 2.5s;
background-color: #fff;
opacity: 0.4;
border-radius: 3px;
display: table;
vertical-align: middle;
width: 80%;
height: 20px;
max-width: 400px;
margin: 10px auto;
position: relative;
z-index: 10;
}
#search_submit {
outline: 0;
height: 40px;
float: right;
color: #125;
font-size: 18px;
font-weight: 500;
border: none;
background-color: transparent;
padding: 0 13px 0 13px
}
</style>
<style>
html, * {
-webkit-user-select: text !important;
-moz-user-select: text !important;
}
</style>
</head>
<body>
<canvas id="sakura" width="400" height="920"></canvas>
<div id="content" style="z-index: 2;position: relative;">
<br>
<div class="search_part">
<br>
<form id="search_form" onsubmit="return search()" class="search_bar">
<input type="submit" id="search_submit" value="✢">
<span>
<i id="clear" onclick="clear_seach()"></i>
<div class="si">
<input class="search" type="text" value="" onkeyup="get_suggest()" onfocus="get_suggest()" onpaste="get_suggest()" autocomplete="off" id="search_input" placeholder="✎...">
</div>
</span>
<div id="suggest" style="display:none">
<ul id="suglist">
</ul>
<div class="close" onclick="close_sug()">| 收起</div>
</div>
</form>
</div>
<br>
<div class="box">
<a href="#"></a>
<p><i class="icon fas fa-graduation-cap"></i></p> <!-- Education system -->
<p class="url">学海无涯</p> <!-- “学海无涯”：象征教育的广阔与深远 -->
</div>
<div class="box">
<a href="#"></a>
<p><i class="icon fab fa-forumbee"></i></p> <!-- Forum/Tieba -->
<p class="url">群声共鸣</p> <!-- “群声共鸣”：表达论坛的交流与共振 -->
</div>
<div class="box">
<a href="#"></a>
<p><i class="icon fab fa-google-plus-g"></i></p> <!-- Google Plus -->
<p class="url">连天一脉</p> <!-- “连天一脉”：暗示社交网络的连接性 -->
</div>
<div class="box">
<a href="#"></a>
<p><i class="icon fas fa-image"></i></p> <!-- Pictures -->
<p class="url">光影流年</p> <!-- “光影流年”：描绘图片的时间与美感 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-gamepad"></i></p> <!-- Games -->
<p class="url">幻境逐乐</p> <!-- “幻境逐乐”：游戏世界的奇幻与乐趣 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-music"></i></p> <!-- Music -->
<p class="url">弦动心音</p> <!-- “弦动心音”：音乐触动心灵的意象 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-microphone"></i></p> <!-- Echo/Podcast -->
<p class="url">声波传情</p> <!-- “声波传情”：声音传递情感的诗意 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-fan"></i></p> <!-- Plum blossom/Fan -->
<p class="url">风舞梅香</p> <!-- “风舞梅香”：梅花与风扇的优雅结合 -->
</div>
</div>
<div style="z-index: 1;position: relative;">
<div id="app-items">
<div class="title"> 感动常在 · 2025 </div>
<br>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-book"></i></p> <!-- Novel -->
<p class="url">墨香书韵</p> <!-- “墨香书韵”：小说的文学气息 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-cloud"></i></p> <!-- Cloud storage -->
<p class="url">云端寄梦</p> <!-- “云端寄梦”：云存储的梦幻与寄托 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-envelope"></i></p> <!-- Email -->
<p class="url">信笺传意</p> <!-- “信笺传意”：邮箱传递心意的古典美 -->
</div>
<div class="box">
<a href=""></a>
<p><i class="icon fas fa-globe"></i></p> <!-- Web app -->
<p class="url">寰宇漫游</p> <!-- “寰宇漫游”：网络世界的广阔探索 -->
</div>
<div id="yiyan">
<div class="shuxing">
<div id="lwlhitokoto">爱恨两相难，正邪一念间。</div>
</div>
<br>
</div>
</div>
</div>
<script type="text/javascript">
var last_kw = '';
var max_sug_len = 1; //搜索建议最短触发长度
/*获取搜索建议
采用的神马搜索的服务
*/
function get_suggest() {
var kw = document.getElementById('search_input').value;
var clear = document.getElementById('clear');
if (kw) clear.style.display = 'block';
else clear.style.display = 'none';
if (kw == last_kw) return;
last_kw = kw;
if (!kw || kw.length < max_sug_len) {
close_sug();
return;
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://sugs.m.sm.cn/web?t=w&uc_param_str=dnnwnt&scheme=http&fr=android&bid=1&q=' + encodeURIComponent(kw) + '&_=' + new Date().getTime() + '&callback=jsonp3';
var head = document.querySelector('head');
script.onload = function () {
head.removeChild(script);
};
head.appendChild(script);
}
function jsonp3(res) {
var suggest = document.getElementById('suggest');
if (!res.r || !res.r.length) {
suggest.style.display = 'none';
return;
}
var html = '';
res.r.forEach(function (v) {
html += '<li>' + v.w + '<b></b></li>';
});
document.getElementById('suglist').innerHTML = html;
suggest.style.display = 'block';
}
function close_sug() {
last_kw = '';
document.getElementById('suggest').style.display = 'none';
}
function move_input() {
document.body.scrollTop = document.getElementById('search_form').offsetTop - 2;
}
function clear_seach() {
var input = document.getElementById('search_input');
input.value = '';
document.getElementById('clear').style.display = 'none';
close_sug();
input.focus();
}
function search() {
if (document.getElementById("search_input").value != "") {
//window.location.href = "http://m.baidu.com/s?ie=utf-8&rn=30&tn=baiduhome_pg&oq=%E5%BC%A0%E7%B1%BD%E6%B2%90&rsv_enter=0&wd=" + encodeURIComponent(document.getElementById("search_input").value);
window.location.href = "" + encodeURIComponent(document.getElementById("search_input").value) + "";
document.getElementById("search_input").value = "";
} return false;
}
document.getElementById('suglist').addEventListener('click', function (e) {
var input = document.getElementById('search_input');
if (e.target.tagName == 'B') {
input.value = e.target.parentNode.firstChild.textContent;
input.focus();
} else if (e.target.tagName == 'LI') {
input.value = e.target.firstChild.textContent;
close_sug();
search();
}
});
window.addEventListener('resize', move_input);
</script>
<script type="text/javascript">
function search() { if (document.getElementById("search_input").value != "") { window.location.href = "" + document.getElementById("search_input").value; document.getElementById("search_input").value = ""; } return false; }</script>
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uProjection;
uniform mat4 uModelview;
uniform vec3 uResolution;
uniform vec3 uOffset;
uniform vec3 uDOF; //x:focus distance, y:focus radius, z:max radius
uniform vec3 uFade; //x:star.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0