<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .contain {

            padding: 100px 20px;

            display: flex;

        }

        .demo {

            width: 200px;

            height: 140px;

            background: red;

            text-align: center;

            line-height: 140px;

            margin-left: 20px;

            /* 动画整个过程持续0.4s，移入和移出持续0.4s； 谁动画,动画状态写谁  */

            transition: all 0.4s;

        }

        /* 鼠标移入的时候 div向上移动8px */

        .demo:hover {

            background: pink;

            margin-top: -8px;

        }

    </style>

</head>

<body>

    <div class="contain">

        <div class="demo">

            我是文字

        </div>

        <div class="demo">

            我是文字

        </div>

        <div class="demo">

            我是文字

        </div>

        <div class="demo">

            我是文字

        </div>

    </div>

</body>

ccs3动画-div向上移动的动画的更多相关文章

  1. html+ccs3太阳系行星运转动画之土星有个环，地球有颗小卫星

    在上一篇<html+ccs3太阳系行星运转动画>中实现了太阳系八大行星的基本运转动画. 太阳系又何止这些内容,为丰富一下动画,接下来增加“土星环”和“月球”来充盈太阳系动画. 下面是充盈后 ...

  2. 一个纯CSS DIV天气动画图标【转扒的】

    <p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...

  3. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  4. JavaScript实现页面滚动到div区域div以动画方式出现

    用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果 要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

  5. css3实现循环执行动画，且动画每次都有延迟

    一.最终效果 需求:gift图片的小动画每隔2s执行一次. 需求就一句话,我们看一下实现过程. 二.实现过程 1.网页结构 <!DOCTYPE html> <html lang=&q ...

  6. 锋利的jQuery-4--停止动画和判断是否处于动画状态(防止动画加入队列过多的办法)

    1.停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态. 无参数stop():立即停 ...

  7. css3动画和jquery动画使用中要注意的问题

    前一阵子写demo的时候遇到这样一个问题,就是给元素添加css3或者jquery动画时,在动画结束前不能准确取到元素的css属性. 1. css3动画讨论 先看代码: html: <div id ...

  8. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

  9. jQuery-4.动画篇---自定义动画

    jQuery中动画animate(上) 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就需要强大的animate方法了 操作一个元素执行3秒的淡入动画,对比一下2组动画设置的区别 $(e ...

  10. React动画组件——React-Transitio-group动画实现

    React动画组件--React-Transitio-group动画实现 安装 项目目录下使用命令行 yarn add react-transition-group 安装组件.在需要使用动画的页面加入 ...

随机推荐

  1. 实例讲解FusionInsight MRS RTD 实时决策引擎在医保行业应用

    摘要: 通过引入FusionInsight RTD实时决策系统,实现医保费用事前预防.事中控制.事后审核的全流程管理 本文分享自华为云社区<FusionInsight MRS RTD 实时决策引 ...

  2. 开心档之MySQL 数据类型

    MySQL 数据类型 MySQL 中定义数据字段的类型对你数据库的优化是非常重要的. MySQL 支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 数值类型 MySQL 支持所有 ...

  3. MySQL java new dat() 后插入数据库的时间不一致

    别用时间字段,做为关联字段,代码里的时间和插到数据库中有误差 MySQL java new dat() 后插入数据库的时间不一致,代码里new 的时间插到数据库中不一致

  4. 【Java 进阶】Java8 新特性的理解与应用

    [进阶]Java8新特性的理解与应用 前言 Java 8是Java的一个重大版本,是目前企业中使用最广泛的一个版本. 它支持函数式编程,新的Stream API .新的日期 API等一系列新特性. 掌 ...

  5. pod内部网络实现

    k8s主题系列: 一.k8s网络之设计与实现 二.k8s网络之pod内部网络 三.k8s网络之Flannel网络 四.k8s网络之Calico网络 pod特性 Pod 是 K8S 的最小工作单元.每个 ...

  6. C#9.0：Improved Pattern Matching

    增强的模式匹配 C#9.0添加了几种新的模式.我们可以参阅模式匹配教程 ,来了解下面代码的上下文: 1 public static decimal CalculateToll(object vehic ...

  7. AnaConda 虚拟环境创建失败的解决方案

    问题:创建环境时,AnaConda界面下放一直显示正在创建中,然后过几分钟报错! 我的解决方法:--关闭 VPN... 其他解决方案请参考这篇文章:Here

  8. UVA - 10935：Throwing cards away I （简单模拟）

    题目大意 桌上有一叠牌,自上而下编号为1~n.若桌上牌数大于1张,那么丢弃一张顶部牌后,再将现在的顶部牌移到最后.要求给出模拟过程和最终剩余的牌号 思路分析 典型队列模拟,丢弃即出队,移到最后即入队, ...

  9. vivo 调用链 Agent 原理及实践

    一.项目背景 2017年,vivo互联网研发团队认为调用链系统对实际业务具有较大的价值,于是开始了研发工作.3年的时间,调用链系统整体框架不断演进--本文将介绍vivo调用链系统 Agent 技术原理 ...

  10. ASP.NET Core 5.0 MVC 页面标记帮助程序的使用

    什么是标记帮助程序 标记帮助程序使服务器端代码可以在 Razor 文件中参与创建和呈现 HTML 元素.标记帮助程序使用 C# 创建,基于元素名称.属性名称或父标记以 HTML 元素为目标. 创建标记 ...