整合營銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          純CSS寫一個(gè)H5橫豎屏提示功能

          擊上方藍(lán)字關(guān)注“小鄭搞碼事”,每天都能學(xué)到知識(shí),搞懂一個(gè)問題!

          開發(fā)一個(gè)H5頁面的時(shí)候,如果這個(gè)頁面只適配豎屏/橫屏,這種情況下,通常要做一個(gè)手機(jī)橫豎屏的提示,實(shí)現(xiàn)這個(gè)提示功能的方法有多種,這里,我準(zhǔn)備寫幾行樣式來實(shí)現(xiàn)。

          先看如何實(shí)現(xiàn)及效果,在總結(jié)一下用樣式實(shí)現(xiàn)的幾個(gè)好處。

          一、這么實(shí)現(xiàn)

          代碼:

          效果圖:

          當(dāng)橫屏展示的時(shí)候:

          實(shí)現(xiàn)起來特別簡(jiǎn)單,就是html和body元素上設(shè)置了after/before偽元素,使用media的方式在符合條件的情況下,將其展示出來。詳細(xì)見上面代碼所示。

          二、有哪些好處

          純CSS實(shí)現(xiàn)有哪些好處了

          1、使用起來比較方便,引用這段CSS代碼,所有頁面就可以實(shí)現(xiàn)提示功能。

          2、無http請(qǐng)求,不需要引入JS代碼文件,也不會(huì)阻塞頁面的渲染,圖片轉(zhuǎn)成base64,代碼量也不多。

          3、視覺可以自定義,提示圖可以靈活更換。

          bootstrap框架中綜合運(yùn)用fullpage全屏插件、animate.css動(dòng)畫等知識(shí),可以實(shí)現(xiàn)動(dòng)感炫酷的網(wǎng)頁版?zhèn)€人簡(jiǎn)歷。案例整體分為6屏,由于內(nèi)容較多,本案例講解第1屏,后面的文章陸續(xù)介紹其他屏的制作。

          案例采用響應(yīng)式布局,移動(dòng)端也可以很好的實(shí)現(xiàn)信息的展示。第1屏首頁的效果如下:

          本案例的代碼注釋比較詳細(xì),大家參照代碼就可以輕松實(shí)現(xiàn)案例效果。

          網(wǎng)頁文件index.html第1屏的代碼如下:

          <!DOCTYPE html>

          <html>

          <head>

          <meta charset="UTF-8">

          <title>簡(jiǎn)歷第1屏</title>

          <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

          <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

          <link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css"/>

          <link rel="stylesheet" type="text/css" href="css/animate.css"/>

          <!--自定義CSS-->

          <link rel="stylesheet" type="text/css" href="css/t1.css"/>

          </head>

          <body>

          <!--導(dǎo)航開始-->

          <nav class="navbar navbar-default navbar-fixed-top dh">

          <div class="container">

          <div class="navbar-header">

          <a href="test1.html" class="navbar-brand">斯圖爾特的簡(jiǎn)歷</a>

          <button class="navbar-toggle" data-toggle="collapse" data-target="#dh-menu">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          </button>

          </div>

          <div class="collapse navbar-collapse" id="dh-menu">

          <ul class="nav navbar-nav navbar-right" id="dh-menu1">

          <li data-menuanchor="p1" class="active"><a href="#p1">首頁</a></li>

          <li data-menuanchor="p2"><a href="#p2">基本資料</a></li>

          <li data-menuanchor="p3"><a href="#p3">專業(yè)技能</a></li>

          <li data-menuanchor="p4"><a href="#p4">個(gè)人經(jīng)歷</a></li>

          <li data-menuanchor="p5"><a href="#p5">項(xiàng)目經(jīng)驗(yàn)</a></li>

          <li data-menuanchor="p6"><a href="#p6">自我評(píng)價(jià)</a></li>

          </ul>

          </div>

          </div>

          </nav>

          <!--導(dǎo)航結(jié)束-->

          <!--fullpage開始-->

          <div class="ap">

          <!--第1屏-->

          <div class="section sec1">

          <div class="title1">

          <span class="p1-title">web前端開發(fā)工程師</span>

          <span class="hidden-xs">簡(jiǎn)歷</span>

          <span class="col-xs-12 hidden-sm hidden-md hidden-lg">簡(jiǎn)歷</span>

          <p class="title2">愛技術(shù),愛生活</p>

          <a href="#" class="next-page">

          <span class="glyphicon glyphicon-chevron-down"></span>

          </a>

          </div>

          <!--四個(gè)角-->

          <div class="corner corner1">

          <img src="images/p1/1.png"/>

          </div>

          <div class="corner corner2">

          <img src="images/p1/2.png"/>

          </div>

          <div class="corner corner3">

          <img src="images/p1/3.png"/>

          </div>

          <div class="corner corner4">

          <img src="images/p1/4.png"/>

          </div>

          </div>

          </div>

          <!-- 引入jq庫文件-->

          <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

          <script type="text/javascript" src="js/jquery.fullPage.min.js"></script>

          <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

          <script type="text/javascript" src="js/bootstrap.js"></script>

          <!--自定義jq-->

          <script type="text/javascript" src="js/t1.js"></script>

          </body>

          </html>

          自定義CSS樣式文件t1.css包含第1屏的代碼如下:

          body{

          font-family:"microsoft yahei";

          -webkit-tap-highlight-color:transparent;

          }

          a{

          color:#fff;

          }

          /*主導(dǎo)航欄*/

          #dh-menu1 .active a{

          background:rgba(183,4,4,0.9);

          color:#fff;

          }

          .dh{

          border:none;

          }

          .navbar{

          background:rgba(0,0,0,0.2);

          transition:all 1s ease;

          }

          .dh .navbar-brand,.dh .navbar-brand:hover,.dh .navbar-brand:visited{

          color:#fff;

          font-size:19px;

          letter-spacing: 0.1em;

          }

          .dh .navbar-right li a,.dh .navbar-right li a:visited{

          color:#fff!important;

          }

          /*右側(cè)導(dǎo)航欄*/

          #fp-nav{

          /*border:solid 1px #f00;*/

          top:80%;

          }

          #fp-nav ul li{

          margin:10px 50px;

          width:150%;

          height:150%;

          vertical-align: middle;

          }

          #fp-nav ul li a{

          display: block;

          margin:10px 50px;

          width:150%;

          height:150%;

          /*border:solid 1px #f00;*/

          padding:1px;

          }

          #fp-nav ul li a span{

          display: block;

          background:#333;

          border:none;

          width:15px;

          height:15px;

          }

          #fp-nav ul li a.active span{

          background: #ddd;

          box-shadow: 0px 0px 3px 1px #eee;

          }

          /*第1屏*/

          .p1-title{

          display: none;

          }

          .section{

          text-align: center;

          font-size:40px;

          color:#fff;

          }

          .sec1{

          background:url(../images/p1/bg1.jpg);

          background-size:cover;

          }

          .sec1 .title1{

          margin:-10% 0px 0px 0px;

          }

          .sec1 .title1 > span:first-child{

          font-weight: bold;

          font-size:45px;

          color:#EB9316;

          text-shadow:3px -2px 5px #333;

          }

          .sec1 .title1 > span.hidden-xs,

          .sec1 .title1 > span.col-xs-12{

          color:#f90;

          text-shadow:2px -1px 7px #333;

          }

          .sec1 .title1 > span:nth-child(1),

          .sec1 .title1 > span:nth-child(2){

          position: relative;

          animation:topmove 2s ease;

          }

          .sec1 .title1 p{

          animation:p-scale 2s ease;

          }

          .sec1 .title2{

          font-size:25px;

          }

          /**/

          .next-page{

          margin:0px 0px 0px -35px;

          position:absolute;

          bottom:15%;

          left:50%;

          border:solid 2px rgba(255,255,255,.5);

          width:70px;

          height:70px;

          border-radius: 50%;

          color:#eee;

          line-height:80px;

          overflow: hidden;

          transition:all 1s ease;

          background:rgba(0,0,0,0.5);

          }

          .next-page:hover{

          background:rgba(50,50,50,0.9);

          }

          .next-page span{

          animation: next-page 2s linear infinite;

          opacity: 0.7;

          font-size:30px;

          }

          /*4個(gè)角*/

          .sec1 .corner{

          position: absolute;

          /*max-width:72px;

          min-width: 50px;*/

          width:5%;

          }

          .sec1 .corner img{

          width:100%;

          }

          .sec1 .corner1{

          top:10%;

          left:10%;

          animation: corner1 1s ease;

          }

          .sec1 .corner2{

          bottom:10%;

          left:10%;

          animation: corner2 1s ease;

          }

          .sec1 .corner3{

          top:10%;

          right:10%;

          animation: corner3 1s ease;

          }

          .sec1 .corner4{

          bottom:10%;

          right:10%;

          animation: corner4 1s ease;

          }

          /*CSS3具體動(dòng)畫*/

          @keyframes next-page{

          0%{

          top:-35px;

          }

          100%{

          top:30px;

          }

          }

          @keyframes corner1{

          from{

          opacity:0.1;

          transform: rotate(-90deg);

          }

          to{

          opacity: 1;

          transform: rotate(0deg);

          }

          }

          @keyframes corner2{

          from{

          opacity:0.1;

          transform: rotate(90deg);

          }

          to{

          opacity: 1;

          transform: rotate(0deg);

          }

          }

          @keyframes corner3{

          from{

          opacity:0.1;

          transform: rotate(90deg);

          }

          to{

          opacity: 1;

          transform: rotate(0deg);

          }

          }

          @keyframes corner4{

          from{

          opacity:0.1;

          transform: rotate(-90deg);

          }

          to{

          opacity: 1;

          transform: rotate(0deg);

          }

          }

          @keyframes topmove{

          from{

          top:-200px;

          }

          to{

          top:0px;

          }

          }

          @keyframes p-scale{

          0%{

          transform: scale(3);

          }

          50%{

          transform: scale(0.5);

          }

          100%{

          transform: scale(1);

          }

          }

          自定義Jquery文件t1.js的代碼如下:

          $(function(){

          $('.ap').fullpage({

          sectionsColor:['transparent','transparent','#ccc','rgba(255,255,255,0)','transparent','transparent',],

          navigation:true,

          anchors:['p1','p2','p3','p4','p5','p6',],

          menu:'#dh-menu1',

          scrollingSpeed:700,

          controlArrowColor:'rgba(245,245,245,0.9)',

          normalScrollElementTouchThreshold:5,

          easing:'easeInOut',

          //頁面渲染后回調(diào)

          afterRender:function(){

          //側(cè)邊導(dǎo)航事件

          var tooltip1=['首頁','基本資料','專業(yè)技能','個(gè)人經(jīng)歷','項(xiàng)目經(jīng)驗(yàn)','自我評(píng)價(jià)'];

          $('#fp-nav ul li a').each(function(index){

          this.dataset['toggle']='tooltip';

          this.dataset['placement']='left';

          $(this).attr('title',tooltip1[index]);

          });

          $('[data-toggle="tooltip"]').tooltip();

          $('#fp-nav').addClass('hidden-xs');

          //

          $('.next-page').on('click',function(){

          $.fn.fullpage.moveSectionDown();

          });

          // 頂部導(dǎo)航欄自動(dòng)收起事件

          /*if($('.navbar-toggle').css('display')=='block'){

          $('.navbar-collapse li').on('click',function(){

          $('.navbar-toggle').trigger('click');

          });

          };*/

          $('.navbar-collapse').on('click',function(){

          $(this).collapse('hide');

          });

          //

          setTimeout(function(){

          $('.sec1 .corner').show();

          $('.p1-title').show();

          },500);

          },

          //滾動(dòng)結(jié)束時(shí)回調(diào)

          onLeave:function(index,nextIndex,direction){

          switch(index){

          case 1:

          $('.sec1 .corner').hide();

          $('.p1-title').hide();

          break;

          case 2:

          if(direction == 'down'){

          $('.sec2 .p2-icon').addClass('zoomOutUp');

          setTimeout(function(){

          $('.sec2 .p2-icon').removeClass('zoomOutUp');

          $('.sec2 .container').hide();

          },300);

          }else{

          $('.sec2 .container').hide();

          }

          break;

          case 3:

          $('.sec3 .container').hide();

          break;

          case 4:

          $('.sec4 .container').hide();

          $('.sky').show();

          break;

          case 6:

          $('.sec6 .top').animate({'height':'50%'},700);

          $('.sec6 .bottom').animate({'height':'50%'},700);

          $('.sky').hide();

          break;

          }

          },

          //滾動(dòng)后回調(diào)

          afterLoad:function(anchorLink,index){

          switch(anchorLink){

          case 'p1':

          $('.sec1 .corner').show();

          $('.p1-title').show();

          break;

          case 'p2':

          $('.sec2 .container').show();

          break;

          case 'p3':

          $('.sec3 .container').show();

          break;

          case 'p4':

          $('.sec4 .container').show();

          break;

          case 'p5':

          break;

          case 'p6':

          $('.sec6 .top').animate({'height':'30%'},1000);

          $('.sec6 .bottom').animate({'height':'30%'},1000);

          break;

          }

          }

          //

          });

          });

          至此,第1屏的案例效果制作完成,敬請(qǐng)關(guān)注后續(xù)文章。

          尋找熱愛表達(dá)的你#

          "screenshot-to-code"(截屏轉(zhuǎn)代碼)是一個(gè)人工智能開源項(xiàng)目,通常指的是將用戶界面(UI)的截圖轉(zhuǎn)換成相應(yīng)的前端代碼。這樣的項(xiàng)目對(duì)于前端開發(fā)者來說非常有用,因?yàn)樗梢詼p少手動(dòng)編寫布局代碼的工作量,提高開發(fā)效率。以下是一些關(guān)于"screenshot-to-code" AI開源項(xiàng)目的可能特性和功能:

          1. 圖像識(shí)別:項(xiàng)目使用圖像識(shí)別技術(shù)來解析截屏中的UI元素,如按鈕、文本框、導(dǎo)航欄等。

          2. 布局分析:AI分析截圖中的布局結(jié)構(gòu),包括元素的位置、大小和層級(jí)關(guān)系。

          3. 代碼生成:根據(jù)識(shí)別的UI元素和布局,自動(dòng)生成相應(yīng)的HTML、CSS和可能的JavaScript代碼。

          4. 支持多種UI框架:能夠支持生成不同前端框架下的代碼,如React、Vue或Angular。

          5. 響應(yīng)式設(shè)計(jì):生成的代碼應(yīng)支持響應(yīng)式設(shè)計(jì),以適應(yīng)不同屏幕尺寸和設(shè)備。

          6. 樣式提取:從截圖中提取顏色、字體、間距等樣式信息,并轉(zhuǎn)換為CSS代碼。

          7. 交互功能:如果截圖包含交互元素,AI應(yīng)能識(shí)別并生成相應(yīng)的交互代碼。

          8. 用戶自定義:允許用戶對(duì)生成的代碼進(jìn)行定制和修改,以滿足特定需求。

          9. 插件或擴(kuò)展:可能作為瀏覽器插件或IDE擴(kuò)展存在,方便開發(fā)者直接從截圖生成代碼。

          10. 版本控制集成:與Git等版本控制系統(tǒng)集成,方便代碼管理和協(xié)作。

          11. 社區(qū)支持:作為開源項(xiàng)目,擁有活躍的社區(qū),提供支持、反饋和持續(xù)改進(jìn)。

          12. 文檔和教程:提供詳細(xì)的文檔和使用教程,幫助用戶理解和使用工具。

          13. 多語言支持:支持多種編程語言,以適應(yīng)不同開發(fā)者的需求。

          14. 可擴(kuò)展性:允許開發(fā)者添加自定義組件或功能,以擴(kuò)展工具的能力。

          15. 質(zhì)量控制:生成的代碼應(yīng)符合行業(yè)標(biāo)準(zhǔn)和最佳實(shí)踐,保證代碼質(zhì)量。

          16. 兼容性測(cè)試:確保生成的代碼在不同的瀏覽器和設(shè)備上都能正常工作。

          17. 性能優(yōu)化:考慮性能優(yōu)化,生成的代碼應(yīng)避免不必要的渲染負(fù)擔(dān)。

          18. 安全性:生成的代碼應(yīng)遵循安全標(biāo)準(zhǔn),避免潛在的安全漏洞。

          "screenshot-to-code" AI開源項(xiàng)目可以極大地提高前端開發(fā)的效率,尤其是在快速原型設(shè)計(jì)和迭代過程中。然而,需要注意的是,自動(dòng)生成的代碼可能需要進(jìn)一步的人工審查和調(diào)整,以確保最終產(chǎn)品的質(zhì)量和性能。


          主站蜘蛛池模板: 无码人妻精一区二区三区| 久久一本一区二区三区| 国产成人精品视频一区二区不卡 | 日韩免费无码视频一区二区三区| 亚洲国产精品无码第一区二区三区 | 精品性影院一区二区三区内射| 小泽玛丽无码视频一区| 无码人妻精品一区二区蜜桃| 亚洲AV无码一区二区二三区软件| 国产中的精品一区的| 曰韩人妻无码一区二区三区综合部| 国产一区二区三区在线视頻| 日韩在线一区二区三区视频| 亚洲视频一区二区三区| 国产成人无码一区二区在线播放 | 亚洲视频一区二区三区四区| 久久精品免费一区二区三区 | 国产品无码一区二区三区在线| 无码国产精成人午夜视频一区二区| 亚洲乱码国产一区网址| 精品国产AV无码一区二区三区| 亚洲一区二区三区91| 亚洲日本va午夜中文字幕一区| 亚洲日韩精品一区二区三区| 东京热无码av一区二区| 午夜视频久久久久一区| 精品视频午夜一区二区| 久久久久久人妻一区二区三区| 日韩一区二区超清视频| 亚洲一区精品视频在线| 日韩精品区一区二区三VR| 午夜福利一区二区三区高清视频| 中文字幕一精品亚洲无线一区| 日韩久久精品一区二区三区| 色婷婷一区二区三区四区成人网 | 亚洲一区精彩视频| 亚洲一区综合在线播放| 人妻无码第一区二区三区| 日本午夜精品一区二区三区电影| 无码AV天堂一区二区三区| 人妻无码第一区二区三区 |