html 滚动切换背景,在滚动页面时渐变切换背景色

CSS

语言：

CSSSCSS

确定

/* Setting fade transition and default settings */

body {

color: #000;

background-color: #f4f4f4;

transition: background-color 1s ease;

}

/* panel styles */

.panel {

/* min height incase content is higher than window height */

min-height: 100vh;

display: flex;

justify-content: space-around;

align-items: center;

font-family: sans-serif;

/* outline: 10px solid hotpink; */

/* turn above on to see the edge of panels */

}

/* colours */

.color-violet {

background-color: #7A4EAB;

}

.color-indigo {

background-color: #4332CF;

}

.color-blue {

background-color: #2F8FED;

}

.color-green {

background-color: #4DCF42;

}

.color-yellow {

background-color: #FAEB33;

}

.color-orange {

background-color: #F19031;

}

.color-red {

background-color: #F2293A;

}

/* styling for demo, can ignore */

body {

text-align: center;

font-size: 120%;

line-height: 1.618;

}

h1,

h2 {

font-size: 3em;

letter-spacing: -0.05em;

line-height: 1.1;

}

p {

max-width: 30em;

margin-bottom: 1.618em;

}

a {

color: #4332CF;

}

html 滚动切换背景,在滚动页面时渐变切换背景色相关推荐

自动切换背景的登录页面
自动切换背景的登录页面有趣的小案例池子: JS实现定时器 JS实现关闭图片窗口 JS实现输入检验获取焦点后隐藏提示内容的输入框 JS实现获取鼠标在画布中的位置聊天信息框显示消息 JS点击切换背景 ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
python切换前端的iframe页面_如何切换到iframe窗口？
我正在尝试单击一个iframe弹出窗口,但无法使其成为焦点.在这是弹出窗口和我要单击的按钮: 以下是我目前掌握的代码: 搜索=driver.find_元素('//*[@id="comman ...
当鼠标移入时切换背景图时闪烁的问题
当页面第一次加载完成时,鼠标移入时需要切换的背景图还未被加载过,本地没有这张图片,所以切换的时候回出现闪烁的情况,我们可以在一个地方先把这张图放下,但是不让它显示出来,这样当我们第一次加载完页面时需要 ...
Android ListView 自定义背景后滚动时的背景变黑问题
ListView是常用的显示控件,默认背景是和系统窗口一样的透明色,如果给ListView加上背景图片,或者背景颜色时,滚动时listView会黑掉,原因是,滚动时,列表里面的view重绘时,用的依旧 ...
vue返回上一页面时记忆回到原先滚动的位置
因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: 1. 在App.vue中加入: <template><div id="a ...
背景图片随页面滚动放大缩小
我是用jq写的所以先引入了jquery.js剩下的就是和我之前写的头部导航栏差不多是一样的 $(window).scroll(function() {//首先监听页面滚动 p = $(this).sc ...
前端实现滑动页面动态切换背景图片的炫酷效果
我发现好的网站都用了如下GIF的模块与背景图片切换的效果,这让在下心痒痒的,所以自己动手写了一遍发现蛮简单的,分享给大家! 思路说明: 首先我的思路是介个样子的:先让一个空的宽度高度都占满的div孩子 ...
vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面
内容: 一般要求鼠标禁止滑轮滚动页面时,需要实现页面点击滚动,跌跌撞撞,走了很多弯路实现了wwwwww vue代码: // 首先在需要的滑动的页面上d的主标签加鼠标禁止事件, @touchmove.p ...

html 滚动切换背景,在滚动页面时渐变切换背景色

html 滚动切换背景,在滚动页面时渐变切换背景色相关推荐

最新文章

热门文章

html 滚动 切换背景,在滚动页面时渐变切换背景色

html 滚动 切换背景,在滚动页面时渐变切换背景色相关推荐

最新文章

热门文章

html 滚动切换背景,在滚动页面时渐变切换背景色

html 滚动切换背景,在滚动页面时渐变切换背景色相关推荐