css3实现动画的上下摇动

àì夳堔傛蜴生んèń 2022-06-07 00:38 268阅读 0赞

**有一张png格式的图片，用css3的animation()配合@keyframes特性，实现图片的上下摇动**

**原图如下：**

**![Center][]**

**html代码如下：**

<img src="img/hand.png" id="shake_icon" />

**css代码如下：**

#shake_icon{
    	width:100px;
    	height:100px;
    	animation: shaking 0.25s linear infinite;
    	-webkit-animation: shaking 0.25s linear infinite;
    }
    
    @keyframes shaking{
    	
    	         25% {
    		margin-top:-20px;
    	}
    	50% {
    		margin-top:10px;
    	}
    	75% {
    		margin-top:30px;
    	}
    	100% {
    		margin-top:10px;
    	}}@-webkit-keyframes shaking{25% {margin-top:-20px;}50% {margin-top:10px;}75% {margin-top:30px;}100% {margin-top:10px;}} 
     
    
    
    animation的用法：
     
     
     在keyframs里面也可以调用css3中的2D  3D转换，过度效果
     如：
           keyframes shaking{
                 25% {
    		translate(20,30);
    	}
     	75% {
    		translate(40,50);
    	}
    	100% {
    		translate(20,30);
    	}       } 
     
     
     
     2D效果：移动-translate()    旋转-rotate()     尺寸变化-scale()     翻转给定的角度-skew（）

[Center]: /images/20220607/f73b514958864bad9b0bffff5d1af1e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，268人围观）

还没有评论，来说两句吧...

相关阅读

相关【CSS3】CSS3 动画 ⑥ ( 动画属性示例 | 精灵图帧动画效果实现 )

文章目录一、需求说明二、代码分析 1、动画属性 2、布局分析 3、动画实现三、完整代码示例

ゞ浴缸里的玫瑰/ 2023年10月14日 17:36/ 0 赞/ 31 阅读

相关【CSS3】CSS3 动画 ① ( CSS3 动画简介 | CSS3 动画实现步骤 | 动画定义 | 代码示例 )

文章目录一、CSS3 动画简介二、CSS3 动画实现步骤三、动画定义四、代码示例一、CSS3 动画简介

我不是女神ヾ/ 2023年10月14日 15:47/ 0 赞/ 167 阅读

相关 CSS - 容器上下浮动动画

效果图 ![在这里插入图片描述][20210510115740820.gif] 实现代码 <div class="trans"></div> .

妖狐艹你老母/ 2023年01月19日 11:55/ 0 赞/ 137 阅读

相关 css3动画实现帧动画

pic { height:90px; width:65; background-position: -40px -44px;

- 日理万妓/ 2023年01月17日 09:21/ 0 赞/ 176 阅读

相关 Css3实现箭头上下浮动的动画效果

[https://blog.csdn.net/qq\_39635302/article/details/79477538][https_blog.csdn.net_qq_396

本是古典何须时尚/ 2022年11月16日 15:12/ 0 赞/ 409 阅读

相关 css3动画之上下抖动

.common\_animate:hover\{ animation-duration:1s; /\动画时间\/ animation-fill-mode

古城微笑少年丶/ 2022年07月14日 11:27/ 0 赞/ 253 阅读

相关 css3实现动画的上下摇动

有一张png格式的图片，用css3的animation()配合@keyframes特性，实现图片的上下摇动原图如下： ![Center][] html代码如下：

àì夳堔傛蜴生んèń/ 2022年06月07日 00:38/ 0 赞/ 269 阅读

相关 CSS3实现动画相册

See the Pen [ ainmated image hover effects][ainmated image hover effects] by haiqing wan

桃扇骨/ 2022年02月26日 04:46/ 0 赞/ 307 阅读

相关 css3动画实现无缝连接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

Love The Way You Lie/ 2022年02月22日 04:29/ 0 赞/ 431 阅读

相关 CSS3实现左右摆动和上下滑动

1、上下滑动 award { position: absolute; top:

秒速五厘米/ 2021年11月05日 13:28/ 0 赞/ 664 阅读