html+css 动态渐变背景

html-css013

html+css 动态渐变背景,第1张

先给背景设置了渐变颜色并且旋转一定角度,实现斜着的渐变效果。

接下来把背景放大500%,然后设置了一个15秒的动画,动画infinite无限循环。

动画部分就是对背景进行一个定位,实现渐变颜色的动态切换。

html结构

css样式

gitee地址: siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)

刚手写的,希望是你要的效果;可以兼容不同浏览器的水平和垂直居中

<body style="margin:0padding:0">

<div style="height:1pxbackground-color:#000position:absolutetop:50%left:0pxwidth:100%"></div>

<div style=" background-color:#000position:absolutetop:50%left:50%width:200pxheight:100pxmargin:-50px 0 0 -100pxbackground-color:#00FFCC">插入图片</div>

</body>

如果你要做的是一个页面的某一部分的话,那就调整top的值,设为固定值就行了

CSS背景图片不滚动的方法<STYLE TYPE=”text/css”<!–BODY {background-image: URL(图片地址)background-position: centerbackground-repeat: no-repeatbackground-attachment: fixed}–</STYLECSS改变滚动条颜色在CSS的BODY里输入:Scrollbar-Face-Color为滚动条表面颜色设定;Scrollbar-Track-Color为滚动条底板颜色设定;Scrollbar-Darkshadow为滚动条下边和右边边沿颜色设定;Scrollbar-Highlight-Color为滚动条上斜面和左斜面颜色设定;Scrollbar-Shadow-Color为滚动条下斜面和右斜面颜色设定;Scrollbar-3Dlight-Color为滚动条上边和左边的边沿颜色设定;Scrollbar-Arrow-Color为滚动条两端箭头颜色设定。例子:<style type=”text/css”body {scrollbar-face-color: #333333scrollbar-shadow-color: #808080scrollbar-highlight-color: #333333scrollbar-3dlight-color: #808080scrollbar-darkshadow-color: #333333