html5--个人简历

最新推荐文章于 2021-06-11 11:45:58 发布
最新推荐文章于 2021-06-11 11:45:58 发布
阅读量754 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/aaa199623/article/details/73741620
这段代码展示了如何使用HTML5和CSS3创建一个响应式的个人简历页面，其中包含不同的屏幕尺寸下的布局调整，并通过JavaScript实现页面切换时的动画效果。主要涉及@media查询、Swiper插件以及元素的动画展示。

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

   
   
   
 
    @media screen and (min-width:800px){
        .swiper-container {
            width:530px;
            height:100%;
            margin: 0 auto;
        }

    }
    @media screen and (max-width:800px){
        .swiper-container {
            width: 100%;
            height:100%;
        }
    }
    html, body {
        position: relative;
        height: 100%;
    }
    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color:#000;
        margin: 0;
        padding: 0;
    }
   
       
       
   
    .swiper-slide {
        text-align: center;
        font-size: 18px;

       
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
   
       
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
       
       
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
       
       
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
       
       
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
       
       
            html5--个人简历
            html5--个人简历
            html5--个人简历
            html5--个人简历
       
   
   
   
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        direction: 'vertical',
        watchSlidesProgress : true,
        mousewheelControl:true,
        onInit: function(swiper){
        $(".p1_2").animate({"opacity":"1","width":"73%","height":"48%"},500,
        function(){
        $(".p1_2").addClass("pulse");
        setTimeout(function(){
          $(".p1_2").removeClass("pulse");
          $(".p1_3").animate({"opacity":"1","left":"18%"},200).animate({"left":"14%"},200);
          $(".p1_4").animate({"opacity":"1","right":"20%"},200,
          function(){
          $(".p1_5").animate({"opacity":"1","width":"15%"},1000,
          function(){
          $(".p1_1").animate({"opacity":"1","top":"3%"},200,
          function(){
          $(".p1_6").animate({"opacity":"1","bottom":"0%"},1000,
          function(){
          $(".p1_7").animate({"opacity":"1"},100)
                            })
                        })
                    }).animate({"width":"11%"},100)
                })
              },1000
            )}
        );
        },
        onTransitionStart:function(swiper){
          if(swiper.activeIndex!=0){
          $(".p1_1").css({"opacity":"0","top":"0%","left":"10%"});
          $(".p1_2").css({"opacity":"0","width":"40%","height":"25%","top":"17%","left":"12%"});
          $(".p1_3").css({"opacity":"0","left":"0%","top":"23%"});
          $(".p1_4").css({"opacity":"0","right":"0%","top":"18%"});
          $(".p1_5").css({"opacity":"0","top":"18%","left":"25%"});
          $(".p1_6").css({"opacity":"0","bottom":"-30%","left":"8%"});
          $(".p1_7").css({"opacity":"0","bottom":"3%","left":"38%"});
          }
            if(swiper.activeIndex!=1){
                $(".p2_1").css({"opacity":"0","top":"5%","left":"8%"});
                $(".p2_2").css({"opacity":"0","top":"0%","left":"4%"});
                $(".p2_3").css({"opacity":"0","top":"25%","left":"0%"});
                $(".p2_4").css({"opacity":"0","top":"40%","left":"0%"});
                $(".p2_5").css({"opacity":"0","top":"10%","left":"0%"});
                $(".p2_6").css({"opacity":"0","top":"55%","right":"0%"});
                $(".p2_7").css({"opacity":"0","top":"70%","left":"0%"});
                $(".p2_8").css({"opacity":"0","top":"85%","left":"0%"});
                $(".p2_9").css({"opacity":"0","top":"50%","right":"0%"});
                $(".p2_10").css({"opacity":"0","top":"45%","right":"30%"});
            }
            if(swiper.activeIndex!=2) {
                $(".p3_1").css({"opacity": "0", "top": "17%", "left": "18%"});
                $(".p3_2").css({"opacity": "0", "top": "5%", "left": "30%"});
                $(".p3_3").css({"opacity": "0", "top": "8%", "left": "0%"});
                $(".p3_4").css({"opacity": "0", "top": "12%", "right": "0%"});
                $(".p3_5").css({"opacity": "0", "top": "52%", "left": "5%"});
                $(".p3_5").removeClass("flipiny");
                $(".p3_6").css({"opacity": "0", "top": "52%", "left": "40%"});
                $(".p3_6").removeClass("flipiny");
                $(".p3_7").css({"opacity": "0", "top": "52%", "left": "73%"});
                $(".p3_7").removeClass("flipiny");
                $(".p3_8").css({"opacity": "0", "top": "76%", "left": "5%"});
                $(".p3_8").removeClass("flipiny");
                $(".p3_9").css({"opacity": "0", "top": "76%", "left": "40%"});
                $(".p3_9").removeClass("flipiny");
                $(".p3_10").css({"opacity": "0","top": "76%", "left": "73%"});
                $(".p3_10").removeClass("flipiny");
                  }
            if(swiper.activeIndex!=3){
                $(".p4_1").css({"opacity":"0","top":"5%","left":"5%"});
                $(".p4_1").removeClass("flipiny");
                $(".p4_2").css({"opacity":"0","top":"2%","left":"5%"});
                $(".p4_3").css({"opacity":"0","top":"10%","left":"0%"});
                $(".p4_4").css({"opacity":"0","top":"0%","left":"28%"});
                $(".p4_5").css({"opacity":"0","top":"40%","left":"18%","width":"0px"});
                $(".p4_6").css({"opacity":"0","top":"55%","left":"18%","width":"0px"});
                $(".p4_7").css({"opacity":"0","top":"70%","left":"18%","width":"0px"});

            }
            if(swiper.activeIndex!=4){
                  $(".p5_1").css({"opacity":"0","top":"14.8%","left":"0%"});
                  $(".p5_2").css({"opacity":"0","top":"10%","left":"22%"});
                $(".p5_3").removeClass("fadeinleft");
                $(".p5_4").removeClass("fadeinleft");
            }
            },
        onTransitionEnd:function(swiper){
            switch(swiper.activeIndex){
        case 0:
            $(".p1_2").animate({"opacity":"1","width":"75%","height":"48%"},500,
                    function(){
                        $(".p1_2").addClass("pulse");
                        setTimeout(function(){
                                    $(".p1_2").removeClass("pulse");
                                    $(".p1_3").animate({"opacity":"1","left":"18%"},200).animate({"left":"14%"},200);
                                    $(".p1_4").animate({"opacity":"1","right":"20%"},200,
                                            function(){
                                                $(".p1_5").animate({"opacity":"1","width":"15%"},1000,
                                                        function(){
                                                            $(".p1_1").animate({"opacity":"1","top":"3%"},200,
                                                                    function(){
                                                                        $(".p1_6").animate({"opacity":"1","bottom":"0%"},1000,
                                                                                function(){
                                                                                    $(".p1_7").animate({"opacity":"1"},100)
                                                                                })
                                                                    })
                                                        }).animate({"width":"11%"},100)
                                            })
                                },1000
                        )}
            );
        break;
        case 1:
            $(".p2_1").animate({"opacity":"1"},200,
            function(){
              $(".p2_5").animate({"opacity":"1","left":"20%"},200,
            function() {
              $(".p2_2").animate({"opacity":"1","width":"35%"},300)
              .animate({"width":"31%"},200,
            function () {
            $(".p2_3").animate({"opacity":"1","left":"13%"},200,
            function () {
            $(".p2_4").animate({"opacity":"1","left":"5%"},200,
            function(){
            $(".p2_9").animate({"opacity":"1"},200,
            function () {
            $(".p2_6").animate({"opacity":"1","right":"35%"},200,
            function () {
            $(".p2_10").animate({"opacity":"1","width":"23%"},200)
            .animate({"width":"20%"},200,
            function () {
            $(".p2_7").animate({"opacity":"1","left":"13%"},200,
            function () {
            $(".p2_8").animate({"opacity":"1","left":"5%"},200)
                                                  })
                                            })
                                        })
                                    })
                                })
                            })
                        })
                      })
            });
        break;
        case 2:
        $(".p3_1").animate({"opacity":"1"},200,
        function () {
        $(".p3_2").animate({"opacity":"1"},200,
        function () {
        $(".p3_4").animate({"opacity":"1","right":"28%"},200)
        .animate({"right":"23%"},100);
        $(".p3_3").animate({"opacity":"1","left":"33%"},200)
        .animate({"left":"27%"},100,
        function () {
//             $(".p3_10").addClass("flipiny");
//             $(".p3_10").animate({"opacity":"1"},1000);
        $(".p3_5").addClass("flipiny");
        $(".p3_6").addClass("flipiny");
        $(".p3_7").addClass("flipiny");
        $(".p3_8").addClass("flipiny");
        $(".p3_9").addClass("flipiny");
        $(".p3_10").addClass("flipiny");
                    })
                  })
              });
        break;
    case 3:
        $(".p4_1").addClass("flipiny");
        $(".p4_3").animate({"opacity":"1","left":"28%"},200,
        function () {
        $(".p4_2").animate({"opacity":"1"},200,
        function () {
        $(".p4_4").animate({"opacity":"1","width":"10%"},200)
        .animate({"width":"8%"},100,
        function () {
        $(".p4_5").animate({"opacity":"1","width":"64%"},500,
        function () {
        $(".p4_6").animate({"opacity":"1","width":"64%"},500,
        function () {
        $(".p4_7").animate({"opacity":"1","width":"64%"},500)
                                  })
                            })
                        })
                    })
                });
        break;
    case 4:
        $(".p5_1").animate({"opacity":"1","left":"10%"},200,
        function () {
        $(".p5_4").addClass("fadeinleft");
        $(".p5_2").animate({"opacity":"1","top":"4%","width":"56%"},200,
        function () {
        $(".p5_3").addClass("fadeinleft");
                    }).animate({"width":"55%"},200)
                });
        break;
        }
        }
    });
