整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

CSS3动画,变形及背景操作

CSS3动画,变形及背景操作

  • animation-name: 要对当前元素生效的关键帧的名字
animation-name: test;
  • animation-duration: 动画的执行时间
animation-duration: 4s;
  • animation-delay:动画的延时
animation-delay: 2s;
  • nimation-iteration-count 动画执行的次数 可选值:
    • 次数
    • infinite 无限执行
animation-iteration-count: 1;
  • animation-direction 指定动画运行的方向可选值:
    • normal 默认值 从 from 向 to运行 每次都是这样
    • reverse 从 to 向 from 运行 每次都是这样
    • alternate 从 from 向 to运行 重复执行动画时反向执行
    • alternate-reverse 从 to 向 from运行 重复执行动画时反向执行
animation-direction: alternate-reverse;
  • animation-play-state: 设置动画的执行状态 可选值:
    • running 默认值 动画执行
    • paused 动画暂停
animation-play-state: paused;
  • animation-fill-mode: 动画的填充模式可选值:
    • none 默认值 动画执行完毕元素回到原来位置
    • forwards 动画执行完毕元素会停止在动画结束的位置
    • backwards 动画延时等待时,元素就会处于开始位置
    • both 结合了forwards 和 backwards
animation-fill-mode: both;
  • 混合使用
animation: test 2s 2 1s alternate;

实现动画

  • 动画和过渡类似,都是可以实现一些动态的效果,
  • 不同的是过渡需要在某个属性发生变化时才会触发
  • 动画可以自动触发动态效果
  • 设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行每一个步骤
@keyframes test {
           /* from表示动画的开始位置 也可以使用 0% */
           from{
               margin-left: 0;
               background-color: orange;
          }

           /* to动画的结束位置 也可以使用100%*/
           to{
               background-color: red;
               margin-left: 700px;
          }
      }

变形transform

  • 变形就是指通过CSS来改变元素的形状或位置
  • 变形不会影响到页面的布局
  • transform 用来设置元素的变形效果
    • translateX() 沿着x轴方向平移
    • translateY() 沿着y轴方向平移
    • translateZ() 沿着z轴方向平移
    • 平移元素,百分比是相对于自身计算的
    • 平移:
transform: translateY(-100px);

Z轴平移

设置视距

perspective: 800px;
  • z轴平移,调整元素在z轴的位置,正常情况就是调整元素和人眼之间的距离,距离越大,元素离人越近
  • z轴平移属于立体效果(近大远小),默认情况下网页是不支持透视,如果需要看见效果必须要设置网页的视距
transform: translateZ(800px);

旋转

  • 通过旋转可以使元素沿着x y 或 z旋转指定的角度
    • rotateX()
    • rotateY()
    • rotateZ()
transform: rotateY(180deg);
/* 是否显示元素的背面 */
backface-visibility: hidden;

缩放

  • 变形的原点 默认值 center
  • 修改原点
transform-origin:20px 20px;
  • 对元素进行缩放的函数:
    • scaleX() 水平方向缩放
    • scaleY() 垂直方向缩放
    • scale() 双方向的缩放
transform:scale(2)

背景颜色

  • background-color 设置背景颜色
background-color: #bfa;

背景图片

  • background-image 设置背景图片
    • 可以同时设置背景图片和背景颜色,这样背景颜色将会成为图片的背景色
    • 如果背景的图片小于元素,则背景图片会自动在元素中平铺将元素铺满
    • 如果背景的图片大于元素,将会一个部分背景无法完全显示
    • 如果背景图片和元素一样大,则会直接正常显示
background-image: url("./img/1.png");

背景重复方式

  • background-position 用来设置背景图片的位置
    • 通过 top left right bottom center 几个表示方位的词来设置背景图片的位置
    • 使用方位词时必须要同时指定两个值,如果只写一个则第二个默认就是center
    • 通过偏移量来指定背景图片的位置:水平方向的偏移量 垂直方向变量
    • 设置方式:
background-position: center;
background-position: -50px 300px;

背景范围

  • background-clip
    • border-box 默认值,背景会出现在边框的下边
    • padding-box 背景不会出现在边框,只出现在内容区和内边距
    • content-box 背景只会出现在内容区
    • 可选值:
  • background-origin 背景图片的偏移量计算的原点
    • padding-box 默认值,background-position从内边距处开始计算
    • content-box 背景图片的偏移量从内容区处计算
    • border-box 背景图片的变量从边框处开始计算
background-origin: border-box;
           background-clip: content-box;

背景图片大小

  • background-size 设置背景图片的大小
    • 第一个值表示宽度
    • 第二个值表示高度
    • - 如果只写一个,则第二个值默认是 auto
  • cover 图片的比例不变,将元素铺满
  • contain 图片比例不变,将图片在元素中完整显示
background-size: contain;

背景图片是否随元素移动

  • background-attachment背景图片是否跟随元素移动
    • scroll 默认值 背景图片会跟随元素移动
    • fixed 背景会固定在页面中,不会随元素移动
    • 可选值:

