HTML+CSS基礎入門開發，雙子星水平位移相對動畫

HTML+CSS基礎入門開發，雙子星水平位移相對動畫特效

家好，本篇文章分享雙子星水平位移相對動畫特效，歡迎參考和指正。

效果圖：

雙子星水平位移相對動畫特效

HTML代碼：

<div class="tui-demo-6"></div>

CSS代碼：

<style type="text/css">
 .tui-demo-6 {
 width: 100px;
 height: 100px;
 margin: 50px auto;
 position: relative;
 }
 .tui-demo-6:before,.tui-demo-6:after {
 content: "";
 height: 30px;
 width: 30px;
 border-radius: 50%;
 position: absolute;
 top: 0;
 left: 0;
 animation: tui-demo-6 1.6s ease-in-out infinite;
 }
 .tui-demo-6:before {
 background: #FF5722;
 animation-delay: -0.8s;
 }
 .tui-demo-6:after {
 background: #FFB800;
 }
 @keyframes tui-demo-6 {
 0% {
 transform: translateX(70px);
 }
 50% {
 transform: translateX(0);
 }
 100% {
 transform: translateX(70px);
 }
 }
</style>

知識點：

animation：是CSS3的動畫屬性，這里把animation綁定到tui-demo-6元素上，并指定該動畫需要1.6秒完成，ease-in-out則表示動畫以低速開始和結束，infinite則表示無限次播放該動畫。

@keyframes：該規則表示動畫可以逐步從一個CSS樣式改變為另一個CSS樣式。這里0％是動畫開頭，100％是動畫結束。

transform：該屬性應用于2D元素或3D元素的轉換，允許元素發生旋轉，縮放，移動，傾斜等效果。translateX表示元素沿著水平方向或者X軸移動。

最后注意下瀏覽器兼容問題，-webkit-,-ms-或-moz-，有問題可以留言，大家一起學習HTML+CSS基礎入門開發。

多數野生程序員最棘手的問題就是如何依靠技術解決溫飽，通俗來講就是技術折現的問題。

如果是單純出于興趣，或者只是為了突擊某一階段或者某一項目技術壁壘，不跟就業掛鉤的自學倒也是無關痛癢。但是當上崗成為自學的終極目標和結果時，一切都就另當別論了。

前端自學者存在的學習誤區：

1、所學東西可能已過時

奉為經典的東西可能已經過時，或者已經有了更好的替代者，而你獲取信息的渠道有限，消息滯后，導致學習的內容也相對滯后。

2、學習方法盲目。

看書看不懂就找視頻類教程學習，覺得教程跟自己的口味不符就另尋他法，因為自己缺少對資源的辨識能力，總是在沒有清晰規劃學習線路的情況就盲目學習，導致無效學習時間過長而收獲寥寥。

3、只有理論，缺乏真實項目鍛煉。

對技術的理解停留在理論層次，而缺乏真實企業項目的歷練，如果沒有相關實習或工作經歷，對前端崗位具體的責任劃分和工作流程了解不充分。

學前端需要掌握哪些技能，才能去工作？

所以，自學前端需要達到什么水平才能去工作？我結合了知識點和現在前端主流崗位需求，列舉了一些，希望對大家的學習有幫助~

PC端網站布局：HTML基礎，CSS基礎，CSS核心屬性，CSS樣式層疊，繼承，盒模型，容器，溢出及元素類型，瀏覽器兼容與寬高自適度，定位，錨點與透明，圖片整合，表格，CSS屬性與濾鏡等。

HTML5+CSS3基礎：HTML5新增的元素與屬性，表單域增強元素，CSS3選擇器，文字字體相關樣式，CSS3位移與變形處理，CSS3 2D轉換與過度動畫，CSS3 3D轉換與關鍵幀動畫，彈性盒模型，媒體查詢，響應式設計等。

WebApp頁面布局：移動端頁面設計規范，移動端切圖，文字流式/控件彈性/圖片等比例/特殊設計的100%布局，等比縮放布局，viewport/meta，rem/vw的使用，flexbox詳解，移動web特別樣式處理等。

