html 简单动画效果,HTML-简单动画
简单动画
(1)简单动画通常称之为“过渡transition”
transition-property：需要过渡的属性，但是并非所有的属性都支持过渡。
transition-duration：过渡的时间；
简写：transition：all 时间；
(2)渐变时间函数
transition-timing-function——css属性以何种速度进行渐变
贝塞尔曲线的预设值：
ease：渐快，匀速，减慢(cubic-bezier(0.25,0.1,0.25,1))
ease-in：渐快，匀速(cubic-bezier(0.42,0,1,1))
ease-out：匀速，减慢(cubic-bezier(0,0,0.58,1))
ease-in-out：和ease类似，相比ease的加速度大(幅度大)(cubic-bezier(0.42,0,0.58,1))
linear：全程匀速(cubic-bezier(0,0,1,1))
以下代码所示，第一部分展示的是一个，当鼠标移动到图片上时，显示另一张(底下)的图片；
1
2
3
4
5
6
7
8
动画和变形练习
9
10
11 /* 第一个部分，设置当鼠标滑动到图片上时，显示底下的图片 */
12
13 .box {
14 width: 300px;
15 height: 300px;
16 position: relative;
17 }
18
19 .box img {
20 width: 300px;
21 height: 300px;
22 position: absolute;
23 left: 0;
24 top: 0;
25 }
26
27 .show1 {
28 transition: all 3s;
29 }
30
31 .show1:hover {
32 opacity: 0;
33 }
34
35
36 
37 
38
39
40
41
效果如下：
以下代码展示的是利用简单动画制作出轮播图的效果，当鼠标移动到图片上时，后面的图片推动前面的图片，从而达到轮播的效果；
动画和变形练习
/* 第二个部分 */
.content {
width: 500px;
height: 300px;
overflow: hidden;
}
.imgs img {
width: 500px;
height: 300px;
}
.imgs {
width: 1100px;
height: 300px;
transition: all 3s;
display: flex;
justify-content: flex-start;
}
.imgs:hover {
margin-left: -500px;
}
效果如下：
以下代码展示的是当鼠标移动到图片上时，四周都散发阴影效果；
1
2
3
4
5
6
7
8
动画和变形练习
9
10
11
12 /* 第三个部分 */
13
14 .box3 {
15 width: 300px;
16 height: 300px;
17 transition: all 3s;
18 position: relative;
19 }
20
21 .box3 img {
22 width: 300px;
23 height: 300px;
24 position: absolute;
25 left: 0;
26 top: 0;
27 }
28
29 .box3:hover {
30 box-shadow: 0 0 4px 15px rgba(233, 22, 233, 0.5)
31 }
32
33
34
35
36
37
38
39
40
41
42
43
效果如下：
html 简单动画效果,HTML-简单动画相关推荐
- 欢迎界面动画效果的简单实现
欢迎界面(Splash)是应用呈现给用户的第一个界面,一般来讲,我们会给欢迎界面加上一个动画效果,从而给用户一个较好的第一印象.而欢迎界面通常不会放太多的view,一般只有一个背景(backgroun ...
- php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
- 西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板，炫酷的扁平式动画效果，脚本动画，自动生成二维码，可仿真，堪比智能手机，有精简，精致，wincc，无线面板等包含了所有西门子人机界
西门子界面官方精美触摸屏+WINCC程序模板 西门子官方触摸屏程序模板,炫酷的扁平式动画效果,脚本动画,自动生成二维码,可仿真,堪比智能手机,有精简,精致,wincc,无线面板等包含了所有西门子人机界 ...
- html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果（带动画）
效果 自上而下渐隐渐现 源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
- 旋转360 css 动画效果,使用CSS3动画属性实现360°无限循环旋转【代码片段】
使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: //图片路径自定义 CSS样式书写如下: #change{ position:absolute; right:200 ...
- iOS实现“下雨下雪”动画效果和“烟花”动画效果
"下雨"的动画效果 一.效果展示 二.实现流程 设置背景 func setupUI() {self.imageView = UIImageView.init()self.image ...
- Swing实现动画效果(实现Loding动画)【转载】
申明: 以下代码非本人原创,原创地址:原创链接 本人只是在原作者博客的基础上进行理解.修改.添加注释 思路说明: 概览: 利用Timer(计时器)更改变量X的值和重写paintComponent方法实 ...
- 动画效果html5,HTML5动画效果
html5动画效果 这篇文章涉及到的内容有: 2d,3d的转换 过度效果 动画 多列 1.2d,3d转化 2d,3d转化是指对元素的外观进行一些操作,例如: 移动元素 旋转 缩放 倾斜 3d转换 接下 ...
- css3 - 图标元素动画效果5 - 弹性动画效果
在线演示(刷新一下动画效果明显) 让图标运动到终点时,并非减速停止在终点,而是到达终点后继续向上运动,超过一定距离后再反方向运动到终点,形成一种往复的效果. 我们可以使用帧动画来实现这样的效果,但是如 ...
- html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
最新文章
- CVPR 2022官方发布重要通知，禁止审稿期公开传播论文，静默期4个多月
- 复杂查询练习_《从零学会SQL：简单查询》第二关 简单查询
- 电脑电池修复_笔记本电脑不充电是怎么回事？
- 【转】SharePoint 编程指南
- 可输入可选择的input
- PHP扩展详解(一)
- Linux磁盘分区之fdisk命令
- Android入门笔记09
- 操作系统学习思维导图——2处理器管理
- JS实现自定义右键菜单
- php日期函数实际应用,PHP日期函数的使用介绍
- flask中jinjia2模板引擎的使用详解3
- 数据结构 常见排序算法 LOWB三人组 冒泡 选择 插入
- 10岁小表妹也能“吃透”Geth 客户端 ！360秒，快速部署 ICO Token
- Win10 Ubuntu16.04 时间同步问题
- 郭东白：“系统是唐僧，我们是孙悟空”，阿里AliExpress演绎技术版西游记
- RN-Flex Box---基础
- 线性代数系列（十一）--正交矩阵和正交化
- 全球云计算大会|TcaplusDB一举斩获优秀解决方案奖
- kotlin 之函数进阶