css的animation属性实现摇头动画

使用css的动画属性实现一个粽子摇头动画

在这里插入图片描述

实现效果在线观看访问地址

代码

   div{
            width:200px;
            margin: 200px auto;
        }
        .img{
            width: 200px;
        }
        @-webkit-keyframes zy{ 
            10% { 
            transform: rotate(15deg); 
            } 
            20% { 
            transform: rotate(-10deg); 
            } 
            30% { 
            transform: rotate(5deg); 
            } 
            40% { 
            transform: rotate(-5deg); 
            } 
            50%,100% { 
            transform: rotate(0deg); 
            } 
        }
        /* 使用 */
        .content {
            animation: zy 2.5s;
             /* 动画执行次数   infinite 无线循环*/
            animation-iteration-count:5;  
        }复制

html

 <body>
    <div>
        <img class="img" src="../assets/zongzi-icon8.png" alt="">
    </div>
    <script>
        let img = document.querySelector(".img");
        img.className = 'img content';
    </script>
</body>复制

在这里插入图片描述

页面源码地址

源码地址

标签

css的animation属性实现摇头动画

使用css的动画属性实现一个粽子摇头动画

实现效果在线观看访问地址

代码

页面源码地址

jQuery 下载与安装教程

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

表单中通过单选框或复选框控制输入框的显示和隐藏

extjs02

canvas 渐变

【Day18】Grid网格布局

快速上手HTML5

使用IntersectionObserver替代判断是否在可视区域

无涯教程-HTML - 事件

UEditor富文本编辑器

前端哥

jQuery 下载与安装教程

【jQuery】jQuery 全套入门笔记

web前端期末大作业——基于html css javascript jquery bootstarp响应式的出国旅游定制公司官网 (17页)

若依中jquey相关问题

基于javaweb mysql的ssm maven知识库管理系统(java ssm bootstrap jquery mysql jsp)

详细搞懂vue2.0 3.0区别-summernote富文本使用

【JavaWeb】1.JQuery

jQuery日历签到插件下载

表单中通过单选框或复选框控制输入框的显示和隐藏

【Java 进阶篇】JQuery 遍历 —— `each()` 方法的奇妙之旅

1
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

2
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

3
移动端css布局大全

2024-02-06 15:02:421000

4
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

5
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

6
成都工业学院Web技术基础（WEB）实验一：HTML5排版标签使用

2024-02-27 11:02:41999

7
HTML5期末大作业：我的家乡网站设计5

2024-01-28 12:01:43999

8
web期末作业网页设计——我的家乡（网页源码）

2024-01-24 15:01:48999

9
尚硅谷css3笔记

2024-02-13 10:02:44998

10
如何利用浏览器测试跨域

2024-02-11 10:02:28998

	div{
	width:200px;
	margin: 200px auto;
	}
	.img{
	width: 200px;
	}
	@-webkit-keyframes zy{
	10% {
	transform: rotate(15deg);
	}
	20% {
	transform: rotate(-10deg);
	}
	30% {
	transform: rotate(5deg);
	}
	40% {
	transform: rotate(-5deg);
	}
	50%,100% {
	transform: rotate(0deg);
	}
	}
	/* 使用 */
	.content {
	animation: zy 2.5s;
	/* 动画执行次数 infinite 无线循环*/
	animation-iteration-count:5;
	}

	<body>
	<div>
	<img class="img" src="../assets/zongzi-icon8.png" alt="">
	</div>
	<script>
	let img = document.querySelector(".img");
	img.className = 'img content';
	</script>
	</body>

css的animation属性实现摇头动画

使用css的动画属性实现一个粽子摇头动画

实现效果 在线观看 访问地址

代码

页面源码地址

微信扫一扫：分享

实现效果在线观看访问地址