所有分类
  • 所有分类
  • 后端开发
当前位置： 正文
网页设计新玩法！背景动态图让页面秒变高大上

网页设计新玩法！背景动态图让页面秒变高大上

2024-03-26 技术资讯 推广
首页主要是一个动画和中间的文字布局。个人技能组件主要就是技能模块的布局（分割线和蓝色标签在个人简介组件介绍时已经说过，这里不再重复）点击联系我，可以打开一个抽屉，这个跟工作经历中的抽屉一样，不在重复说明。到此这个简单的简历项目就完成了，其实


 

  

   

   
 

   
{{sign}}

   

   

  

 



 .homepage{
 height: 550px;
 background: url(../../assets/home_bg.jpg) no-repeat;
 background-size: 100% 120%;
 color: #fff;
 font-size: 28px;
 margin-top: 100px;
 animation: bg infinite 100s linear alternate;
 }
 @keyframes bg {
 0% {background-size: 110% 130%; }
 10% {background-size: 111% 131%; }
 20% {background-size: 112% 132%; background-position: bottom;}
 30% {background-size: 113% 133%; }
 40% {background-size: 114% 134%;}
 50% {background-size: 115% 135%;background-position: left;}
 60% {background-size: 116% 136%;}
 70% {background-size: 117% 137%;}
 80% {background-size: 118% 138%;background-position: right;}
 90% {background-size: 119% 139%;}
 100% {background-size: 120% 140%;}
 }
 .content{
 display: inline-block;
 position: relative;
 top: 40%;
 }
 p{
 text-shadow: 0px 0px 10px rgba(255,255,255,0.5);
 letter-spacing: 10px;
 }
 .box{
 display: inline-block;
 width: 100px;
 height: 20px;
 }
 #box1{
 border-left:8px solid;
 border-top: 8px solid;
 position: relative;
 right: 150px;
 bottom: 20px;
 }
 #box2{
 border-top: 8px solid;
 border-right: 8px solid;
 position: relative;
 left: 150px;
 bottom: 20px;
 }
 #box3{
 border-left: 8px solid;
 border-bottom: 8px solid;
 position: relative;
 right: 150px;
 top: 20px;
 }
 #box4{
 border-right: 8px solid;
 border-bottom: 8px solid;
 position: relative;
 left: 150px;
 top: 20px;
 }


export default {
 name: 'HomePage',
 data () {
 return {
  sign: '专注web前端开发 '
 }
 }
}

瞧见没？网页设计里有个很炫酷的动态图背景，瞬间让你的页面高大上起来！好奇心强的你们是不是想问这到底咋做出来的呀？

聊聊背景图动画，这玩意儿就靠着CSS3的animation功能搞定。注意调节图片大小和位置，就能搞出炫酷的效果！怎么做？


 

 

  个人简介
  
xxxx大学本科

 

 
  

  
   
   

    于2005.07月毕业于某喵喵喵大学，本科学历。在校专业为xxxxxxx，主修课程为xxxx、xxxx、xx和xxxx等课程。在校期间主要技能为java和php语言,和实验室小伙伴一起完成过内部管理平台(成员在线时长记录、周计划制定和组长评价)、纳新面试系统等。
   

   
   
   

    毕业后在某某公司做web开发工作,主要的技能为css、javascript、jquery和python。主要参与的产品有xxxxxxx、xxxx。现就职于一家创业公司做web前端岗位，主要的技能为vue全家桶。
   

   
   
   

    工作中比较自律，对待工作认真负责，喜欢不断学习来提升自己。希望能找到一群志同道合的人一起工作，不断进步和成长。
   

   
  
  

  

 
 



