css3动画效果属性

最新推荐文章于 2024-08-02 20:34:24 发布

valives

最新推荐文章于 2024-08-02 20:34:24 发布

阅读量203

点赞数

分类专栏： web前端文章标签： css html css3 html5

本文链接：https://blog.csdn.net/weixin_45807026/article/details/105112779

版权

web前端专栏收录该内容

49 篇文章 2 订阅

订阅专栏

文章目录

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图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。简单来说就是，现在网速快的情况，精灵技术用处并没有那么显著，但是在一些特定的连接上还是有很大作用的。