html里面的好看的动画效果

  • 动画介绍
  • 动画效果1 - 平移
  • 动画效果2 - 抖动
  • 动画效果3 - 旋转
  • 动画效果4 - 变色
  • 动画效果5 - 放大缩小
  • 动画效果6 - 翻转
  • 总结

动画介绍

html里面的好看的动画效果，包括基本的平移，旋转，抖动，变色等动画效果，可以直接嵌入代码使用；

元素属性介绍

1.位置 ：位移 translate（x，y）；
2.大小 ：缩放 scale（xx px）；
3.状态：旋转 rotate（xx deg）；
4.形态：skew（xx deg）；
转化属性
css转化属性 transform : none 不转换/ transform-function;转化函数 如 transform:translate位移(170px);转换原点transform-origin:  如 transform-origin: 50% 50%；
取值 ：
数值 ：以元素左上方的点为(0,0)，再去计算其他点
百分比:
0% , 0% : 左上方的点
50% ， 50% ：元素的中心点
关键字:
left
right
top
bottom
center
left top : 表示左上方
transform-origin赋值：
一个值 ：x轴的移动
两个值 ：x轴和y轴
三个值 ：x轴，y轴，z轴-webkit-animation-name: shaky-slow;   // webkit内核
-ms-animation-name: shaky-slow;     // ie内核
animation-name: shaky-slow;     // 原生
animation-duration: 4s;         // 动画执行时间
animation-delay: 0s;            // 动画等待时间
animation-iteration-count: infinite;    // 动画执行次数，infinite为一直执行
animation-timing-function: ease-in-out; // 动画执行速度
animation-delay: 0s;            // 动画延时时间
animation-play-state: running;      // 动画执行状态，一般没必要parse

动画效果1 - 平移

  • 基本语法格式：

transform:translate（x-value,y-value）;
x-value 指元素在 水平方向 上移动的距离， y-value 指元素在 垂直方向 上移动的距离。如果 省略了第二个参数 ， 则取默认值0 。当值为 负数 时，表示 反方向移动 元素。

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">
.box10{animation: test 0.8s;
}
@keyframes test{0% {opacity: 0;transform: translate(-30px, 0px);}33% {opacity: 0.3;transform: translate(-20px, 0px);}66% {opacity: 0.6;transform: translate(-10px, 0px);}100% {opacity: 1;transform: translate(0px, 0px);}}
</style>
</head>
<body>
<p class="box10">xcsharp博客</p>
</body>
</html>

