沈阳做网站,网站建设的大作业代码,网站维护一次一般要多久,模板免费下载网址文章目录 效果过程代码htmlcss 其他demo
效果 效果预览#xff1a;https://codepen.io/karshey/pen/OJrXZwQ
过程
注意#xff0c;直接在body上加height:100%可能也会出现height为0的情况#xff0c;这是需要令html的height:100%
代码
html
!DOCTYPE html
https://codepen.io/karshey/pen/OJrXZwQ
过程
注意直接在body上加height:100%可能也会出现height为0的情况这是需要令html的height:100%
代码
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS-Color-Changing-Background/titlelink relstylesheet hrefstyle.css
/head
body/body
/htmlcss
html {/* 若没有这行可能导致body的height为0 *//* Edge浏览器中没有这行body也有高度且占满整行 */height: 100%;
}body {height: 100%;animation-name: colorChange;animation-duration: 10s;animation-iteration-count: infinite;animation-delay: 0s;background-color: rgb(255, 255, 255);
}keyframes colorChange {0% {background-image: linear-gradient(120deg, #a18cd1 0%, #fbc2eb 100%);}20% {background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);}30% {background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);}40% {background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);}50% {background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}60% {background-image: linear-gradient(120deg, #0fd850 0%, #f9f047 100%);}70% {background-image: linear-gradient(120deg, #b224ef 0%, #7579ff 100%);}80% {background-image: linear-gradient(120deg, #df89b5 0%, #bfd9fe 100%);}100% {background-image: linear-gradient(to right, #0acffe 0%, #495aff 100%);}
}
