html调整栅格图片的间隙,栅格拆解图片效果.html-CSDN博客

潇涵起始页

* {

padding: 0;

margin: 0;

}

body {

overflow: hidden;

}

#imgbg {

position: absolute;

left: 0;

top: 0;

width: 100%;

height: 100%;

background: url('images/风景7.jpg') no-repeat;

background-size: 100% 730px;

background-position-y: 0px;

background-position-x: center;

transition: all .3s ease-in-out;

}

.search {

text-align: center;

z-index: 999;

position: absolute;

width: 800px;

height: 500px;

left: 50%;

top: 50%;

transform: translate(-50%, -50%);

/* background: rgba(255, 255, 255, 0.5); */

/* border-radius: 25px; */

/* box-shadow: 0px 0px 200px 0px rgba(255, 255, 255, 0.5); */

/* backdrop-filter: blur(10px); */

}

#inputSearch {

border: none;

outline: none;

width: 250px;

text-align: center;

background-color: rgba(255, 255, 255, .25);

box-shadow: rgba(0, 0, 0, .2) 0 0 10px;

border-radius: 25px;

height: 50px;

transition: all .25s ease-out;

font-size: small;

backdrop-filter: blur(10px);

color: rgba(255, 255, 255, 0.9);

display: inline-block;

}

#time {

display: inline-block;

color: rgba(255, 255, 255, 0.9);

font-size: 60px;

cursor: pointer;

margin: 20px 0px 50px 0px;

transition: all .5s ease-in-out;

font-family: Georgia, 'Times New Roman', Times, serif;

}

#time:hover {

animation: times 1s ease-in infinite;

}

@keyframes times {

0% {

transform: scale(1);

}

25% {

transform: scale(1.1);

}

50% {

transform: scale(1.2);

}

75% {

transform: scale(1.1);

}

100% {

transform: scale(1);

}

.cover {

z-index: 1;

opacity: 0;

position: fixed;

left: 0;

top: 0;

width: 100%;

height: 100%;

background-image: radial-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.3) 166%);

transition: all .5s;

}

#tag {

width: 100%;

height: 110px;

position: absolute;

background-color: rgba(0, 0, 0, 0.4);

backdrop-filter: blur(10px);

bottom: 70px;

text-align: center;

padding-top: 30px;

color: rgba(255, 255, 255, 0.8);

visibility: hidden;

cursor: pointer;

z-index: 9999;

}

#resultSearch>ul>li:nth-child(1) {

border-top-right-radius: 25px;

border-top-left-radius: 25px;

}

#resultSearch>ul>li:nth-child(11) {

border-bottom-left-radius: 25px;

border-bottom-right-radius: 25px;

}

#resultSearch>ul>li {

background-color: rgba(255, 255, 255, .25);

box-shadow: rgba(0, 0, 0, .2) 0 0 10px;

backdrop-filter: blur(10px);

list-style: none;

float: left;

display: inline-block;

text-align: left;

padding-left: 40px;

line-height: 30px;

cursor: pointer;

color: rgba(255, 255, 255, .8);

transition: background-color .03s ease-in, padding-left .5s ease-in-out;

border-bottom: solid 1px transparent;

display: none;

width: 460px;

height: 30px;

}

#resultSearch>ul>li:hover {

background-color: rgba(255, 255, 255, .45);

padding-left: 50px;

}

#resultSearch {

position: absolute;

left: 50%;

transform: translateX(-50%);

top: 200px;

width: 500px;

}

#navboxCustom {

position: absolute;

width: 560px;

height: 400px;

left: 50%;

top: 65%;

float: left;

transform: translate(-50%, -50%);

display: none;

background-color: rgba(255, 255, 255, .2);

border-radius: 25px;

backdrop-filter: blur(30px);

}

.shouldNotSwitch {

display: inline-block;

float: left;

backdrop-filter: blur(5px);

background-color: rgba(255, 255, 255, .45);

border-radius: 20px;

width: 80px;

margin: 30px;

height: 80px;

text-align: center;

cursor: pointer;

transition: all .3s ease-in;

}

.shouldNotSwitch:hover {

background-color: rgba(255, 255, 255, .75);

}

.imgiocn {

margin-top: 15px;

width: 50px;

height: 50px;

}

.spaniocn {

width: 4em;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

font-size: 15px;

color: white;

position: absolute;

bottom: -25px;

left: 50%;

transform: translateX(-50%);

}

翻译

地图

图片

邮箱

云盘

翻译:1
2
3
4
5
6
7
8
9
0
1

「平生不下泪，于此泣无穷。」

——江夏别宋之悌

var inputSearch = document.getElementById('inputSearch');

//获取结果集对象

var li = document.getElementsByClassName('resultSearchLi');

