純粋な CSS3 を使用して、フルスクリーンの背景切り替えフォーカス画像効果を実現するには、JS コードを使用せずに、シンプルで理解しやすく、必要な友人が直接移動することができます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自适应全屏焦点图切换CSS3特效代码</title>
<meta name="keywords" content="自适应,全屏,焦点图,切换,CSS3,特效代码" />
<meta name="description" content="自适应全屏焦点图切换CSS3特效代码，纯CSS实现不用任何js代码。" />
<style>
*{margin:0;padding:0;list-style: none;}
img.bg{min-width: 1024px;min-height: 100%;width: 100%;height: auto!important;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;}
@media screen and (max-width: 1024px) {
img.bg{
left: 50%;
margin-left: -512px;
}
}
.slider{
position: absolute;
width: 100%;
text-align: center;
z-index: 999;
bottom: 100px;
}
.slider li{
display: inline-block;
width: 170px;
height: 130px;
margin-right: 15px;
}
.slider a{
display: inline-block;
width: 170px;
padding-top:70px;
padding-bottom:20px;
position: relative;
cursor: pointer;
border:2px solid #fff;
border-radius: 5px;
vertical-align: top;/*设置元素的垂直对齐方式。*/
color: #FFFFFF;
text-decoration: none;
font-size: 22px;
font-family: "楷体";
text-shadow: -1px -1px 1px rgba(0,0,0,0.8),
-2px -2px 1px rgba(0, 0, 0, 0.3),
-3px -3px 1px rgba(0, 0, 0, 0.3);
}
.slider li:nth-of-type(1) a{
background-color: #02646e;
}
.slider li:nth-of-type(2) a{
background-color: #eb0837;
}
.slider li:nth-of-type(3) a {
background-color: #67b374;
}
.slider li:nth-of-type(4) a {
background-color: #e6674a;
}
.slider li:nth-of-type(5) a {
background-color: #e61061;
}
.slider a::after{/*:after 选择器在被选元素的内容后面插入内容。*/
content: "";
display: block;
height: 120px;
width: 120px;
border:5px solid #fff;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -60px;
z-index: 9999;
top: -80px;
}
.slider li:nth-of-type(1) a::after {
/*:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.*/
background: url(img/sbg1.jpg) no-repeat center;
}
.slider li:nth-of-type(2) a::after {
background: url(img/sbg2.jpg) no-repeat center;
}
.slider li:nth-of-type(3) a::after {
background: url(img/sbg3.jpg) no-repeat center;
}
.slider li:nth-of-type(4) a::after {
background: url(img/sbg4.jpg) no-repeat center;
}
.slider li:nth-of-type(5) a::after {
background: url(img/sbg5.jpg) no-repeat center;
}
.slider a::before{
content: "";
display: block;
height: 120px;
width: 120px;
border:5px solid #fff;
border-radius: 50%;
position: absolute;
left: 50%;
margin-left: -60px;
z-index: 99999;
top: -80px;
background:rgba(0,0,0,0.3);
}
.slider a:hover::before{
opacity: 0;
}
@-webkit-keyframes 'slideLeft'{
0%{
left:-500px;
}
100%{
left:0;
}
}
.slideLeft:target{
/*:target 选择器可用于选取当前活动的目标元素*/
z-index: 100;
animation: slideLeft 1s 1;
-webkit-animation: slideLeft 1s 1;
}
@-webkit-keyframes 'slideBottom'{
0%{
top:350px;
}
100%{
top:0;
}
}
.slideBottom:target{
/*:target 选择器可用于选取当前活动的目标元素*/
z-index: 100;
animation: slideBottom 1s 1;
-webkit-animation: slideBottom 1s 1;
}
@-webkit-keyframes 'zoomIn' {
0% {
-webkit-transform: scale(0.1);
}
100% {
-webkit-transform: none;
}
}
.zoomIn:target {
z-index: 100;
-webkit-animation: zoomIn 1s 1;
animation: zoomIn 1s 1;
}
/* Zoom Out */
@-webkit-keyframes 'zoomOut' {
0% {
-webkit-transform: scale(2);
}
100% {
-webkit-transform: none;
}
}
.zoomOut:target {
z-index: 100;
-webkit-animation: zoomOut 1s 1;
animation: zoomOut 1s 1;
}
/* Rotate */
@-webkit-keyframes 'rotate' {
0% {
-webkit-transform: rotate(-360deg) scale(0.1);
}
100% {
-webkit-transform: none;
}
}
.rotate:target {
z-index: 100;
-webkit-animation: rotate 1s 1;
animation: rotate 1s 1;
}
@-webkit-keyframes 'notTarget' {
0% {
z-index: 75;
}
100% {
z-index: 75;
}
}
.bg:not(:target) {
-webkit-animation: notTarget 1s 1;
animation: notTarget 1s 1
}
.page {
text-align:left;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#bg1">Hipster Fashion Haircut</a></li>
<li><a href="#bg2">Cloud Computing Services & Consulting</a></li>
<li><a href="#bg3">My haire is sooo fantastic!</a></li>
<li><a href="#bg4">Eat healthy & excersice!</a></li>
<li><a href="#bg5">Lips so kissable I could die ...</a></li>
</ul>
</div>
<img src="img/bg1.jpg" class="bg slideLeft" id="bg1" />
<img src="img/bg2.jpg" class="bg slideBottom" id="bg2" />
<img src="img/bg3.jpg" class="bg zoomIn" id="bg3" />
<img src="img/bg4.jpg" class="bg zoomOut" id="bg4" />
<img src="img/bg5.jpg" class="bg rotate" id="bg5" />
</body>
</html>を見てみましょう。適応型フルスクリーン フォーカス マップ切り替えには、非常に多くの特殊効果があります。さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注目ください。
関連記事:
以上がCSS3 アダプティブフルスクリーンフォーカス画像切り替え特殊効果の作り方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
