简单动画

(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))

以下代码所示,第一部分展示的是一个,当鼠标移动到图片上时,显示另一张(底下)的图片;

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画和变形练习</title>
</head>
<style>
/* 第一个部分,设置当鼠标滑动到图片上时,显示底下的图片 */ .box {
width: 300px;
height: 300px;
position: relative;
} .box img {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
} .show1 {
transition: all 3s;
} .show1:hover {
opacity: 0;
}
<body>
<div class="box">
<img src="img/2010011712541728.jpg" alt="">
<img src="img/2010011712541759.jpg" alt="" class="show1">
</div>
</body> </html>

效果如下:

以下代码展示的是利用简单动画制作出轮播图的效果,当鼠标移动到图片上时,后面的图片推动前面的图片,从而达到轮播的效果;

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画和变形练习</title>
</head>
<style> /* 第二个部分 */ .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;
} </style> <body> <!-- 第二部分 --> <div class="content">
<div class="imgs">
<img src="img/2010011712541728.jpg" alt="">
<img src="img/2010011712541759.jpg" alt="" class="show">
</div>
</div>
<hr> </body> </html>

效果如下:

以下代码展示的是当鼠标移动到图片上时,四周都散发阴影效果;

 <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动画和变形练习</title>
</head>
<style> /* 第三个部分 */ .box3 {
width: 300px;
height: 300px;
transition: all 3s;
position: relative;
} .box3 img {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
} .box3:hover {
box-shadow: 0 0 4px 15px rgba(233, 22, 233, 0.5)
}
</style> <body> <!-- 第三部分 -->
<div class="box3">
<img src="img/2010011712541728.jpg" alt="" class="show3">
<img src="img/2010011712541759.jpg" alt="">
</div>
</body> </html>

效果如下:

HTML-简单动画的更多相关文章

  1. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  2. jquery添加光棒效果的各种方式以及简单动画复杂动画

    过滤器.绑定事件.动画   一.基本过滤器 语法 描述 返回值 :first 选取第一个元素 单个元素 :last 选取最后一个元素 单个元素 :not(selector) 选取去除所有与给定选择器匹 ...

  3. UIView简单动画

    UIView动态实现的效果有以下几种: 1.动态改变frame 2.动态改变color 3.动态改变alpha 4.动态改变bounds 首先,我们先看几种BasicView动画 #pragma ma ...

  4. IOS 简单动画 首尾式动画

    首尾式动画 首尾式动画即通过实现控件由初始状态到结束状态的过程.(主要表现在控件的Frame 透明度 ) // // ViewController.m // CX 简单动画 // // Created ...

  5. jQuery中自定义简单动画的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  6. canvas制作简单动画

    在画布元素<canvas>中,除了绘制图形.图像.文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作: 1.自定义一个函数,用于图形的移动或其他动作. 2.使用setIn ...

  7. Cocos2d-x 2.1.5 简单动画

    Cocos2d新版本函数更改了一些. 下面的代码可以产生一个简单动画. //第一步:生成动画需要的数据 CCTexture2D *texture=CCTextureCache::sharedTextu ...

  8. UI设计篇·入门篇·简单动画的实现,透明动画/旋转动画/移动动画/缩放动画,混合动画效果的实现,为动画设置监听事件,自定义动画的方法

    基本的动画构成共有四种:透明动画/旋转动画/移动动画/缩放动画. 配置动画的方式有两种,一种是直接使用代码来配置动画效果,另一种是使用xml文档配置动画效果 相比而言,用xml文档写出来的动画效果,写 ...

  9. python实现简单动画——生命游戏

    生命游戏 生命游戏的宇宙是一个无限的,其中细胞的二维正交网格,每个细胞处于两种可能的状态之一,即*活着*或*死亡*(分别是*人口稠密*和*无人居住*).每个细胞与它的八个邻居相互作用,这八个邻居是水平 ...

  10. Blender简单动画:一个小球从一座山上滚下.

    简单动画:一个小球从一座山上滚下.注:[key]方括号内是快捷键; {大括号}内是模式,页签名称或选项等. ==== 1. 建模:    == 1.1 山[shift A] 建立平面plane,可以大 ...

随机推荐

  1. 新建Spring boot 启动报错 Failed to auto-configure a DataSource

    今天学习springboot,使用idea创建项目.在选择组件时添加了mysq 然后在第一次启动的时候启动报错,错误信息如下: ***************************APPLICATI ...

  2. 2019年9月17 发布 Java 13

    Java 13 明天发布,最新最全新特性解读   2017年8月,JCP执行委员会提出将Java的发布频率改为每六个月一次,新的发布周期严格遵循时间点,将在每年的3月份和9月份发布. 目前,JDK官网 ...

  3. 亮瞎你狗眼的写代码体验狂拽酷炫效果 activate-power-mode

    年末了,整理一些收藏的资料,没想到发现一个敲代码的装逼神器; 话不多说上图 我是用idea装的,其他编辑器请自行查找 Preferences -> Plugins -> Install p ...

  4. leetcode-easy-others-268 Missing Number

    mycode   80.25% class Solution(object): def missingNumber(self, nums): """ :type nums ...

  5. 浏览器端-W3School-浏览器端:JavaScript Array 对象

    ylbtech-浏览器端-W3School-浏览器端:JavaScript Array 对象 1.返回顶部 1. Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对 ...

  6. 【python3】configparser读取ini配置文件

    在应用过程中,发现下面这个问题: cf=configparser.ConfigParser()读取配置文件时,如果数据包含%这们析特殊符号,就会报出上面的错误,使用cf = configparser. ...

  7. 十一:jinja2模板传参

    从后台传参到模板,模板再渲染到前端 传参的时候,可以在html后面加上关键字传参,在模板里面用{{ 参数 }}使用即可,可以传多个参数 也可以使用**传参,取值的时候就直接取内容

  8. CentOS mysql安装

    MySQL For Excel 1.3.5MySQL for Visual Studio 1.2.5MySQL Fabric 1.5.6 & MySQL Utilities 1.5.6Conn ...

  9. 修改Windows 2008以后系统的NTP服务设置

    @echo off echo autor OAK @echo off echo -------------------------------- @echo off echo setup time r ...

  10. SSH整合项目----在线商城

    1.1 网上商城需求分析 1.1.1    前台:用户模块. 注册: * JS非空校验.(不是必须) * Struts2数据校验:在注册Action类同一包下新建UserAction-user_reg ...