HTML——制作猫和老鼠动画效果

运用CSS制作猫和老鼠图片抖动效果

html结构：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>猫和老鼠</title><link rel="stylesheet"  type="text/css"  href="iconfont/iconfont.css">
</head>
<body><div id="box"><div id="box1"></div><div id="box2"></div><div id="box3"></div><div id="box4"></div></div><div id="box-z"><span>猫和老鼠</span><span>猫和老鼠</span><span>猫和老鼠</span><span>猫和老鼠</span></div>
</body>
</html>

CSS：

body{background-color: blanchedalmond;}#box{margin-top: 20%;width: 100%;height: 100px;display: flex;/*设置盒子横向排列 */justify-content: space-around;/*设置盒子水平间隔排列 */}#box-z{width: 100%;height: 30px;display: flex;/*设置盒子横向排列 */justify-content: space-around;/*设置盒子水平间隔排列 */padding-top: 10px;}#box1{width: 200px;height: 100px;border-radius: 20px;background-image: url(./图片排列/m1.jpg);background-size: 100% 100%;}#box1:hover{animation: suofang 0.8s ease 0s 1;}@keyframes suofang{5%{transform: scale(1,1.5);}20%{transform: scale(1.5,0.5);}50%{transform: scale(0.8,1.5);} 60%{transform: scale(1.3,0.8);}70%{transform: scale(0.9,1.1);}80%{transform: scale(1,0.9);}}#box2{width: 200px;height: 100px;border-radius:20px;background-image: url(./图片排列/m2.jpg);background-size: 100% 100%;}#box2:hover{animation: suofang 0.8s ease 0s 1;}#box3{width: 200px;height: 100px;border-radius:20px;background-image: url(./图片排列/m3.jpg);background-size: 100% 100%;}#box3:hover{animation: suofang 0.8s ease 0s 1;}#box4{width: 200px;height: 100px;border-radius:20px;background-image: url(./图片排列/m4.jpg);background-size: 100% 100%;}#box4:hover{animation: suofang 0.8s ease 0s 1;}

效果如下：

猫和老鼠动画抖动效果

HTML——制作猫和老鼠动画效果相关推荐

php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码...
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
html遮罩层动画制作,flash简单制作遮罩动画效果
flash简单制作遮罩动画效果QQ空间的开机动画大家应该都有,从最初的出现的一点到后面全部出现,如此神奇的效果到底是怎么做的呢,一起来看看吧!遮罩特效: 由于百度只能上传500k以内的照片,所以效果图 ...
电子脑PHP动画制作,用Flash制作变形动画效果
Flash中的变形动画是动画的一种类型,它和运动动画相反,只对图形起作用而对元件不能产生动画效果.应用变形动画可以产生一些奇妙的变形效果,能使课件更富有吸引力,下面小编就为大家介绍用Flash制作变形 ...
Css3制作风琴动画效果
Css3制作风琴动画效果开发工具与关键技术:DW 作者:谢嘉浚撰写时间:2019-03-30 使用css3来制作风琴动画效果,首先在html放一个大的div,设置它的宽高.背景颜色.再在div里面 ...
Visual C# 2005 - 利用程序代码制作简单动画效果
一般的 Windows Form 通常是运用各种控件来显示数据,然而如果您希望在窗体中加入特殊效果来凸显数据内容,那么图形与动画将是非常不错的选择. 一般来说,我们会使用 .Net Framework ...
python能制作ppt动画效果吗_那些超酷的视频效果，真的是用PPT动画做的吗？
作为一名5年经验的PPT设计师,我负责任的讲:真的是PPT做的! 用PPT轻松做出网页效果: 还有这种交互: 还有苹果的网页动画: 等等,太多了,都是可以轻松用PPT实现的,可能只是一个简单的动画添加 ...
duilib制作窗体动画效果
转载请说明原出处,谢谢~·http://blog.csdn.net/zhuhongshu/article/details/49026605 最近一段时间没写博客了,感觉最近没有遇到什么必须解决的bug ...
html制作图片动画效果代码,HTML5 Canvas：制作动画特效
编辑推荐: 本文来自于jquery之家 ,html5制作canvas动画的基本步骤,控制canvas动画和实例代码. 要在 HTML5 canvas 中绘制图像动画效果,你需要绘制出每一帧的图像,然后 ...

HTML——制作猫和老鼠动画效果

运用CSS制作猫和老鼠图片抖动效果

html结构：

HTML——制作猫和老鼠动画效果相关推荐

最新文章

热门文章