<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Test_Chrome_Scripts</title>
<style>
@import url("https://fonts.googleapis.com/css?family=Aleo");
:root{
font-family: "Aleo",sans-serif;
}
html,
body{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.middle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
user-select: none;
}
.label{
font-size: 2.2rem;
background: url("text_bg.png");
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: moveBg 30s linear infinite;
}
@keyframes moveBg {
0%{
background-position: 0% 30%;
}
100%{
background-position: 1000% 500%;
}
}
.search{
width: 750px;
height: 50px;
margin: auto;
display: flex;
justify-content: center;
align-content: center;
min-width: 750px;
position: relative;
}
input{
width: 550px;
height: 40px;
border-right: none;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #f5f5f5;
/* 去除搜索框激活状态的边框 */
outline: none;
}
input:hover{
/*鼠标移入状态*/
box-shadow: 2px 2px 2px #ccc;
}
input:focus{
/* 选中状态,边框颜色变化 */
border-color: rgb(78, 110, 242);
}
.search span{
position: absolute;
font-size: 23px;
top: 10px;
right: 170px;
}
.search span:hover{
color: rgb(78, 110, 242);
}
button{
width: 100px;
height: 44px;
background-color: rgb(78, 110, 242);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-color: rgb(78, 110, 242);
color: white;
font-size: 14px;
}
.time {
color: #d99c3b;
text-transform: uppercase;
display: flex;
justify-content: center;
}
.time span {
padding: 0 14px;
font-size: 0.8rem;
}
.time span div {
font-size: 3rem;
}
@media (max-width: 740px) {
.label {
font-size: 1.7rem;
}
.time span {
padding: 0 16px;
font-size: 0.6rem;
}
.time span div {
font-size: 2rem;
}
}
</style>
<!-- <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> -->
<script src="jquery.min.js"></script>
<script type="text/javascript" src="canvas.js"></script>
<body>
<canvas id="c" style="position:absolute;z-index:-1;text-align:center"></canvas>
<div class="middle">
<h1 class="label">Every Day About You!</h1>
<div class="search">
<input type="text" id="input">
<button>百度一下</button>
</div>
<div class="time">
<span>
<div id="d">
00
</div>
Love day
</span><span>
<div id="h">
00
</div>
FFirst Met
</span><span>
<div id="m">
00
</div>
birthday
</span><span>
<div id="s">
00
</div>
age
</span>
</div>
</div>
<script>
var input=document.getElementById("input")
var btn=document.querySelector("button")
btn.addEventListener('click',function(){
location.href='http://www.baidu.com/s?wd='+input.value
})
</script>
<script type="text/javascript" src="demo.js"></script>
</body>
</head>
</html>
七夕表白Chrome插件
需积分: 9 60 浏览量
2022-07-28
14:48:00
上传
评论
收藏 53KB ZIP 举报
plugins.zip （8个子文件） 
jquery.min.js 91KB manifest.json 610B
ex_icon.png 2KB demo.js 418B canvas.js 4KB text_bg01.png 444B
demo.html 5KB text_bg.png 14KB
评论0