整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊上方藍字關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！
開發一個H5頁面的時候，如果這個頁面只適配豎屏/橫屏，這種情況下，通常要做一個手機橫豎屏的提示，實現這個提示功能的方法有多種，這里，我準備寫幾行樣式來實現。
先看如何實現及效果，在總結一下用樣式實現的幾個好處。
代碼：
效果圖：
當橫屏展示的時候：
實現起來特別簡單，就是html和body元素上設置了after/before偽元素，使用media的方式在符合條件的情況下，將其展示出來。詳細見上面代碼所示。
純CSS實現有哪些好處了
1、使用起來比較方便，引用這段CSS代碼，所有頁面就可以實現提示功能。
2、無http請求，不需要引入JS代碼文件，也不會阻塞頁面的渲染，圖片轉成base64，代碼量也不多。
3、視覺可以自定義，提示圖可以靈活更換。
bootstrap框架中綜合運用fullpage全屏插件、animate.css動畫等知識，可以實現動感炫酷的網頁版個人簡歷。案例整體分為6屏，由于內容較多，本案例講解第1屏，后面的文章陸續介紹其他屏的制作。
案例采用響應式布局，移動端也可以很好的實現信息的展示。第1屏首頁的效果如下：
本案例的代碼注釋比較詳細，大家參照代碼就可以輕松實現案例效果。
網頁文件index.html第1屏的代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡歷第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>
<!--導航開始-->
<nav class="navbar navbar-default navbar-fixed-top dh">
<div class="container">
<div class="navbar-header">
<a href="test1.html" class="navbar-brand">斯圖爾特的簡歷</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">專業技能</a></li>
<li data-menuanchor="p4"><a href="#p4">個人經歷</a></li>
<li data-menuanchor="p5"><a href="#p5">項目經驗</a></li>
<li data-menuanchor="p6"><a href="#p6">自我評價</a></li>
</ul>
</div>
</div>
</nav>
<!--導航結束-->
<!--fullpage開始-->
<div class="ap">
<!--第1屏-->
<div class="section sec1">
<div class="title1">
<span class="p1-title">web前端開發工程師</span>
<span class="hidden-xs">簡歷</span>
<span class="col-xs-12 hidden-sm hidden-md hidden-lg">簡歷</span>
<p class="title2">愛技術，愛生活</p>
<a href="#" class="next-page">
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<!--四個角-->
<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;
}
/*主導航欄*/
#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;
}
/*右側導航欄*/
#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個角*/
.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具體動畫*/
@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',
//頁面渲染后回調
afterRender:function(){
//側邊導航事件
var tooltip1=['首頁','基本資料','專業技能','個人經歷','項目經驗','自我評價'];
$('#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();
});
// 頂部導航欄自動收起事件
/*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);
},
//滾動結束時回調
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;
}
},
//滾動后回調
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屏的案例效果制作完成，敬請關注后續文章。
尋找熱愛表達的你#
"screenshot-to-code"（截屏轉代碼）是一個人工智能開源項目，通常指的是將用戶界面（UI）的截圖轉換成相應的前端代碼。這樣的項目對于前端開發者來說非常有用，因為它可以減少手動編寫布局代碼的工作量，提高開發效率。以下是一些關于"screenshot-to-code" AI開源項目的可能特性和功能：
1. 圖像識別：項目使用圖像識別技術來解析截屏中的UI元素，如按鈕、文本框、導航欄等。
2. 布局分析：AI分析截圖中的布局結構，包括元素的位置、大小和層級關系。
3. 代碼生成：根據識別的UI元素和布局，自動生成相應的HTML、CSS和可能的JavaScript代碼。
4. 支持多種UI框架：能夠支持生成不同前端框架下的代碼，如React、Vue或Angular。
5. 響應式設計：生成的代碼應支持響應式設計，以適應不同屏幕尺寸和設備。
6. 樣式提取：從截圖中提取顏色、字體、間距等樣式信息，并轉換為CSS代碼。
7. 交互功能：如果截圖包含交互元素，AI應能識別并生成相應的交互代碼。
8. 用戶自定義：允許用戶對生成的代碼進行定制和修改，以滿足特定需求。
9. 插件或擴展：可能作為瀏覽器插件或IDE擴展存在，方便開發者直接從截圖生成代碼。
10. 版本控制集成：與Git等版本控制系統集成，方便代碼管理和協作。
11. 社區支持：作為開源項目，擁有活躍的社區，提供支持、反饋和持續改進。
12. 文檔和教程：提供詳細的文檔和使用教程，幫助用戶理解和使用工具。
13. 多語言支持：支持多種編程語言，以適應不同開發者的需求。
14. 可擴展性：允許開發者添加自定義組件或功能，以擴展工具的能力。
15. 質量控制：生成的代碼應符合行業標準和最佳實踐，保證代碼質量。
16. 兼容性測試：確保生成的代碼在不同的瀏覽器和設備上都能正常工作。
17. 性能優化：考慮性能優化，生成的代碼應避免不必要的渲染負擔。
18. 安全性：生成的代碼應遵循安全標準，避免潛在的安全漏洞。
"screenshot-to-code" AI開源項目可以極大地提高前端開發的效率，尤其是在快速原型設計和迭代過程中。然而，需要注意的是，自動生成的代碼可能需要進一步的人工審查和調整，以確保最終產品的質量和性能。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