原生JavaScript交互功能開發：基本語法，循環語句，函數與數組，String與Date，BOM與DOM，事件，拖拽效果，cookie存儲，正則表達式，Ajax，面向對象基礎，運動與游戲開發等。

面向對象進階與ES5/ES6應用：Promise/A+，設計模式（觀察者模式等），原型鏈，構造函數，執行上下文棧與執行上下文，變量對象與活動對象，作用域鏈，閉包，this，ES5，ES6等。

JavaScript工具庫自主研發：DOM庫，事件庫，AJAX庫，原型和繼承庫，MVVM核心庫，基于SPA的路由庫等。

jQuery經典交互特效：時間軸特效，tab頁面切換效果，網頁定位導航特效，滑動門特效，焦點圖輪播特效，導航條菜單效果，瀑布流特效，彈出層效果，倒計時效果等。

PHP+MySQL后端基礎：PHP，MySQL，HTTP(s)協議詳解，Ajax進階、跨域與Defered，Apache與Nginx 環境搭建與配置，接口的定義，Mock數據，Restful，前后端聯調，前端安全(XSS,CSRF,JSON注入)等。

前端工程化與模塊化應用：Gulp，Webpack，NPM，Git/SVN，CommonJS，AMD，CMD，ES6模塊化等。

PC端全棧開發：大首頁、列表頁與詳情頁展示與交互特效、搜索、登錄與注冊、購物車、jQueryUI 與 jQuery EasyUI、Bootstrap(ACE)、Highcharts/Echarts、ArtTemplate、Velocity、Smarty、云平臺系統前端等。

應用Vue.js開發WebApp：Vue.js基礎，模塊化，單文件組件，路由，與服務器通信，狀態管理，單元測試與生產發布，服務端渲染SSR與Nuxt.js，基于Vue.js企業級項目開發等。

應用React.js開發WebApp：ReactJS基礎，JSX語法，組件，flux+Redux，React，Router路由，動畫效果，基于React 企業級項目研發等。

應用Angular開發WebApp：TypeScript 基礎與進階，開發環境配置，Hello World，架構、模塊與組件，模板，元數據、數據綁定與數據顯示，表單，服務與指令，依賴注入，路由，Ionic 3 MUI框架等。

微信公眾號開發：初識微信公眾號，訂閱號的基本功能，使用百度BAE實現代碼的快速上線，使用Git完成線上代碼部署，公眾號開發權限及功能接入，微信JSSDK接口API，微信場景項目開發與接入等。

微信小程序開發：微信小程序初探，小程序入門必學，小程序組件體驗，小程序大功能，項目實戰等。

React Native：React Native 初探，React Native 項目導航，React Native 項目文本框，React Native 項目滾動分頁，React Native 項目第三方登錄，React Native其他組件等。

各類混合應用開發：自主原生Navtive Hybrid，第三方Hybrid框架Cordova/Phone gap，第三方Hybrid框架等。

自學前端時的加分項

哦，對了還有加分項，大數據可視化！

建議大家從一些知識細節入手，數據可視化入門，數據可視化基礎，零編程工具使用：ChartBlocks、Infogram、plotly、Raw、Tableau，D3.js詳解，D3.js 入門，D3.js 高級應用，D3.js 應用工具：NVD3、n3，charts，Highcharts，FusionCharts，Polymaps等。

自學其實就是一種手段，至于具體的學習效果，其實全在于個人，這種入門前端的方法基本是屬于最慢的，如果學習方法和方向不對，很可能是做無用功。

多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

如果是想轉行前端或者是想要進入前端這個行業，以此為職業的話，建議還是系統的培訓學習吧，因為不僅能節約時間，還能了解到最新的前端技術和技能，也有行業內的專業人士幫你找到最快捷的學習入門方法，不至于白學或者走彎路。這只是個人的一點建議，僅供參考，不喜勿噴！

者 | 開課吧無憂

編輯 | 開三金

來源 | 開課吧前端團隊（ID:KKBWeb）

經常碰到有同學在問，如何讓一個元素上下左右都居中呢？

