登录  /  注册
首页 > web前端 > css教程 > 正文

CSS3自适应全屏焦点图切换的特效怎么做

php中世界最好的语言
发布： 2017-11-24 13:37:17
原创
1648人浏览过

给大家带来用纯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 &amp; Consulting</a></li>
                                               <li><a href="#bg3">My haire is sooo fantastic!</a></li>
                                               <li><a href="#bg4">Eat healthy &amp; 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中文网其它相关文章！

相关阅读：

CSS3有哪些新增的背景属性

怎么用CSS3媒体查询

css3的弹性盒怎么做出来

以上就是CSS3自适应全屏焦点图切换的特效怎么做的详细内容，更多请关注php中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
来源：php中文网
收藏 点赞
上一篇：CSS3常用的几种选择器 下一篇：css3怎么做幻灯片切换动画效果
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
mysqld遇到异常0xc0000005 抱歉，我的英语不流利。我是MySQL数据库的新手。我在WindowsServer2022Datacenter上使用MySQL8.0.30。我有一个问题，MySQL经常崩溃（MySQ...
P粉026665919来自于2023-12-29 19:58:06
0 1 155
重写后的标题为：How can I access the Pinia store in a child VueJS application? 我正在创建一个库，以便在其他几个项目中重用VueJS应用程序。它是一个在任何VueJS项目中生成和显示表单的插件。我使用pinia作为这个库中的商店并使用Vite来构建它。如何使库...
P粉680487967来自于2023-12-29 18:52:03
0 1 266
为什么我在发出请求时在 Shopify 应用程序中收到“无效会话令牌”错误？ 我正在尝试从我的shopify应用程序发出请求，将方法发布到我的后端，即laravel和我的前端vue.js，我正在使用Inertia，我明白了。
P粉021708275来自于2023-12-29 17:55:41
0 1 130
如何使用变量作为图像 src - vue.js 我是Vue新手，做了一些html和css，我想使用一个变量作为图像目录，但图像从未加载，该变量正在由一个有效的tauri函数更新，我需要图像也会改变。这是我的一些代码<tem...
P粉148434742来自于2023-12-29 16:42:56
0 1 264
Capacitor-JS 状态栏在 IOS 中重叠 我正在使用带有电容器的NuxtJS。当我们滚动时，IOS设备上的顶部状态栏会重叠。我还在Capacitor.config.json中添加了"ios":{&quo...
P粉543344381来自于2023-12-29 16:04:36
0 1 143
从特定 WooCommerce 电子邮件通知中排除帐单地址，仅显示送货地址 “woocommerce_email_customer_details”操作包含帐单地址和送货地址数据。我只需要送货地址。我怎样才能实现这个目标？以下是我当前的“新订单”电子邮件纯...
P粉071626364来自于2023-12-29 14:46:55
0 1 194
如何使用PHP搜索和筛选表格中的数据？ 我想搜索和过滤表中的数据，但我不知道该怎么做，因为我目前正在学习php。这是我用于搜索数据的php脚本<?phprequire('./conn.php');if(isset(...
P粉287726308来自于2023-12-29 14:08:25
0 1 239
创建 Firebase Messaging 访问令牌 我可以使用下面的CURL请求通过FirebaseMessaging发送通知。我当前正在使用OAuth2.0Playground来获取访问令牌。我需要实现一个PHP脚本来执行此操作。...
P粉178132828来自于2023-12-29 13:01:24
0 1 139
标题重写为：拒绝访问：用户名'username'@'localhost'的用户（未使用密码）错误1045（28000） 我将网站从一台主机移至另一台主机，并且两者都在Cpanel上，但当我打开网站时出现此错误CodeIgniter\Database\Exceptions\DatabaseExcept...
P粉336536706来自于2023-12-29 12:05:27
0 1 245
导航守卫遇到无限重定向错误：未捕获（承诺） 我有一个使用以下路由定义的vue3路由器constroutes=[{path:"/",name:"home",component:HomeV...
P粉291886842来自于2023-12-29 09:53:57
0 1 163
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号

登录PHP中文网，和优秀的人一起学习！
全站2000+教程免费学
微信扫码登录

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部