html背景自动切换带滚动,HTML5 带滚动切换动画网页模板-优快云博客

本文介绍了一种使用CSS来实现元素的动画效果和可见性控制的方法。通过定义关键帧动画和利用opacity及transform属性，可以平滑地展示和隐藏不同部分的内容。此外，还展示了如何设置初始状态为不可见并在适当的时候应用可见性类来触发动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

语言：

CSSSCSS

确定

body {

line-height: 1.7;

font-size: 1.125rem;

}

.header {

-webkit-transition: opacity 0.6s;

-moz-transition: opacity 0.6s;

transition: opacity 0.6s;

height: 400px;

background-color: #cc4;

padding: 5%;

opacity: 0;

}

.header-title {

font-size: 3rem;

color: #fff;

}

.header-txt {

color: #eee;

}

.sec1,

.sec2,

.sec3 {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

min-height: 320px;

padding: 5%;

visibility: hidden;

}

.sec1-title,

.sec2-title,

.sec3-title {

font-size: 3rem;

color: #fff;

}

.sec1-txt,

.sec2-txt,

.sec3-txt {

color: #eee;

margin-bottom: 30px;

}

.visible.sec1,

.visible.sec2,

.visible.sec3 {

visibility: visible;

-webkit-animation: animation_section 0.6s ease-out 0s forwards;

-moz-animation: animation_section 0.6s ease-out 0s forwards;

animation: animation_section 0.6s ease-out 0s forwards;

}

@-webkit-keyframes animation_section {

0% {

-webkit-transform: scale(0);

}

50% {

-webkit-transform: scale(1.1);

}

75% {

-webkit-transform: scale(0.95);

}

100% {

-webkit-transform: scale(1);

}

@-moz-keyframes animation_section {

0% {

-moz-transform: scale(0);

}

50% {

-moz-transform: scale(1.1);

}

75% {

-moz-transform: scale(0.95);

}

100% {

-moz-transform: scale(1);

}

@keyframes animation_section {

0% {

-webkit-transform: scale(0);

-moz-transform: scale(0);

-ms-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

}

50% {

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

}

75% {

-webkit-transform: scale(0.95);

-moz-transform: scale(0.95);

-ms-transform: scale(0.95);

-o-transform: scale(0.95);

transform: scale(0.95);

}

100% {

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

}

.sec1 {

background-color: #44c;

}

.sec2 {

background-color: #4c4;

}

.sec3 {

background-color: #c44;

}