weixin_46682277的博客

text-shadow:0 2px 2px #ccc;可以给文字添加阴影的效果而box-shadow:0px 0px 0px #ccc;是添加给盒子阴影效果的。h2 { text-align: center; font-size: (45 / @vw); color: #fff; font-weight: 400; text-shadow: 0 1px 3px #fff; }...

第一种方法(可以细分出来3个小方法)：第一个小方法设置好子绝父相left:50%;top:50%;margin-left:子盒子负的自身宽度的一半;margin-top:子盒子负的自身高度的一半;第二个小方法设置好子绝父相left:50%;top:50%;transform:translate(-50%,-50%); //表示自身宽高的50%第三个小方法设置好子绝父相left:0;top:0;right:0;bottom:0;margin:auto;第二种方法flex布

<style> * { padding: 0; margin: 0; } li { list-style: none; } img { width: 200px; } ul { /*因为是10张照片，所以ul的宽是2000px*/ width: 2000px; animation: move 10s infinite linear; }

代码示例：<style> .box{ width: 140px; height: 140px; /*引入本地的一张精灵图*/ background-image: url(./images/bg.png); /*用了两个动画效果，run和move*/ animation: run 1s steps(12) infinite, move 8s infinite;}@keyframes run { from { /*图片初始位置*/ bac.

语法格式：background:-webkit-linear-gradient(从哪个方向出发渐变，颜色1，颜色2);例如：background:-webkit-linear-gradient(left，red，pink)注意：背景渐变必须加浏览器私有前缀，不然不会出来效果

3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或自定义轴进行旋转。语法格式：transform:rotateX(45deg);沿着x轴正方向旋转45度；transform:rotateY(45deg);沿着y轴正方向旋转45度；transform:rotateZ(45deg);沿着z轴正方向旋转45度；body {/*想看到3D透视效果需要给被观察元素的父元素添加透视*/ perspective: 300px; }.box{ width: 150px; hei

3D移动translate3d3D移动在2D移动的基础上多加了一个可以移动的方向，就是轴方向。transform:translateX(100px);仅在x轴上移动。transform:translateY(100px);仅在y轴上移动。transform:translateZ(100px);仅在z轴上移动(单位一般都用px，不用百分比)。transform:translate3d(x,y,z);其中x、y、z分别指要移动的轴的方向的距离。.box1 { width: 200

制作动画分两步：1.先定义好动画；2.再使用（调用）该动画；和创建一个类class，然后再调用这个类class是一样的道理。用@keyframes来定义动画，例如：/*move就是创建的动画名称*/@keyframes move { 0% { width: 100px; } 50% { /*先向X轴移动500像素*/ transform: translate(500px,0); } 100% { /*再向Y轴移动500像素*/ transform: translate(

只要给元素添加了scale这个属性，就能控制元素放大或缩小。语法格式：transform: scale(x,y);注意点：x和y之间用逗号隔开；transform: scale(1,1)：表示宽和高都放大1倍，其实等于没有放大，还是原来的大小；transform: scale(2,2)：宽和高都放大了2倍；transform: scale(2)：只写一个参数，默认第二个参数和第一个参数一样，其实就是简写了，相当于transform: scale(2,2)；写起来更方便；transform:

2D旋转指的是让元素在2维平面内顺时针或逆时针进行旋转。（和transition过渡搭配使用效果体验更好）语法格式：transform:rotate(度数);注意点：rotate里面跟的是度数，单位是deg，例如transform:rotate(180deg)，就是说旋转180度；角度为正时，是顺时针旋转，为负时，是逆时针旋转，例如transform:rotate(180deg)和transform:rotate(-180deg)；默认旋转的中心点是以元素的中心点进行旋转。改变旋转的中心点：t

2D移动其实是2D转换里面的一种功能，它可以改变元素在页面中的位置，类似于postion和margin。语法格式：transform:translate(x,y)，后面需要跟px单位；也可以分开写transform:translateX(10px);transform:translateY(10px);例如：<style> div { width: 100px; height: 100px; background-color:

选择符用处简介::before在元素内部的前面插入内容::after在元素内部的后面插入内容例如：<style>p::before { content: '你好，';}p::after { content: '迪迦奥特曼';}</style><p>我是：</p>/*最后就会组成一句话：你好，我是：迪迦奥特曼*/伪元素选择器在实际开发中用的还是蛮多的，比如一些ico图标就可以用伪元素插入到其中...

CSS3对于PC端有兼容性，但对于移动端更友好些。选择符用法简介E:first-child匹配父元素中的第一个子元素EE:last-child匹配父元素中最后一个E元素E:nth-child(n)匹配父元素的第n个子元素E例如：<style>/*选择ul中的第一个子元素li*/ul li:first-child { color:pink;}/*选择ul中的第最后个子元素li*/ul li:last-child { color:skyb