export default {
 name: 'AboutUs'
}


 .aboutus .grid-content.line{
 border-right: 1px solid #ddd;
 height: 150px;
 }
 .aboutus .el-card__header{
 background: #545c64;
 }
 .aboutus .el-card__body{
 padding: 50px 20px;
 }
 .aboutus .el-timeline-item__wrapper{
 top: -8px;
 }
 .aboutus .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }


 .aboutus{
 font-size: 14px;
 text-align: left;
 padding: 0px 100px;
 }
 .intro{
 width: 200px;
 border: 1px solid #ddd;
 border-radius: 5px;
 }
 .text {
 font-size: 14px;
 text-align: left;
 line-height: 30px;
 text-indent: 2em;
 }
 .box-card{
 position: relative;
 }
 .item {
 display: inline-block;
 margin: 30px 50px;
 }
 .clearfix:before,
 .clearfix:after {
 display: table;
 content: "";
 }
 .clearfix:after {
 clear: both
 }
 .clearfix span{
 color: #fff;
 font-weight: bold;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-bottom: 80px;
 text-align: center;
 }
 .grid-content .large{
 font-size: 16px;
 color: #409EFF;
 font-weight: bold;
 }
 .topMask{
 width: 100px;
 height: 100px;
 background-color: rgba(68,138,255,0.2);
 transform: rotate(45deg);
 position: absolute;
 }
 .square{
 border-radius: 5px;
 top: 0px;
 }
 .circular{
 border-radius: 50%;
 top:80px;
 left: 80%;
 background-color: rgba(255, 208, 75,0.2);
 }

搞定名字，咱们这动画叫“ bg”得了。然后，过程中可得留意调整背景图的大小（用background-size）和位置（用background-position）。这样搞下来，只要稍微变动一下，整个页面立马就新鲜炫酷！

除了背景动态图片，我们还有个酷炫的叫“个人简介”的东西！里面有三部分组成：分隔线标题、蓝色标签以及内容小部分。那么，这些都是怎么弄出来的？

来看看我们用Element做的这个 Divider 分隔线，还有自制的字样。而且我们还用 layout24 分栏布局把摘要搞得井然有序。这下你的个人简介肯定比以前精彩多了！


 

  

  个人技能
  
vue全家桶javascriptcss

  

  

  Vue
  JS
  CSS
  Echarts
  webpack
  python
  linux
  

 



 .securityresearch .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }
 .securityresearch .box-card .text{
 text-align: left;
 }


 .securityresearch{
 font-size: 14px;
 padding: 0px 100px;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-bottom: 80px;
 text-align: center;
 }
 .content p{
 font-size: 20px;
 color: #8c8888;
 }
 .skill{
 margin: 100px 0px;
 position: relative;
 }
 .skill span{
 display: inline-block;
 color: #fff;
 border-radius: 50%;
 }
 span.vue{
 background-color: rgba(102,153,204,1) ;
 width: 200px;
 height: 200px;
 line-height: 200px;
 font-size: 28px;
 z-index: 100;
 }
 span.js{
 background-color: rgba(255,153,102,0.5);
 width: 130px;
 height: 130px;
 line-height: 130px;
 font-size: 26px;
 position: absolute;
 left: 43%;
 bottom: 150px;
 z-index: 0;
 }
 span.css{
 background-color: rgba(102,204,204,0.8);
 width: 90px;
 height: 90px;
 font-size: 26px;
 line-height: 90px;
 font-size: 26px;
 position: absolute;
 left: 35%;
 top: 100px;
 z-index: 0;
 }
 span.echarts{
 background-color: rgba(255,153,153,0.7) ;
 width: 100px;
 height: 100px;
 line-height: 100px;
 font-size: 24px;
 position: absolute;
 left: 59%;
 bottom: 10px;
 z-index: 0;
 }
 span.webpack{
 background-color: rgba(255,204,51,0.8);
 width: 70px;
 height: 70px;
 line-height: 70px;
 font-size: 13px;
 position: absolute;
 left: 30%;
 top: 20px;
 z-index: 0;
 }
 span.python{
 background-color: rgba(204,102,102,0.5) ;
 width: 60px;
 height: 60px;
 line-height: 60px;
 font-size: 14px;
 position: absolute;
 left: 51%;
 bottom: -10px;
 z-index: 0;
 }
 span.linux{
 background-color: rgba(153,153,255,0.8) ;
 width: 60px;
 height: 60px;
 line-height: 60px;
 font-size: 14px;
 position: absolute;
 left: 60%;
 top: -50px;
 z-index: 0;
 }


