今天俺跟大家分享一个之前工作中遇到的一个小技巧,灵感来自于营销提出的需求。

对于transform-origin这个属性,工作中我们可以说基本上是不怎么需要使用的,但是该属性对于实现一些特定的效果还是很不错的。

什么是transform-origin

MDN中的解释是:transform-origin CSS属性让你更改一个元素变形的原点。

属性:

x-offset

定义变形中心距离盒模型的左侧的<length>或<percentage>偏移值。

offset-keyword

left,right,top,bottom或center中之一,定义相对应的变形中心偏移。

y-offset

定义变形中心距离盒模型的顶的<length>或<percentage>偏移值。

x-offset-keyword

left,right或center中之一,定义相对应的变形中心偏移。

y-offset-keyword

top,bottom或center中之一,定义相对应的变形中心偏移。

z-offset

定义变形中心距离用户视线(z=0处)的<length>(不能是<percentage>)偏移值。

利用动画巧妙实现

实现效果如下:

@keyframes wave {
    0% {
        transform: rotateZ(-5deg);     
        -o-transform: rotateZ(-5deg);     
        -ms-transform: rotateZ(-5deg);     
        -moz-transform: rotateZ(-5deg);     
        -webkit-transform: rotateZ(-5deg);     
    }
    
    50% {
        transform: rotateZ(4deg);  
        -o-transform: rotateZ(4deg);     
        -ms-transform: rotateZ(4deg);     
        -moz-transform: rotateZ(4deg);     
        -webkit-transform: rotateZ(4deg);        
    }

    100% {
        transform: rotateZ(-5deg);  
        -o-transform: rotateZ(-5deg);     
        -ms-transform: rotateZ(-5deg);     
        -moz-transform: rotateZ(-5deg);     
        -webkit-transform: rotateZ(-5deg);         
    }
}

具体的样式如下:

width:177px;
height:87px
;display:block;
background:url('https://www.pipipi.net/wp-content/uploads/2019/06/2019061823571646.png') no-repeat center center  
transform-origin:left top;     
animation: wave 1.5s linear 0s alternate infinite;
-moz-animation: wave 1.5s linear 0s alternate infinite;
-webkit-animation: wave 1.5s linear 0s alternate infinite;
-o-animation: wave 1.5s linear 0s alternate infinite;
-ms-animation: wave 1.5s linear 0s alternate infinite;

以上就是实现CSS实现放风筝效果全部代码,希望帮助到需要的朋友们。