注意

  • backgound 背景相关的简写属性,所有背景相关的样式都可以通过该样式来设置
  • 并且该样式没有顺序要求,也没有哪个属性是必须写的
  • background-size必须写在background-position的后边,并且使用/隔开 background-position/background-size
  • background-origin background-clip 两个样式 ,orgin要在clip的前边

SS3的transform属性可以缩放、倾斜和旋转任何元素。在没有任何浏览器前缀的前提下,这个属性已经被所有的现代浏览器所支持。如果想支持黑莓浏览器和安卓版的UC浏览器,你就需要添加-webkit-前缀了。

#myelement{
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
}

完美!然而,当你使用上述代码时,你会发现元素的内容、边框、背景图片都会发生旋转。那么,怎样才能只旋转背景图片呢?怎样才能只让元素本身旋转,而让其背景图片位置固定呢?

目前,W3C还没有专门变形背景图片的属性。我相信在不久的将来肯定会出现这个非常实用的属性。但是对于现在想实现相同效果的开发者们来说毫无帮助。

万幸,这里有个解决方法。其实,就是一个给父级容器元素before伪元素或者after伪元素添加背景图片的hack。这时,我们就可以独立控制带有背景图片伪元素的变形。

只变形背景

为了控制伪元素在其父级容器内定位,其父级容器元素必须设置相对定位(position:relative)。为了防止背景溢出,你也需要给容器元素设置overflow:hidden;

#myelement{
 position:relative;
 overflow:hidden;
}

现在,我们来创建一个具有可以变形背景的绝对定位的伪元素。将伪元素的层级设置为-1(z-index:-1),保证其不遮盖内容。

#myelement:before{
 content:'';
 position:absolute;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 z-index:-1;
 background:url(background.png) 0 0 repeate;
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
}

注意,你需要调整伪元素的宽度、高度和定位。比如,当你使用重复图片做背景时,旋转的区域必须比其所在容器面积大,以此保证全部覆盖容器背景。

固定一个变形元素的背景

父级容器上的所有变形样式都会继承到其伪元素。因此,我们需要撤销其伪元素的变形样式。例如,如果容器旋转30deg,其伪元素背景必须旋转-30deg,这样背景才能固定到某个位置。

#myelement{
 position:relative;
 overflow:hidden;
 -webkit-transform:rotate(30deg);
 transform:rotate(30deg);
 }
 #myelement:before{
 content:'';
 position:absolute;
 width:200%;
 height:200%;
 top:-50%;
 left:-50%;
 z-index:-1;
 background:url(background.png) 0 0 repeat;
 -webkit-transform:rotate(-30deg);
 transform:rotate(-30deg);
}

当然,你仍然需要调整伪元素背景的尺寸和位置,使其完全覆盖父级容器。

下面是CodePen上的相关实例:

https://codepen.io/SitePoint/pen/Ngpvwx

这种方法支持所有标准浏览器、edge、IE9~IE11。在IE8中不会有任何变形样式,但是背景图仍然显示。

IE6和IE7不支持伪元素,因此背景图不会显示。然而,为了支持那些古老的浏览器,你可以直接给容器设置背景图而不是用先进的选择器或者一定条件的CSS将容器的背景设置为空。

大量创造性的应用都用到了CSS3的变形属性。您有相关分享吗?


本文由大前端学堂编译出品,原文来自sitepoint,作者Craig Buckler,若转载请注明出处,转发感激不尽。

ransform

使用 transform 控制元素的变形,包括控制移动、旋转、倾斜、3D转换等。
下面是CSS提供的变形动作。

  • translateXtranslateY 可以使用负数和百分数
  • translateZ 表示纵深,只能写具体的数值
  • 小技巧控制元素居中
position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
  • rotate3d 按向量值控制旋转
  • transform 的参数叠加与顺序对变形有不同的结果 参数不会叠加,只会发生覆盖顺序的不同,结果呈现也不同


transform-origin


变形参考点,设置元素的 X/YZ 操作的基点,用于控制旋转、倾斜等操作

  • 旋转默认以元素中心进行旋转,改变基点后可控制旋转点位置
  • 元素移动不受变形基点所影响


属性值为:topbottomleftrightcenter 或者是 百分数 | 具体数值
默认值: center center

transform-origin: left center 300px;


perspective


控制元素的透视深度

  • perspective(900px) 作为函数规则控制单个元素,每个元素的透视效果是一样的
  • perspective: 900px 作为规则用于将父级整个做为透视元素,会造成里面的每个子元素的透视是不一样的。就像现实中摆一排杯子,是使用统一透视的,每个杯子的透视不一样,造成有大有小


推荐设置作为函数设置,规避透视造成元素大小不一致:transform: perspective(600px);


preserve-3d


三维空间视角,对元素设置 Z轴 效果时需要呈现三维空间效果

transform-style: preserve-3d;


perspective-origin


控制视线的角度,就像我们眼睛看物体时的聚焦点
需要设置 perspective 规则才能看到效果


backface-visibility


控制是否可以看到元素的背面

  • 一般设置在元素上而不是父级元素上
  • 需要父级元素设置 transform-style: preserve-3d


可选属性:

  • visible 背面可见
  • hidden 背面隐藏


一些常见的案例


立体按钮

3D 视图切换

背面卡片

输入框特效

贺卡效果

按钮效果

立方体翻转