css实现春夏秋冬四季循环风景幻灯切换动画效果代码
代码语言:html
所属分类:动画
代码描述:css实现春夏秋冬四季循环风景幻灯切换动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { display: flex; align-items: center; justify-content: center; height: 100vh; background-color: #718355; } .four-seasons { position: relative; } .window { position: relative; overflow: hidden; width: 330px; height: 250px; border: 10px solid white; } .r-button1, .r-button2, .r-button3, .r-button4 { position: relative; display: block; border-radius: 50%; background-color: transparent; cursor: pointer; border: 3px solid #dad7cd; transition: .3s; width:10px; height: 10px; z-index:10; top:210px; } .r-button1:before, .r-button2:before, .r-button3:before, .r-button4:before { content:""; position: absolute; height:7px; width:7px; background-color: transparent; transform: translate(-50%, -50%); left:50%; top:50%; border-radius:50%; } .r-button1 { left:115px; } .r-button2 { left:145px; } .r-button3 { left: 175px; } .r-button4 { left: 205px; } input#spring:checked ~ .spring { display: block; z-index:1; } input#summer:checked ~ .summer { display: block; z-index:1; } input#autumn:checked ~ .autumn { display: block; z-index:1; } input#winter:checked ~ .winter { display: block; z-index:1; } input { opacity: 0; cursor: pointer; display: block; position: absolute; outline: none; left: 0; z-index: 10; } input[type=radio]:checked + label .r-button1:before { background-color: #dad7cd; } input[type=radio]:checked:hover + label .r-button1:before { background-color: #a3b18a; } input[type=radio]:hover + label .r-button1 { border-color: #a3b18a; } input[type=radio]:checked + label .r-button2:before { background-color: #dad7cd; } input[type=radio]:checked:hover + label .r-button2:before { background-color: #a3b18a; } input[type=radio]:hover + label .r-button2 { border-color: #a3b18a; } input[type=radio]:checked + label .r-button3:before { background-color: #dad7cd; } input[type=radio]:checked:hover + label .r-button3:before { background-color: #a3b18a; } input[type=radio]:hover + label .r-button3 { border-color: #a3b18a; } input[type=radio]:checked + label .r-button4:before { background-color: #dad7cd; } input[type=radio]:checked:hover + label .r-button4:before { background-color: #a3b18a; } input[type=radio]:hover + label .r-button4 { border-color: #a3b18a; } .spring, .summer, .autumn, .winter { position: absolute; width: 330px; height: 250px; transition: .3s; } .spring { background-color: #00b4d8; } .summer { background-color: #48cae4; } .autumn { background-color: #61a5c2; } .winter { background-color: #caf0f8; } .spring:before, .summer:before, .autumn:before, .winter:before { content:""; position: absolute; width:450px; height: 200px; border-radius:50%; left:-70px; top:160px; } .spring:after, .summer:after, .autumn:after, .winter:after { content:""; position: absolute; } .spring:before { background-color: #70e000; box-shadow: -150px -25px #38b000, 10.........完整代码请登录后点击上方下载按钮下载查看
网友评论0