CSS3渐变，过渡，转换，动画及浏览器兼容问题——近日总结（二）

最新推荐文章于 2021-08-04 09:53:28 发布

「已注销」

最新推荐文章于 2021-08-04 09:53:28 发布

阅读量309

点赞数

分类专栏：前端——基础文章标签： css3 animation

本文链接：https://blog.csdn.net/qq_44526437/article/details/104228379

版权

前端——基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文总结了CSS3中的animation、transition和transform特性。重点介绍了@keyframes规则，包括animation-name、animation-duration和animation-timing-function属性。同时讲解了transition的语法和属性，以及transform的transform-origin属性，探讨了如何改变元素变形的原点。

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

CSS3中的过渡，转换和动画结合起来使用，视觉效果会更好，所以我把这三块的内容放在一起。

●animation(动画)

@keyframes规则

@keyframes myfirst {
	from {
	 	 /*样式*/
	}
	to {
		/*样式*/
	}
}
@-webkit-keyframes myfirst {
	from {
	 	 /*样式*/
	}
	to {
		/*样式*/
	}
}

属性

animation-name：规定@keyframes的名称
animation-duration：规定动画完成一个周期所花的时间
animation-timing-function：规定动画的速度曲线，默认值是“ease”
linear: 动画速度不变
ease：动画以低速开始，加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始和结束

●Transition(过渡)

语法

transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

transition: property duration timing-function delay;

属性

属性	描述	举例
property	要进行过渡的元素的属性	none、all、width
duration	要进行的时间（秒或者毫秒	1s、100ms
timing-function	过渡的曲线	linear(匀速)、ease(慢速开始，加速然后慢速结束)、ease-in(慢速开始)、ease-out(慢速结束) ease-in-out(慢速开始和结束)
delay	延迟的时间	1s、100ms

举例

 div {
      	width: 300px;
        height: 100px;
        background-color: blue;
     }
 div:hover {
       	animation: div infinite 1s;
     }
 @keyframes div {
        0% {background-color: blue;}
        100% {background-color: blueviolet;}
     }
/*以上为css部分*/
  <div></div> /*html部分*/

●Transform(过渡)

语法

transform: none|transform-functions1 transform-functions2 transform-functions3...;
transform-origin: x-axis y-axis z-axis;

transform

值	描述
translate(x,y)	从当前位置移动到left，top
translate3d(x,y,z)	在x，y，z轴移动的像素
translateX(x)	从当前位置移动到left
translateY(y)	从当前位置移动到right
translateZ(z)	移动到z轴的像素
scale(x,y)	增加（减少）宽度和高度
scale3d(x,y,z)	增加（减少）宽度，高度和z轴的值
scaleX(x)	增加（减少）宽度
scaleY(y)	增加（减少）高度
scaleZ(z)	增加（减少）z轴上的值
rotate(angle)	定义 2D 旋转
rotate3d(x,y,z,angle)	定义 3D 旋转
rotateX(angle)	定义沿 X 轴的 3D 旋转
rotateY(angle)	定义沿 Y 轴的 3D 旋转
rotateZ(angle)	定义沿 Z 轴的 3D 旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> 
    @keyframes kefu {
        from {
            -ms-transform:scale(1,1); /* IE 9 */
            -webkit-transform: scale(1,1); /* Safari */
            transform: scale(1,1); /* 标准语法 */
        }
    
        60% {
            -ms-transform:scale(1.2,1.2); /* IE 9 */
            -webkit-transform: scale(1.2,1.2); /* Safari */
            transform: scale(1.2,1.2); /* 标准语法 */
        }
        to {
            -ms-transform:scale(1,1); /* IE 9 */
            -webkit-transform: scale(1,1); /* Safari */
            transform: scale(1,1); /* 标准语法 */
        }

    }
    #kefu {
        position: fixed;
        right: 40px;
        bottom: 50px;
        width: 150px;
        height: 48px;
        border-radius: 20px;
        box-shadow: 5px 6px 26px -6px rgba(23, 92, 255, 0.55) ;
        background: -webkit-linear-gradient(left,#2e6ef0, #1c4be6); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #2e6ef0, #1c4be6); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #2e6ef0, #1c4be6); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #2e6ef0, #1c4be6);
        animation: kefu 1.5s ease-in-out infinite;
    }
    #kefu a {
        text-align: center;
        color: white;
        font-size: 16px;
        line-height: 48px;
    }
    #kefu a span {
        margin-left: 5px;
    }
    </style>
</head>
<body>
    <div id="kefu">
        <a href="javascript:void(0);">
            <i class="iconfont icon-liaotian"></i>
            <span>点我咨询</span>
        </a>
    </div>
</body>
</html>

transform-origin

transform-origin作用
这个属性是用来改变元素变形的原点，一般用来配合旋转来使用最多。接收参数可为一个、两个、三个。当为两个值，分别代表距离盒模型左侧的值，如transform-origin: 50px 50px;，表示该容器的旋转中心变为以盒模型左上角为原点，X和Y轴距离50px为原点进行旋转。
在这里插入图片描述

值	描述
x-axis	定义视图被置于 X 轴的何处
y-axis	定义视图被置于 Y 轴的何处
z-axis	定义视图被置于 Z 轴的何处

x,y轴可能的值有：left，center，right，length，%
z轴的值是：length

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3渐变，过渡，转换，动画及浏览器兼容问题——近日总结（二）

;CSS3中的过渡，转换和动画结合起来使用，视觉效果会更好，所以我把这三块的内容放在一起。●animation(动画)@keyframes规则@keyframes myfirst { from { /*样式*/ } to {...
复制链接

扫一扫

专栏目录