嗯，一般来说让一个元素水平居中一般有
-
magin: 0 auto;
-
left:50%;transform:translateX(-50%);
-
display:flex;justify-content: center;
然而，当遇到动画时上面两种方法都不太好用
推荐使用第三种方法...
.box {
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-direction: column;
.item1 {
width: 818px;
margin-left: -3000px;
.item2 {
width: 818px;
margin-right: -3000px;
.move-1 {
transform: translateX(1500px);
transition: all 3s;
.move-2 {
transform: translateX(-1500px);
transition: all 3s;
不熟悉的同学不要着急, 我来跟大家讲一下flex布局：
flex-direction就是设置元素排列的方向，横着或者竖着。
flex-wrap就是设置元素超出时，该咋办
justify-content这个就是设置对齐方式
align-items设置另外一个轴的对齐方式
align-content 多根轴线时设置对齐方式
关于子元素上要设置的属性，我就不多说了，其实用到的时候去查一下文档就好了，用的最多的还说.box上的属性。
前言本文是笔者写CSS时常用的套路。不论效果再怎么华丽，万变不离其宗。1、交错动画有时候，我们需要给多个元素添加同一个动画，播放后，不难发现它们会一起运动，一起结束，这样就会显得很平淡无奇。那么如何将动画变得稍微有趣一点呢？很简单，既然它们都是同一时刻开始运动的，那么让它们不在同一时刻运动不就可以了吗。如何让它们不在同一时刻运动呢？注意到CSS动画有延迟(delay)这一属性。举个栗子，...
/*动画-start*/.animated{animation-duration:1.5s !important;-webkit-animation-duration:1.5s !important;animation-fill-mode:both !important;-webkit-animation-fill-mode:both !important;}.animated02{animati...
不要使用边距进行动画处理，始终使用变换进行动画处理，这是它们的预期用途。 这是一篇关于Paul Irish的文章使用overflow-x：hidden来隐藏从右边进来的div。 这是一个小提琴，用于展示如何在不指定像素值的情况下使用变换进行动画处理;HTMLCSSbody {overflow-x: hidden;}.box-wrapper {-webkit-transition-duratio...
loading组件
我们在做项目的过程中尤其是跳转页面和请求接口的时，经常需要对页面的跳转进行优化，让跳转页面和接口请求数据显得更加平滑，体验效果更好。所以loading组件就产生了。
此代码适配于屏幕尺寸大小，所以可以直接使用。总结代码如下：
#mark-bg {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
#mark-bg .container {
.animated {
animation-duration: 1.5s !important;
-webkit-animation-duration: 1.5s !important;
animation-fill-mode: both !important;
-webkit-animation-fill-mode: both !imp...
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
通常如果想要实现某个元素定位在屏幕的正中央，比如loading图片，我们是根据元素以及屏幕的大小人为计算，或者使用js，显然这两种方法都不够优雅，或者兼容性不好，这里向大家介绍一种个人认为不错的方案供参考。
代码如下：
我试图保持背景视频的中心,无论用户拖动视频多大.当我滚动较小时,它正在切断视频的右侧.这是我有的：.video_contain{display: block;position: absolute;background-position: center center;background-repeat: no-repeat;background-size: cover;top: 0;left: 0;...
前端入门系列视频教程：前端基础16课--从入门到放弃 - 网易云课堂study.163.com本文适合有 CSS 基础同学阅读我们都知道动画电影由一帧一帧的静态画面拼接而成，一秒动画有24帧画面，如果低于24帧，人眼即可感知画面切换，就会有卡顿的感觉。CSS 中，如果按一秒24帧的画法来写代码，未免太过繁琐。所以我们把动画拆解为动作(transition)，一个动作表示从一个状态到另一个状态的变...
