html如何实现关键词搜索,使用JS实现关键词搜索时页面文本实时高亮

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=Lato:300);

body {

background: linear-gradient(to bottom, #222 0%, #2f2f2f 50%, #222 100%);

padding: 0;

margin: 0;

height: 100vh;

width: 100vw;

color: #fff8d6;

font-family: 'Lato', sans-serif;

line-height: 200%;

font-size: 24px;

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

blockquote {

width: 50%;

max-width: 1000px;

}

input {

background: #ff5500;

border: solid 1px #ffa76b;

padding: 10px;

font-family: 'Lato', sans-serif;

color: #fff8d6;

font-size: 32px;

width: 40%;

max-width: 800px;

}

input:focus {

outline: solid 1px #fff8d6;

}

input::-webkit-input-placeholder {

color: #ff9656;

}

input:-moz-placeholder {

/* Firefox 18- */

color: #ff9656;

}

input::-moz-placeholder {

/* Firefox 19+ */

color: #ff9656;

}

input:-ms-input-placeholder {

color: #ff9656;

}

span {

background: linear-gradient(to bottom, rgba(255, 85, 0, 0) 0%, rgba(255, 85, 0, 0) 45%, #ff5500 45%, #ff5500 75%, rgba(255, 85, 0, 0) 75%, rgba(255, 85, 0, 0) 100%);

}