export default {
 name: 'SecurityResearch'
}

我给你说那个“个人技能”，就是让你调整技能模块的小帮手。那么，它怎么玩？

我之前都有详细告诉你们怎么弄个人技能部分，比如分界线啊蓝色标签之类的。再来说个好玩儿事儿，点开一个项目就能看到更多更深的东西了，这可没那么容易！用element的Drawer抽屉组件，配上我们自己写的小程序，就行了。简单来说，每回你点开项目，相关的标题、解释、公司、开发环境和职责什么的全都能显示出来，你就觉得你的项目变得更有意思了？


 

 

  工作经历
  
某司某某司

 

 

  
  
   
   
某司

   

    主要负责某某产品、某某某产品的前端开发和部分后端功能开发

    产品bug修复

    产品前场问题反馈处理

   

   
  
  
   
   
xxx

   
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

   
  
  
 

 

  

   网页设计新玩法！背景动态图让页面秒变高大上
   

   
项目1

   

  

  

  网页设计新玩法！背景动态图让页面秒变高大上
  

  
项目2

  

  

  

  网页设计新玩法！背景动态图让页面秒变高大上
  

   
项目3

  

  

 

 
  

   
   
    

    项目介绍：{{projectInfo[currentIndex]['intro']}}
    

   
   
   
   
    

    所在公司：{{projectInfo[currentIndex]['company']}}
    

   
   
   
   
    

    开发环境：{{projectInfo[currentIndex]['developEnv']}}
    

   
   
   
   
    

    职责描述:
    

    

    {{projectInfo[currentIndex]['responsibility'][key]}}
    

   
   
  

 
 



export default {
 name: 'Products',
 data () {
 return {
  drawer: false,
  direction: 'btt',
  currentIndex: 0,
  projectInfo: [
  {
   title: '项目1',
   intro: '这里是项目介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责3'
   }
  }, {
   title: '项目2',
   intro: '这里是项目2介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责3'
   }
  }, {
   title: '项目3',
   intro: '这里是项目3介绍',
   company: '某司',
   developEnv: '这里是开发环境介绍',
   responsibility: {
   res1: '职责1',
   res2: '职责2',
   res3: '职责3'
   }
  }
  ]
 }
 },
 methods: {
 handleClose (done) {
  done()
 },
 drawerHander (index) {
  this.drawer = true
  this.currentIndex = index - 1
 }
 }
}


 div .el-divider--horizontal{
 height: 2px;
 margin-top:100px;
 background-color: rgb(84, 92, 100);
 }
 div .el-divider__text{
 font-size: 26px;
 color: #545c64;
 }
 div .el-drawer__header{
 font-size: 20px;
 font-weight: blod;
 padding-bottom: 20px;
 border-bottom: 1px solid;
 }
 div .el-drawer{
 background-color: rgb(61, 67, 72);
 color: #ccc;
 }
 div .el-drawer__body{
 padding: 0px 20px 0px 20px;
 }


 .productpage{
 padding: 0px 100px 0px 100px;
 }
 .productpage .project{
 display: flex;
 justify-content:space-around;
 }
 .ifns{
 width:85%;
 display: inline-block;
 outline: 1px dashed rgba(84, 92, 100, 0.1);
 }
 .experience{
 text-align: left;
 }
 .content{
 text-align: center;
 display: inline;
 position: relative;
 margin: 20px;
 }
 .content p{
 width: 95%;
 color: #fff;
 font-size: 14px;
 text-align: center;
 }
 .hover{
 position: absolute;
 bottom: 5px;
 left: 7.5%;
 background-color: rgba(84, 92, 100, 0.3);
 height: 60px;
 width: 85%;
 line-height: 60px;
 cursor: pointer;
 }
 .hover:hover{
 background-color: rgba(84, 92, 100, 0.6);
 }
 h1{
 border:1px solid #ccc;
 height: 0px;
 }
 .title p{
 color: #8c8888;
 font-size: 15px;
 margin-top: 30px;
 margin-bottom: 20px;
 }
 .title p .el-tag{
 margin: 0px 5px;
 cursor: pointer;
 }
 .info{
 font-size: 14px;
 color: #72767b;
 line-height: 25px;
 }

