css3动画效果属性

文章目录

border-radiu
transition
transform
animation
sprite

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="data:images/1.jpeg" ></div><div class="second"><span >放大</span><div class="gu"><img src="data:images/2.jpeg" ></div></div><div class="third"><span>旋转</span><img src="data:images/3.jpeg" ></div><div class="fourth"><span>掉色</span><img src="data: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图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。简单来说就是，现在网速快的情况，精灵技术用处并没有那么显著，但是在一些特定的连接上还是有很大作用的。