介绍 & lt; html>
& lt; head>
,,,& lt; title> & lt;/title>
,,,& lt; style 类型=拔谋?css"比;
,,,,,,,*,{,保证金:0;,填充:,0;,边境,,没有,,},
,,,,,,,.Bl {
,,,,,,,,,,,宽度:,600 px,,
,,,,,,,,,,,身高:,540 px,,
,,,,,,,,,,,保证金:,0,汽车;
,,,,,,,,,,,位置:,相对;
,,,,,,,,,,,:,50%;
,,,,,,,,,,,变换:,translateY (-50%);
,,,,,,,}
,,,,,,,.Bl 祝辞,input {
,,,,,,,,,,,宽度:,20%;
,,,,,,,,,,,身高:,40像素;
,,,,,,,,,,,位置:,绝对;
,,,,,,,,,,,光标:,指针;
,,,,,,,,,,,不透明度:,0;
,,,,,,,}
,,,,,,,.Bl 输入:nth-of-type(1){,左:0%,,}
,,,,,,,.Bl 输入:nth-of-type(2){,左:20%,,}
,,,,,,,.Bl 输入:nth-of-type(3){,左:40%,,}
,,,,,,,.Bl 输入:nth-of-type(4){,左:60%,,}
,,,,,,,.Bl 输入:nth-of-type(5){,左:80%,,}
,,,,,,,/*切换效果*/,,,,,,,.Bl 输入:nth-of-type (1): checked ~,跨度:nth-of-type(1),{,颜色:白色,,},,/*,~,选择兄弟元素,*/,,,,,,,.Bl 输入:nth-of-type (2): checked ~,跨度:nth-of-type(2),{,颜色:白色,,}
,,,,,,,.Bl 输入:nth-of-type (3): checked ~,跨度:nth-of-type(3),{,颜色:白色,,}
,,,,,,,.Bl 输入:nth-of-type (4): checked ~,跨度:nth-of-type(4),{,颜色:白色,,}
,,,,,,,.Bl 输入:nth-of-type (5): checked ~,跨度:nth-of-type(5),{,颜色:白色,,}
,,,,,,,.Bl 输入:nth-of-type (1): checked ~, .pagebox 祝辞,.pages {,,},,,
,,,,,,,.Bl 输入:nth-of-type (2): checked ~, .pagebox 祝辞,.pages {,变换:translateY (-100%);,}
,,,,,,,.Bl 输入:nth-of-type (3): checked ~, .pagebox 祝辞,.pages {,变换:translateY (-200%);,}
,,,,,,,.Bl 输入:nth-of-type (4): checked ~, .pagebox 祝辞,.pages {,变换:translateY (-300%);,}
,,,,,,,.Bl 输入:nth-of-type (5): checked ~, .pagebox 祝辞,.pages {,变换:translateY (-400%);,}
,,,,,,,span {,
,,,,,,,,,,,显示:,块;
,,,,,,,,,,,宽度:,20%;
,,,,,,,,,,,身高:,40 px;,
,,,,,,,,,,,,背景颜色:红色;
,,,,,,,,,,,:浮动,离开;
,,,,,,,,,,,text-align:,中心;
,,,,,,,,,,,行高:,40像素;
,,,,,,,,,,,,字体大小:20 px;
,,,,,,,}
,,,,,,,.pagebox .pages {
,,,,,,,,,,,宽度:,100%,,
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
今天就跟大家聊聊有关使用CSS3怎么实现一个页面切换效果,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