for (var i = 0; i < li.length; i++) {

li[i].addEventListener('click', function() {

for (var i = 0; i < li.length; i++) {

if (this == li[i]) {

if (i == 0) {

location.href = 'https://fanyi.baidu.com/#en/zh/' + li[i].innerHTML.substring(3, li[i].innerHTML.length);

}

location.href = 'https://www.baidu.com/s?wd=' + li[i].innerHTML;

}

})

}

inputSearch.addEventListener('keydown', function(e) {

var strLength = inputSearch.value.length + 1;

var aaaa = 1;

if (e.keyCode == 8 && strLength == 1) {

console.log(aaaa);

aaaa = aaaa - 2;

}

if (strLength > 0) {

window.removeEventListener('keydown', windowEventListener);

ptag[0].style.visibility = 'hidden';

ptag[1].style.visibility = 'hidden';

tag.style.visibility = 'hidden';

for (var i = 0; i < li.length; i++) {

li[i].style.display = 'block';

}

if (aaaa < 0) {

for (var i = 0; i < li.length; i++) {

li[i].style.display = 'none';

}

});

var windowEventListener = function(e) {

if (e.keyCode) {

ptag[0].style.visibility = 'visible';

imgbg.style.filter = 'blur(1.3px)';

imgbg.style.transform = 'scale(1.1)';

cover.style.opacity = 1;

inputSearch.style.width = '500px';

inputSearch.style.color = 'rgba(0, 0, 0, 0.8)';

inputSearch.removeEventListener('mouseleave', aa);

inputSearch.focus();

}

if (e.keyCode == 13) {

location.href = 'https://www.baidu.com/s?wd=' + inputSearch.value; // s代表搜索，wd代表word

}

};

window.addEventListener('keydown', windowEventListener);

//禁止打开菜单鼠标事件

document.addEventListener('contextmenu', function(e) {

e.preventDefault();

})

var time = document.getElementById('time');

var inputSearch = document.getElementById('inputSearch');

var imgbg = document.getElementById('imgbg');

var cover = document.getElementById('cover');

var tag = document.getElementById('tag');

var ptag = document.getElementsByClassName('ptag');

var navboxCustom = document.getElementById('navboxCustom');

//1代表打开链接列表、0表示打开搜索

var timeFlag = 1;

time.addEventListener('click', function() {

//打开链接列表

if (timeFlag == 1) {

navboxCustom.style.display = 'block';

imgbg.style.filter = 'blur(1.3px)';

imgbg.style.transform = 'scale(1.1)';

inputSearch.style.display = 'none';

timeFlag = 0;

return;

}

//打开搜索引擎

if (timeFlag == 0) {

navboxCustom.style.display = 'none';

imgbg.style.filter = 'blur(0px)';

imgbg.style.transform = 'scale(1)';

inputSearch.style.display = 'inline-block';

timeFlag = 1;

return;

}

});

inputSearch.value = 'Search';

inputSearch.addEventListener('mouseenter', function() {

this.style.width = '500px';

this.style.color = 'rgba(0, 0, 0, 0.8)';

});

var aa = function() {

this.style.width = '250px';

this.style.color = ' rgba(255, 255, 255, 0.9)';

};

inputSearch.addEventListener('mouseleave', aa);

tag.addEventListener('mouseout', function() {

inputSearch.focus();

ptag[0].style.visibility = 'visible';

imgbg.style.filter = 'blur(1.3px)';

imgbg.style.transform = 'scale(1.1)';

cover.style.opacity = 1;

inputSearch.value = '';

inputSearch.style.width = '500px';

inputSearch.style.color = 'rgba(0, 0, 0, 0.8)';

tag.style.background = 'rgba(255, 255, 255, 0.25)';

});

//申明全局变量

var timeStart, timeEnd, mouseDownSetInterval;

//获取此刻时间

function getTimeNow() {

var now = new Date();

return now.getTime();

}

tag.addEventListener('mousedown', function() {

//获取鼠标按下时的时间

timeStart = getTimeNow();

//setInterval会每100毫秒执行一次，也就是每100毫秒获取一次时间

mouseDownSetInterval = setInterval(function() {

timeEnd = getTimeNow();

//字体变红

tag.style.background = 'linear-gradient(90deg, green, #CD5C5C, pink, #1E90FF)';

//如果此时检测到的时间与第一次获取的时间差有1000毫秒

if (timeEnd - timeStart > 1000) {

console.log(timeEnd);

console.log(timeStart);

//便不再继续重复此函数 (clearInterval取消周期性执行)

clearInterval(mouseDownSetInterval);

}

}, 100);

});

tag.addEventListener('mouseup', function() {

clearInterval(mouseDownSetInterval);

tag.style.background = 'none';

tag.style.background = 'rgba(255, 255, 255, .25)';

});

tag.addEventListener('mouseleave', function() {

ptag[1].style.visibility = 'hidden';

tag.style.visibility = 'hidden';

});

tag.addEventListener('mouseenter', function() {

ptag[1].style.visibility = 'visible';

tag.style.visibility = 'visible';

});

//获取焦点

inputSearch.addEventListener('focus', function() {

ptag[0].style.visibility = 'visible';

imgbg.style.filter = 'blur(1.3px)';

imgbg.style.transform = 'scale(1.1)';

cover.style.opacity = 1;

inputSearch.value = '';

this.style.width = '500px';

this.style.color = 'rgba(0, 0, 0, 0.8)';

inputSearch.removeEventListener('mouseleave', aa);

});

//失去焦点

var onblurs = function() {

for (var i = 0; i < li.length; i++) {

li[i].style.display = 'none';

}

ptag[0].style.visibility = 'hidden';

ptag[1].style.visibility = 'hidden';

this.style = '';

tag.style.visibility = 'hidden';

this.style.width = '250px';

cover.style.opacity = 0;

this.style.color = ' rgba(255, 255, 255, 0.9)';

inputSearch.addEventListener('mouseleave', aa);

inputSearch.value = 'Search';

imgbg.style.filter = 'blur(0px)';

imgbg.style.transform = 'scale(1)';

};

inputSearch.addEventListener('blur', function() {

setTimeout(onblurs, 100);

});

var timeStart = function() {

var date = new Date();

time.innerHTML = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':' + (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());

};

timeStart();

setInterval(timeStart, 1000);

一键复制

编辑

Web IDE

原始数据

按行查看

历史