html5 个人简历
langju8013的博客
07-17 3863
Day5 #body{ border-color: darkturquoise;     -webkit-background-size: 842px;     -moz-background-size: 595px;     -o-background-size: cover;    background-size: cove } } #text{ height: 842
HTML5 个人简历模板
11-23
html 个人简历模板 特效炫酷 非常帅气 适合个人主页，简历等等。
HTML5个人简历模板
09-14
HTML5制作。适用于IT从业者使用。可根据自己专业以及职业技能进行修改即可使用。简单方便，好看。欢迎下载。
HTML5学习笔记
qq_43283474的博客
08-08 257
一、H5标签变化 1.DOCTYPE声明 定义和用法 -- <!DOCTYPE HTML> 1、必须是HTML文档的第一行 2、html:5按下tab键 / !+ctrl+e ---> 生成html5的标准形式 3、不是HTML标签 2.DTD 文档类型定义 1、DTD:可定义合法的XML文档构建模块，它使用一系列的合法的元素定义文档的结构。 2、在HTML中：DTD规定了标记语言的规则，这样浏览器才能正确呈现其内容。 3、HTML5：不再基于SGML...
HTML5简介
10-04 828
HTML5 主要新功能 本地音频视频播放动画地理信息硬件加速本地运行（即使在 Internet 连接中断之后）本地存储从桌面拖放文件到浏览器上传语义化标记 HTML5 应用现状 现今，各 大浏览器对 HTML5 的支持各有千秋 ，我们期待着他们在一两年内趋向一致，你
HTML5大作业-好看的个人简历个人主页
01-08
HTML5大作业-好看的个人简历个人主页，个人简历分为主页、关于我、我的项目、我的相册、我的博客、联系我六个模块。这是示范模块，个人简历可以根据自己简历需求，适当的增加或者删除模块，改成自己想要的，主页的...
html5源码-前端开发个人简历模板-fullpage全屏滚动响应式.rar
最新发布
05-18
HTML5源码大放送：全屏滚动的前端开发个人简历模板 亲爱的求职者们， 在竞争激烈的职场中，一份独特且专业的个人简历是打开成功之门的钥匙。今天，我们为您带来了一款前沿的HTML5源码——前端开发个人简历模板，它...
个人web简历-简单css模板-纯html模板下载-简历 个人 html.zip
01-15
描述中的“个人web简历-简单css模板-纯html模板下载_简历 个人 html.zip”进一步确认了这是一个可以下载的HTML和CSS组合模板，专门设计用于创建个人简历页面。用户可以下载这些文件，然后根据自己的需求进行修改，...
毕业设计，个人建站必备-小清新风格-纯HTML5-个人简历个人博客模板-支持手机端响应式-个人网站模板.zip
08-04
就比如这个毕业设计，个人建站必备-小清新风格-纯HTML5-个人简历个人博客模板-支持手机端响应式-个人网站模板 就很nice。 ​ 打开文件夹就只看到一个index.html文件以及一些必要的js,css,img这些个文件。稍微改改...
纯html模板-简单-单页-学些-黑色个人简历CSS模板-黑色 个人 简历 作品 图标.zip
03-14
这个压缩包文件包含了一个基于HTML、CSS和JavaScript的个人简历模板，特别适合初学者学习和使用。这个模板设计简洁，采用黑色主题，给人一种专业而低调的感觉。以下将详细阐述这个模板涉及的技术点以及如何利用这些...
HTML制作个人简历的简单实现
12-11
简历代码： XML/HTML Code复制内容到剪贴板 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml">   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <
HTML个人简历
10-08
利用HTML5语言编写的个人简历有兴趣的的朋友可以下载下来学习一下
学生个人简介html网页
11-17
简单学生个人简介网页，适合新手学习，交作业参考。采用div+css布局。
html5全屏页面滚动个人简历展示模板
08-18
html5全屏页面滚动个人简历展示模板
html+js+css自我介绍
07-18
html+js+css自我介绍，滑动滚轮进行界面的更换
html5写自我介绍,一分钟标签式自我介绍4篇
weixin_39884832的博客
06-11 2306
一分钟标签式自我介绍4篇一分钟标签式自我介绍1很荣幸能有机会向各位进行自我介绍。我叫xxx，今年xxx岁，我学的是xxx专业。这次来应聘我觉得自己有能力胜任这 份工作，并且有着浓厚的兴趣，XXX的基本工作已经熟练，如果能给我个机会，我一定会在工作中好好地表现的，一定不会让你们失望。 我很乐意回答各位考官所提出来的任何问题，谢谢!一分钟标签式自我介绍2我叫XX，来自广西南宁，20xx年毕业于广西银行...
HBuilder制作表格式的简历
热门推荐
Phosphenes的博客
05-05 1万+
表格简历 </tr> <tr> <th height="40">民族</th> <td></td> <th>政治面貌</th> <td></td> <th>籍贯</th> <...
html5设计个人简介页面,HTML5创意设计师个人简历响应式模板
weixin_39710249的博客
06-03 1539
【实例简介】【实例截图】【核心代码】HTML5创意设计师个人简历响应式模板├── assets│ ├── css│ │ ├── LineIcons.min.css│ │ ├── tam.css│ │ └── vendor.css│ ├── fonts│ │ └── LineIcons.ttf│ ├── images│ │ ├── about.jp...
个人简历HTML5网站模板 - 单页多栏目设计
个人简历HTML5网站模板是一个基于Web标准技术HTML5和CSS3开发的个人在线简历展示工具。它以jquery-1.9.1.min.js作为脚本库，利用现代前端技术实现了DIV CSS布局，使得整个网站在视觉和操作上都更加现代化和简洁。 #...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值