简单动画

（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. RESTful API Design

    https://restful-api-design.readthedocs.org/en/latest/scope.html http://blog.mashape.com/30-ways-to-m ...

  2. C++入门经典-例5.15-回收动态内存的一般处理步骤

    1:正确的步骤应该是如下代码所示: // 5.15.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostrea ...

  3. ajaxfrom 和ajaxgird的区别

    ajaxfrom 和ajaxgird区别ajaxfrom适合单条数据,主要是用来显示主表的信息<hy:ajaxform2 id="ajaxform" name="d ...

  4. 关于ArrayList的越界问题？

    大家都知道 ArrayList是自动扩容的. 那为什么会存在越界问题? 话不多说 上代码 package test; import java.util.ArrayList; public class ...

  5. golang channel关闭后，是否可以读取剩余的数据

    golang channel关闭后,其中剩余的数据,是可以继续读取的. 请看下面的测试例子. 创建一个带有缓冲的channel,向channel中发送数据,然后关闭channel,最后,从channe ...

  6. 关于eclipse安装插件的问题

    使用eclipse(luna)不行,其为安装了ee有关插件的 使用eclipse(Juno)可以,其为原生版本

  7. 代码实现:两个乒乓球队进行比赛，各出三人。甲队为a,b,c三人，乙队为x,y,z三人。 已抽签决定比赛名单。有人向队员打听比赛的名单。 a说他不和x比，c说他不和x,z比，请编程序找出三队赛手的名单

    /*两个乒乓球队进行比赛,各出三人.甲队为a,b,c三人,乙队为x,y,z三人. 已抽签决定比赛名单.有人向队员打听比赛的名单. a说他不和x比,c说他不和x,z比,请编程序找出三队赛手的名单.*/ ...

  8. Idea创建项目后，提交项目到码云的问题

    1.创建git仓库:vcs->import int version control->Create git repository 2.在项目头点击右键->git->add 3. ...

  9. vue2创建webpack项目build之后无法正常显示页面的问题

    最近在做vue项目的时候,项目正常运行,但是当我打包上线之后,却出现无法出现页面空白的情况,打开控制台,发现无法加载到css和js文件. 仔细观察发现路径中少了一个dis文件夹,于是我加上dist文件 ...

  10. GET 和 POST 区别？网上多数答案都是错的！

    最近在看<HTTP权威指南>这本书,对HTTP协议有了更深一层的了解. 在我们面试过程中关于HTTP协议有两个经典的面试题: 1. 谈谈HTTP中GET与POST的区别. 2. 在浏览器中 ...