动画效果2 - 抖动

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">.shaky {display: inline-block;padding: 1px;font-size: 12px;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;-webkit-animation-name: shaky-slow;-ms-animation-name: shaky-slow;animation-name: shaky-slow;-webkit-animation-duration: 4s;-ms-animation-duration: 4s;animation-duration: 4s;-webkit-animation-iteration-count: infinite;-ms-animation-iteration-count: infinite;animation-iteration-count: infinite;-webkit-animation-timing-function: ease-in-out;-ms-animation-timing-function: ease-in-out;animation-timing-function: ease-in-out;-webkit-animation-delay: 0s;-ms-animation-delay: 0s;animation-delay: 0s;-webkit-animation-play-state: running;-ms-animation-play-state: running;animation-play-state: running;}@-webkit-keyframes shaky-slow {0% {-webkit-transform: translate(0px, 0px) rotate(0deg);}2% {-webkit-transform: translate(-1px, 1.5px) rotate(1.5deg);}4% {-webkit-transform: translate(1.3px, 0px) rotate(-0.5deg);}6% {-webkit-transform: translate(1.4px, 1.4px) rotate(-2deg);}8% {-webkit-transform: translate(-1.3px, -1px) rotate(-1.5deg);}10% {-webkit-transform: translate(1.4px, 0px) rotate(-2deg);}12% {-webkit-transform: translate(-1.3px, -1px) rotate(-2deg);}14% {-webkit-transform: translate(1.5px, 1.3px) rotate(1.5deg);}16% {-webkit-transform: translate(1.5px, -1.5px) rotate(-1.5deg);}18% {-webkit-transform: translate(1.3px, -1.3px) rotate(-2deg);}20% {-webkit-transform: translate(1px, 1px) rotate(-0.5deg);}22% {-webkit-transform: translate(1.3px, 1.5px) rotate(-2deg);}24% {-webkit-transform: translate(-1.4px, -1px) rotate(2deg);}26% {-webkit-transform: translate(1.3px, -1.3px) rotate(0.5deg);}28% {-webkit-transform: translate(1.6px, -1.6px) rotate(-2deg);}30% {-webkit-transform: translate(-1.3px, -1.3px) rotate(-1.5deg);}32% {-webkit-transform: translate(-1px, 0px) rotate(2deg);}34% {-webkit-transform: translate(1.3px, 1.3px) rotate(-0.5deg);}36% {-webkit-transform: translate(1.3px, 1.6px) rotate(1.5deg);}38% {-webkit-transform: translate(1.3px, -1.6px) rotate(1.5deg);}40% {-webkit-transform: translate(-1.4px, -1px) rotate(-0.5deg);}42% {-webkit-transform: translate(-1.4px, 1.3px) rotate(-0.5deg);}44% {-webkit-transform: translate(-1.6px, 1.4px) rotate(0.5deg);}46% {-webkit-transform: translate(-2.1px, -1.3px) rotate(-0.5deg);}48% {-webkit-transform: translate(1px, 1.6px) rotate(1.5deg);}50% {-webkit-transform: translate(1.6px, 1.6px) rotate(1.5deg);}52% {-webkit-transform: translate(-1.4px, 1.6px) rotate(0.5deg);}54% {-webkit-transform: translate(1.6px, -1px) rotate(-2deg);}56% {-webkit-transform: translate(1.3px, -1.6px) rotate(-2deg);}58% {-webkit-transform: translate(-1.3px, -1.6px) rotate(0.5deg);}60% {-webkit-transform: translate(1.3px, 1.6px) rotate(-0.5deg);}62% {-webkit-transform: translate(0px, 0px) rotate(-1.5deg);}64% {-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);}66% {-webkit-transform: translate(1.6px, -1.6px) rotate(0.5deg);}68% {-webkit-transform: translate(0px, -1.6px) rotate(-2deg);}70% {-webkit-transform: translate(-1.6px, 1px) rotate(1.5deg);}72% {-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);}74% {-webkit-transform: translate(1.3px, -1.6px) rotate(-0.5deg);}76% {-webkit-transform: translate(1.4px, 1px) rotate(-0.5deg);}78% {-webkit-transform: translate(-1px, 1.4px) rotate(2deg);}80% {-webkit-transform: translate(1.4px, 1.6px) rotate(2deg);}82% {-webkit-transform: translate(-1.6px, -1.6px) rotate(-0.5deg);}84% {-webkit-transform: translate(-1.4px, 1.4px) rotate(-2deg);}86% {-webkit-transform: translate(1px, 1.4px) rotate(-2deg);}88% {-webkit-transform: translate(-1.4px, 1.4px) rotate(-1.5deg);}90% {-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);}92% {-webkit-transform: translate(-1.6px, 1.6px) rotate(2deg);}94% {-webkit-transform: translate(-1.6px, -1.6px) rotate(-2deg);}96% {-webkit-transform: translate(-1.4px, 1.3px) rotate(-2deg);}98% {-webkit-transform: translate(1.3px, 1px) rotate(-0.5deg);}}@keyframes shaky-slow {0% {transform: translate(0px, 0px) rotate(0deg);}2% {transform: translate(-1px, 1.5px) rotate(1.5deg);}4% {transform: translate(1.3px, 0px) rotate(-0.5deg);}6% {transform: translate(1.4px, 1.4px) rotate(-2deg);}8% {transform: translate(-1.3px, -1px) rotate(-1.5deg);}10% {transform: translate(1.4px, 0px) rotate(-2deg);}12% {transform: translate(-1.3px, -1px) rotate(-2deg);}14% {transform: translate(1.5px, 1.3px) rotate(1.5deg);}16% {transform: translate(1.5px, -1.5px) rotate(-1.5deg);}18% {transform: translate(1.3px, -1.3px) rotate(-2deg);}20% {transform: translate(1px, 1px) rotate(-0.5deg);}22% {transform: translate(1.3px, 1.5px) rotate(-2deg);}24% {transform: translate(-1.4px, -1px) rotate(2deg);}26% {transform: translate(1.3px, -1.3px) rotate(0.5deg);}28% {transform: translate(1.6px, -1.6px) rotate(-1.5deg);}30% {transform: translate(-1.3px, -1.3px) rotate(-1.5deg);}32% {transform: translate(-1px, 0px) rotate(2deg);}34% {transform: translate(1.3px, 1.3px) rotate(-0.5deg);}36% {transform: translate(1.3px, 1.6px) rotate(1.5deg);}38% {transform: translate(1.3px, -1.6px) rotate(1.5deg);}40% {transform: translate(-1.4px, -1px) rotate(-0.5deg);}42% {transform: translate(-1.4px, 1.3px) rotate(-0.5deg);}44% {transform: translate(-1.6px, 1.4px) rotate(0.5deg);}46% {transform: translate(-2.1px, -1.3px) rotate(-0.5deg);}48% {transform: translate(1px, 1.6px) rotate(1.5deg);}50% {transform: translate(1.6px, 1.6px) rotate(1.5deg);}52% {transform: translate(-1.4px, 1.6px) rotate(0.5deg);}54% {transform: translate(1.6px, -1px) rotate(-2deg);}56% {transform: translate(1.3px, -1.6px) rotate(-2deg);}58% {transform: translate(-1.3px, -1.6px) rotate(0.5deg);}60% {transform: translate(1.3px, 1.6px) rotate(-0.5deg);}62% {transform: translate(0px, 0px) rotate(-1.5deg);}64% {transform: translate(-1.6px, -1.6px) rotate(-2deg);}66% {transform: translate(1.6px, -1.6px) rotate(0.5deg);}68% {transform: translate(0px, -1.6px) rotate(-2deg);}70% {transform: translate(-1.6px, 1px) rotate(1.5deg);}72% {transform: translate(-1.6px, 1.6px) rotate(2deg);}74% {transform: translate(1.3px, -1.6px) rotate(-0.5deg);}76% {transform: translate(1.4px, 1px) rotate(-0.5deg);}78% {transform: translate(-1px, 1.4px) rotate(2deg);}80% {transform: translate(1.4px, 1.6px) rotate(2deg);}82% {transform: translate(-1.6px, -1.6px) rotate(-0.5deg);}84% {transform: translate(-1.4px, 1.4px) rotate(-2deg);}86% {transform: translate(1px, 1.4px) rotate(-2deg);}88% {transform: translate(-1.4px, 1.4px) rotate(-1.5deg);}90% {transform: translate(-1.6px, -1.6px) rotate(-2deg);}92% {transform: translate(-1.4px, 1.6px) rotate(2deg);}94% {transform: translate(-1.6px, -1.6px) rotate(-2deg);}96% {transform: translate(-1.4px, 1.3px) rotate(-2deg);}98% {transform: translate(1.3px, 1px) rotate(-0.5deg);}}
</style>
</head>
<body>
<p class="shaky">xcsharp博客</p>
</body>
</html>

