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小时内与您取得联系。