给你分享下Vue+Element搭建的在线简历网站，教你如何把简历做得亮眼吸引人。添加炫酷的动态背景，选对合适的组件，你的简历就会立刻出类拔萃！记得，选择效果和组件要根据自己需求来决定，才能做出最好的个人简历

希望我提供的这些信息对你有所帮助。如果还有啥疑问或者想法，别害羞，就在评论里告诉我我们大家一起聊聊。喜欢这篇文章的话就给个好评呗，顺便分享给小伙伴们！一起努力创建专属于我们自己的超赞简历系统！

drawer=true
currentIndex = index-1

原文链接：https://www.icz.com/technicalinformation/web/2024/03/11359.html，转载请注明出处~~~
赏 0

猜你喜欢

掌握 H5 前端开发的学习规则，让学习事半功倍
技术资讯

学习前端我们都知道要学html、css、js这些基本的知识，学习的内容基本差不多，但是学习的成果却千差万别，要如何高效学习h5前端开发呢，一起来看下，web前端培训专家对学习web前端开发，有哪些独特的方法及建议。如何高效学习H5前端开发？
2024-07-21
SGML 与 HTML5 的关系及演变：标签名和属性名大小写规定的探讨
技术资讯

的例子如下：this后，就有一些新的规定和习惯，比如标签里的标签名和属性名必须小写等。并没有规定标签名和属性名必须小写，事实的确如此。也没有规定标签名和属性名必须大写。最后想说一点，这些乱七八糟的东西很多都是历史遗留问题，没有必要过多纠结。
2024-07-17
探索最佳响应式 HTML5 框架，助力快速构建网站
技术资讯

如果你也对html5框架感兴趣，你可以看看下面我列出的一些最佳的响应式html5框架，帮助你快速开发网站。Groundwork是一个响应式的HTML5，CSS和JavaScript框架，是基于Sass预处理器的开源项目。CSS是一款轻量级的
2024-07-08
如何下载 CSS？详细介绍下载 CSS 的类型、来源及使用方法
技术资讯

这种方式不需要下载CSS文件，因为CSS代码已经嵌入在HTML代码中了。（3）创建自己的CSS文件：如果你想要创建自己的CSS文件，你可以在本地使用文本编辑器或IDE软件创建文件，然后将文件保存为.css格式，这样就能够在网页中使用了。（2
2024-07-04
如何打开 CSS？这篇文章告诉你常用的方法和工具
技术资讯

如果你想要打开css，这篇文章将帮助你了解一些常用的方法和工具。Text中打开CSS文件，并使用其内置的CSS语法高亮功能查看和编辑CSS。你可以在Brackets中打开CSS文件，并使用其内置的样式视图功能查看和编辑CSS。
2024-07-03
网页设计中使用 CSS 去掉元素边框的方法与技巧
技术资讯

去掉元素的边框在网页设计中，我们可以使用CSS来去掉元素的边框。这样，元素的边框就会被完全去掉。这样，只会去掉该元素的顶部边框，同时底部、左侧、右侧边框仍然保留。这样，就可以完全去除对应元素的边框线。使用CSS样式表，可以轻松的去掉元素的边
2024-07-01

评论0

请先
首页 发现 VIP 我的
注意：请收藏好网址www.icz.com，防止失联！站内免费资源持续上传中…！赞助我们
显示验证码
没有账号？注册  忘记密码？