相信大家在面試的時候也會經常碰到這個問題，一下列出來幾種方式以供大家參考，如有不足之處，請大家補充

問題描述：

給定兩個元素，這兩個元素是父子級關系。

并且兩個元素的大小都是不確定的，那么這時候如何讓子級在父級中上下左右都居中？（暫且設定父級比子級要大一些）

第一種：利用定位

先上代碼及效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            position: relative;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            position: absolute;
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }
</style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

思路：父級相對定位，子級絕對定位而四個定位屬性的值都設置了0；

那么這時候如果子級沒有設置寬高，則會被拉開到和父級一樣寬高。

而現在設置了子級的寬高，所以寬高會按照我們的設置來顯示；

但是實際上子級的虛擬占位已經撐滿了整個父級，這時候再給它一個margin：

auto它就可以上下左右都居中了

第二種，定位配合css3位移

先上代碼，效果：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            position: relative;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
</style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

思路：父級相對定位，子級絕對定位，而top，left這兩個屬性的如果給百分比；

那么這個百分比則是相對于父級的寬高來進行計算的；

如果只給定這兩個值，則子級的右上角會和父級的中心點對齊，得到下圖：

這時候則需要進一步操作：

css3中的位移屬性，則是根據自身來計算百分比的；

所以只需要利用這個屬性把自身再往左上角各移動50%就可以讓子級在父級中上下左右都居中了

利用內聯塊元素 display:inline-block

代碼及效果：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            text-align: center;
        }
        .content:before{
            content: '';
            height:100%;
            width:0;
            display: inline-block;
            vertical-align: middle;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
            display: inline-block;
            vertical-align: middle;
        }
</style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

思路：

首先，把子級轉換成內聯塊元素，那么左右居中就可以直接利用text-align:center搞定了，而這個方法難點就在上下居中上。

子級是一個內聯塊元素，當然不可能說給父級設置一個行高子級就乖乖的上下居中了。

所以需要更加復雜的操作：

首先給子級設置垂直對齊方式：vartical-align 這個屬性只對內聯元素以及內聯塊元素起作用；

它有這么些值：top,bottom,middle等等我想這些值的意思就不需要我解釋了。

但是這個屬性有一個缺點：需要一個參照物，也就是說如果父級里面有兩個子元素，兩個子元素都設置了vertical-align:middle，那么得到的效果只是這兩個元素之間居中對齊而已。

并不會把兩個子元素都放在父級的中間。

小技巧一：把其中一個元素設置高度百分百，那么這時候另一個元素就會處于父級上下居中的位置了。

如圖：

但是這時候就多出來了一個元素了，與需求不符。

當然了，如果說你在實際布局中，確實有兩個元素，并且其中一個元素可以設置為高度百分百的話，這么做是可以的。

小技巧二：想辦法把另一個元素消除掉——利用偽元素before，詳情請看代碼。

tips：其實這時候給父級設置一個和父級高度一樣的行高也是可行的，不過這個原理太復雜，大家有興趣可以研究一下哦！

第四種：彈性盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
        }
</style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

效果圖就不看了吧，思路感覺也沒啥可解釋的，這都是css3的功勞，沒啥技巧，掌握了彈性盒模型就能掌握這個方法，簡單粗暴。

快去看看彈性盒模型吧，以后我有時間心情好的話再專門寫點這方面的東西

第五種：網格布局 Grid

代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .content{
            width:500px;
            height:300px;
            border:1px solid #0a3b98;
            display: grid;
            justify-content: center;
            align-items: center;
        }
        .box{
            width:100px;
            height:40px;
            background: #f0a238;
        }
</style>
</head>
<body>
 
<div class="content">
    <div class="box"></div>
</div>
 
</body>
</html>

這個方法和彈性盒模型一樣，簡單粗暴，沒啥可說的。

grid網格布局出來沒多久，權當做個了解吧，不過這玩意很強大，大家有時間可以了解一下。

Good Luck ！

在線咨詢

上一篇：Jquery中的內容選擇器contains的詳解
下一篇：管理TXT和HTML內容的TXT文本編輯器，辦公軟件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。