Transform-origin原生CSS实现类似风筝效果的上下运动

terry 2年前 (2023-09-07) 阅读数 194 #CSS

文章标签 CSS3

今天给大家分享一个我在之前工作中遇到的小技巧，是受到营销需求的启发。

关于改造-origin属性，可以说原则上在工作中是没有必要使用的，但是这个属性还是很好的能够达到某些特定的效果。

什么是转型-origin

MDN 中的解释是：transform-origin CSS 属性允许您更改元素转换的起源。

属性：

x-offset

定义畸变中心距盒模型左侧的或偏移值。

offset关键字

左、右、上、下或中心之一定义了畸变中心的相应偏移。

y-offse t

定义变形中心距盒模型顶部的或偏移值。

x-offset-关键字

左、右或中心之一定义了畸变中心的相应偏移。

y-offset-关键字

顶部、底部或中心之一定义了畸变中心的相应偏移。

z-offse t

定义畸变中心距用户视线（z=0）的（不能为）偏移值。

利用动画实现

效果如下：

@keyframes Wave {
0% {
变换：rotateZ(-5deg);
-o-transform:rotateZ(-5deg);
-ms-transform:rotateZ(-5deg);
-moz 变换：旋转 Z(-5 度);
-webkit 变换：旋转 Z(-5 度);
}

50% {
变换：rotateZ(4deg);
-o-变换：rotateZ(4deg);
-ms-变换：rotateZ(4deg);
-moz-变换： rotateZ(4deg);
-webkit-transform:rotateZ(4deg);
}

100% {
变换：rotateZ(-5deg);
-o-变换：rotateZ(-5deg);
-ms-变换：rotateZ(-5deg);
-moz -transform:rotateZ(-5deg);
-webkit-transform:rotateZ(-5deg);
}
}
.wave-btn{宽度:177px;
高度:87px
;display:block;
background:url('https://codeqd.com/zb_users/upload/2023/09/2019061823571646.png无重复中心center;
transform -origin：左上角；
动画：波 1.5 秒线性 0 秒交替无穷大；
-moz-动画：波 1.5 秒线性 0 秒交替无穷大；
-webkit 动画：波 1.5 秒线性 0 秒交替无穷大;
-o-动画：波 1.5 秒线性 0 秒交替无穷大；
-ms-动画：波 1.5 秒线性 0 秒交替无穷大；}

@keyframes 波 { 0% { 变换：rotateZ(-5deg) ）； -o-变换：rotateZ(-5deg)； -ms-变换：rotateZ(-5deg)； -moz-变换：rotateZ(-5deg)； -webkit-transform：旋转Z（-5度）； } 50% { 变换：rotateZ(4deg); -o-变换：rotateZ(4deg)； -ms-变换：rotateZ(4deg)； -moz-变换：rotateZ(4deg)； -webkit- 变换：rotateZ(4deg)； } 100% { 变换：rotateZ(-5deg); -o-变换：rotateZ(-5deg)； -ms-变换：rotateZ(-5deg)； -moz-变换：rotateZ(-5deg)； -webkit-transform：rotateZ（-5deg）； }}

具体样式如下：

width:177px;
高度：87 像素
;显示:块;
background:url('https://codeqd.com/zb_users/upload/2023/09/2019061823571646.png 居中，无重复居中
改造-origin：左上；
动画：波1.5s线性0s交替无限；
-moz-animation：波1.5s线性0s交替无限；
-webkit动画：波1.5s线性0s交替无限；
-o-动画：波1.5s线性0s交替无限；
-ms-animation：波1.5s线性0s交替无限；

以上就是实现CSS实现风筝效果的全部代码。希望对有需要的朋友有所帮助。