css3动画效果属性

border-radiu

  作用是为 div 元素添加圆角边框;border-radius属性其实是由border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius四个属性组合而成,它有三种表示方法,分别是px;%,em.
  它的设置顺序为:border-radius:左上角、右上角、右下角、左下角。也可以只用一个值,表示所有的角都使用这个值。
  *注:在设置对象为圆形的时候,如果使用了border、padding等情况时,对象的实际显示宽高已经不再是设置的width和height的数值,如果border-radius设置的值仍为原本的width和height的一半,可能达不到预期的真正的圆形的效果。

transition

  给对象添加一些动画交互效果,使过渡更自然。
  过渡transition是一个复合属性,它包含四个属性:

  • transition-property: 过渡属性(默认值为all)
  • transition-duration:过渡持续时间(默认值为0s)
  • transiton-timing-function: 过渡函数(默认值为ease函数)
  • transition-delay: 过渡延迟时间(默认值为0s)
    如果综合使用过渡会让网页更生动有趣,富有交互性。
    transition经常和hover使用,表示当鼠标鼠标移动上去来拥有对应的效果。可以和transform此类变形属性混合使用。
  • https://www.cnblogs.com/xiaohuochai/p/5347930.html深入了解

transform

  用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜

  语法一般为: transform: none|transform-functions;
常用的值有

属性
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。

 *如果想更准确的了解transform,可以在https://www.cnblogs.com/zero-zm/p/9911657.html查看
如果将过渡和变形混合使用,就可以做到如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="one.css">
    <title>过渡</title>
</head>
<body>
    <div class="one">
        <div class="first">
            <span>变圆</span>
            <img src="images/1.jpeg" >
        </div>
        <div class="second">
            <span >放大</span>
            <div class="gu">
            <img src="images/2.jpeg" >
            </div>

        </div>
        <div class="third">
            <span>旋转</span>
            <img src="images/3.jpeg" >
        </div>
        <div class="fourth">
            <span>掉色</span>
            <img src="images/4.jpeg ">
        </div>
    </div>
</body>
</html>

css属性如下

body{
    background-color: #000000;
    padding: 40px;
}
.one{
    display: flex;
    justify-content: space-between;

}
.first,.second,.third,.fourth{
    display: flex;
    color: white;
    flex-direction: column;
}
span{
    text-align: center;
}
img{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border: 8px solid #ffffff;
    border-radius:10px ;
    transition: all 3s ;
}
.first img:hover {
    border-radius: 50%;
    box-shadow: 0 0 20px 5px #ffffff;
}
.gu{
    margin-top: 20px;
    width: 200px;
    height: 200px;
    overflow: hidden;
    border: 8px solid #ffffff;
    display: inline-block;
    border-radius:10px ;
    transition: all 3s;
}
.second img{
    margin-top: 0;
    border: 0px;
    border-radius:0 ;
}
.second img:hover{
    transform: scale(2);
}
.gu:hover{
     box-shadow: 0 0 20px 5px #ffffff;
 }
.third img:hover{
    transform: rotate(3600deg);
    box-shadow: 0 0 20px 5px #ffffff;
}
.fourth img:hover{
    box-shadow: 0 0 20px 5px #ffffff;
    filter: grayscale(1);

}

animation

  为对象设置动画,animation语法为:
  animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  它由六个动画属性组成

  • animation-name 指定要绑定到选择器的关键帧的名称
  • animation-duration 指定动画完成所需的秒数或毫秒数
  • animation-timing-function 指定动画的速度曲线
  • animation-delay 指定动画开始之前的延迟
  • animation-iteration-count 指定应播放动画的次数
  • animation-direction指定动画是否应在交替循环中反向播放
  • animation-fill-mode 指定动画在执行之外应用的值
  • animation-play-state 指定动画是运行还是暂停

  和animation息息相关的的属性是@keyframes;用来创建动画,语法为
@keyframes animationname {keyframes-selector {css-styles;}};
keyframes-selector:动画持续时间的百分比,可能的值:0-100%、from (和0%相同)、to (和100%相同)。您可以用一个动画keyframes-selectors;
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同,0%是开头动画,100%是当动画完成;例如:

@keyframes go {
  0% {}
  50%{}
  100%{}
}

  *两者结合使用可以完各种动画操作。

sprite

允许你将一个页面涉及到的所有零星图片都包含到一张大图中去;好处是,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。这在网速不快的年代经常使用。
CSS Sprites非常值得学习和应用,特别是页面有很多很小的icon(图标)。
优点

  • CSS Sprites能很好地减少网页的http请求,从而大大的提高页面的性能,这是CSS
    Sprites最大的优点,也是其被广泛传播和应用的主要原因;
  • CSS Sprites能减少图片的字节;曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
  • CSSSprites解决了网页设计师在图片命名上的困扰,只需对一张集合的图片命名,不需要对每一个小图片进行命名,从而提高了网页制作效率。
    -CSSSprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。

缺点

  • 图片合并麻烦:图片合并时,需要把多张图片有序的合理的合并成一张图片,并留好足够的空间防止版块出现不必要的背景。
  • 图片适应性差:在高分辨的屏幕下自适应页面,若图片不够宽会出现背景断裂。
  • 图片定位繁琐:开发时需要通过工具测量计算每个背景单元的精确位置。
  • 可维护性差:页面背景需要少许改动,可能要修改部分或整张已合并的图片,进而要改动css。在避免改动图片的前提下,又只能(最好)往下追加图片,但这样增加了图片字节。
    一般使用精灵技术,需要配合一些制图软件一起使用,小工具有些小工具,
    如“Css Sprite Tools”、“CSS Satyr ”,“iwangx”
    用法有:
   .bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
    #ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    #ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    #ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    .nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  当然也有简写方法:
    #ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}

*CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。简单来说就是,现在网速快的情况,精灵技术用处并没有那么显著,但是在一些特定的连接上还是有很大作用的。

发布了19 篇原创文章 · 获赞 2 · 访问量 309
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览