动画效果3 - 旋转

  • 基本语法格式：

1、利用“元素{animation:名称 时间 infinite}”语句给元素绑定动画；2、利用“@keyframes 名称{100%{transform:rotate(旋转角度)}}”语句设置动画的旋转动作，实现元素一直旋转效果。
其中属性的值设置为“infinite”时，规定动画无限次播放，当我们给元素绑定旋转动画时就能够一直旋转了。

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">div{width:100px;height:100px;background-color:orange;animation:fadenum 5s infinite;}@keyframes fadenum{100%{transform:rotate(360deg);}}
</style>
</head>
<body>
<div>xcsharp博客</div>
</body>
</html>

动画效果4 - 变色

  • 基本语法格式：

background: linear-gradient（偏向角度,起始点颜色,终止点颜色）
background: linear-gradient（ top, left, bottom, center, right.）

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">
.changeColor{animation-name: anim1;animation-direction: alternate;animation-timing-function: linear;animation-delay: 0s;animation-iteration-count: infinite;animation-duration: 10s;
}@keyframes anim1{0% {background: linear-gradient(1deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);//背景色color:white; //文字颜色}25% {background: linear-gradient(60deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);color:orange;}50% {background: linear-gradient(120deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);color:black;}75% {background: linear-gradient(60deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);color:blue;}100% {background: linear-gradient(1deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);color:white;}
}
</style>
</head>
<body>
<div class="changeColor">xcsharp博客</div>
</body>
</html>

动画效果5 - 放大缩小

  • 基本语法格式：

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">
/*css部分*/
@keyframes scaleDraw {/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/0% {transform: scale(1);/*开始为原始大小*/}25% {transform: scale(1.5);/*放大1.1倍*/}50% {transform: scale(1);}75% {transform: scale(1.5);}100% {transform: scale(1);}
}
.changeColor {width: 150px;height: 200px;margin: 100px auto;-webkit-animation-name: scaleDraw;/*关键帧名称*/-webkit-animation-timing-function: ease-in-out;/*动画的速度曲线*/-webkit-animation-iteration-count: infinite;/*动画播放的次数*/-webkit-animation-duration: 5s;/*动画所花费的时间*//*可以简写为*//* animation: scaleDraw 5s ease-in-out infinite; *//* -webkit-animation: scaleDraw 5s ease-in-out infinite; */
}
</style>
</head>
<body>
<div class="changeColor">xcsharp博客</div>
</body>
</html>

动画效果6 - 翻转

  • 效果

  • 源码

<html>
<head>
<title>xcSharp博客</title>
<style type="text/css">body {background-color: orange;}
.xcsharp {
border-radius:100px;width: 100px;height: 100px;background-color: #fff;margin: 100px auto;-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {0% {-webkit-transform: perspective(120px)}50% {-webkit-transform: perspective(120px) rotateY(180deg)}100% {-webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)}
}
@keyframes sk-rotateplane {0% {transform: perspective(120px) rotateX(0deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)}50% {transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)}100% {transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);}
}
</style>
</head>
<body><div class="xcsharp"></div>
</body>
</html>

