<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. Cesium球心坐标与本地坐标系经纬转换的数学原理—矩阵变换

    之前整理过:<透析矩阵,由浅入深娓娓道来-高数-线性代数-矩阵>.<三维旋转笔记:欧拉角/四元数/旋转矩阵/轴角-记忆点整理>,这次转载 FuckGIS的<Cesium之 ...

  2. 火山引擎 DataTester 应用故事：一个 A/B 测试，将产品 DAU 提升了数十万

      更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 疫情让线下的需求大量转移到线上,催生出了远程办公.网络授课.线上健身等新的生态现象.如何更好地为用户服务,提升 ...

  3. WebApi 接口请求耗时记录

    .Net Core NLog 配置 通过日志,记录每个接口请求的耗时情况 结合  <logger name="*" level="Trace" write ...

  4. SSL 证书过期巡检脚本

    哈喽大家好,我是咸鱼 我们知道 SSL 证书是会过期的,一旦过期之后需要重新申请.如果没有及时更换证书的话,就有可能导致网站出问题,给公司业务带来一定的影响 所以说我们要每隔一定时间去检查网站上的 S ...

  5. Hottest 30 of codeforce

    1. 4A.Watermelon 题目链接:https // s.com/problemset/problem/4/A 题意:两人分瓜,但每一部分都得是偶数 分析:直接 对2取余,且 w != 2 # ...

  6. 2017年第八届 蓝桥杯A组 C/C++决赛题解

    蓝桥杯历年国赛真题汇总:Here 1. 平方十位数 由0~9这10个数字不重复.不遗漏,可以组成很多10位数字. 这其中也有很多恰好是平方数(是某个数的平方). 比如:1026753849,就是其中最 ...

  7. <vue初体验> 基础知识 4、 vue的生命周期

    系列导航 <vue初体验> 一. vue的引入和使用体验 <vue初体验> 二. vue的列表展示 <vue初体验> 三. vue的计数器 <vue初体验&g ...

  8. 【RK3399】1.RK3399开发板基础配置

    最近在小黄鱼入手了一个RK3399的开发板,RK的芯片我也是第一次使用.FireFly配套提供了完善的教程,可以在他们的WIKI上找到.上面有的内容就不在本文叙述了,大家可以参考教程https://w ...

  9. C# ，使用“^”运算符对数字加密

    原理:"异或"运算符"^", 用于比较两个二进制数的响应位.计算过程如果两个二进制数的相应位都为1或两个二进制数的相应位都为0,则返回0:如果两个二进制数的相应 ...

  10. 03-Tcl数学表达式及expr命令

    3 Tcl书写表达式及expr命令 Tcl提供了有效的数学运算和逻辑运算功能.通过expr可以实现对数学表达式的分析和计算. 3.1 数学与逻辑运算符 运算符 说明 - + ~ ! 一元减(取负).一 ...