css3 toolTip 气泡特效（慕课网 3-11）

最新推荐文章于 2021-07-02 18:02:49 发布

苏夏的蓝色气球

最新推荐文章于 2021-07-02 18:02:49 发布

阅读量533

点赞数

分类专栏： html+css 文章标签： css3

本文链接：https://blog.csdn.net/qq_20370773/article/details/44244803

版权

本文介绍了如何使用CSS3创建各种气泡提示特效，详细讲解了transform属性的使用，如translate3d、rotate3d和scale3d，以及transform-origin的设定。还涉及到transition属性在实现过渡效果中的应用。

摘要由CSDN通过智能技术生成

知识点

1、transform:对元素应用2D，3D转换
语法：transform:none|transform-function
参数：translatr3d(x,y,z)定义3D转换（主要用来改变元素的位置,x、y、z表示坐标）
   rotate3d(x,y,z,angle)定义3D旋转（主要用来改变元素的角度,x、y、z为0-1之间的系数）
   scale3D(x,y,z,flex)定义3D缩放
兼容：IE支持-ms替代仅适用2D转换
   opera只支持2D转换
2、语法：transform-origin:定义中心点，只有上面用过transform属性，该属性才能生效
   (一般在旋转，斜切，缩放中用到)
参数：水平方向（可以是具体的数值如30%，也可以是具体的方向值如left）
   垂直方向
---------------------------------------------------------------------------------------------------
3、 transition:在一定时间区间内过渡到指定的属性值
语法：transition:property duration timing-function delay;
参数：property指定对哪呢个css属性值进行过渡
   duration：规定过渡需要的时间（单位s/ms）
  timing-function:规定速度效果（匀速，变速）
  delay:定义效果何时开始
兼容：ie9-不支持，safari支持替代-webkit-