总结

上述几个动画效果，可以结合运用，比如放大的同时，可以改变颜色，可以旋转的方式放大；活学活用；

html里面的好看的动画效果相关推荐

  1. css3实现一些好看的动画效果

    我们知道css3动画可以实现很漂亮的动画效果,例如:水纹波动,电池充电...,那么下面看看如何实现的 1.水纹波动效果实现: html: <div class="sea"&g ...

  2. html 气泡动画效果,css3实现好看的气泡按钮动画特效

    CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...

  3. android 播放gif动画效果,android 通过帧动画方式播放Gif动画

    注意:经过本人测试,这个方法很耗内存, 图片一多就崩了.慎用 <1>用工具(photoshop或者FireWorks)将GIF动画图片分解成多个GIF静态图片,然后保存在res\drawa ...

  4. ppt模板怎么统一添加动画效果？

    ppt模板动画效果可以很好的提升ppt模板的观赏性和质感,现在ppt模板制作都自带一些动画效果,怎么使用这些动画效果呢?ppt家园来介绍一下统一给ppt模板素材添加动画效果的方法. 模板入口:http ...

  5. iOS简单好看的动画

    先是用xib拖的一个界面,用代码让各个视图动起来就制作成一个简单好看的动画效果了. 最终的动画效果: .h文件 #import <UIKit/UIKit.h> @interface Fir ...

  6. HTML5+CSS3小实例：简单又好看的加载动画效果

    HTML5+CSS3做一个简单又好看的加载动画效果,一个三色圆环转动,再加圆环内部文字转动,效果虽然简单,但第一次看到还是很惊艳的,最主要一点,代码真的超简单的. 效果: 源码: <!DOCTY ...

  7. 好看的多级菜单html,jQuery实现美观的多级动画效果菜单代码

    本文实例讲述了jQuery实现多级动画效果菜单代码.分享给大家供大家参考.具体如下: 这是基于jQuery实现的一款多级动画菜单源代码,动画效果流畅,确实不错的动画菜单,欢迎大家试用.这种菜单 一般应 ...

  8. 好看的照片效果html,9款超绚丽的HTML5 3D图片动画特效

    1.SVG玫瑰花盛开动画 SVG还是很强大的,我们之前也分享过很多利用SVG绘制出来的各种动画特效.比如超炫酷的SVG轮船行驶动画和HTML5 SVG圆形钢琴动画都是用SVG实现的超酷动画.今天我们要 ...

  9. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

最新文章

  1. 【五线谱】拍号与音符时值 ( 全音符 | 二分音符 | 四分音符 | 八分音符 | 十六分音符 | 三十二分音符 )
  2. Matlab 矩阵计算例子
  3. 算法竞赛入门经典(第二版) | 程序3-6 WERTYU (UVa 10082)(常量数组)
  4. centos yum方式安装nginx 并支持https
  5. LuaTinker向Linux移植成功
  6. Android-JNI开发系列《十一》实践-利用Android C源码实现GIF图片的播放
  7. 组队APP功能点定点NABCD分析
  8. 智能实验室－全能优化(Guardio) 4.6.0.760
  9. JavaScript专题之跟着 underscore 学节流
  10. Lady Gaga 发起“云演唱会”，美高校推“云毕业典礼”！云直播迎来又一风口？...
  11. 微信小程序-colorUI组件库
  12. robo3t 1.3.1 安装教程
  13. Java编程练习题：Demo17-Demo32
  14. 【Qt】解决“ QStandardPaths: XDG_RUNTIME_DIR not set, defaulting to ‘/tmp/runtime-root‘ ”
  15. 2022年第十三届蓝桥杯大赛软件类国赛 C/C++ 大学B组
  16. 05决策树与随机森林（学习笔记）
  17. 幻核退出 “数字藏品有何用”阶段性无解
  18. 2021-2022学年广州市南武中学七年级第一学期期中考试英语试题
  19. 推荐一本书《Atomic Habits》
  20. dockers-系统学习-docker compose服务编排

热门文章

  1. poj 1423 stirling公式（阶乘的位数）
  2. 手动json校验格式化
  3. 第二课：Mstar-Non-OS方案(二)——驱动LVDS显示屏
  4. 【CF #790 D. X-Sum】正反对角线和模拟
  5. 有关植物的一些基本定义
  6. MAUI 框架入门学习01
  7. java PTA 找到出勤最多的人
  8. pyInstall使用
  9. iMeta | 杨跃进/熊长明/郑乐民综述琥珀酸的多效性：肠道菌群与心血管疾病的相互作用...
  10. PHP中使用mpdf导出PDF文件以及生成PDF的方法