<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. Codeforces Round #481 (Div. 3) 经典几道思维题

    A - AAA POJ - 3321 给你一颗树,支持两种操作 1.修改某一节点的权值 2.查询子树的权值(子树中节点的个数) 很显然可以用树状数组/线段树维护 B - BBB CodeForces ...

  2. AcWing 第 2 场周赛

    比赛链接:Here AcWing 3626. 三元一次方程 暴力即可 void solve() { int n; cin >> n; for (int i = 0; i <= n / ...

  3. Educational Codeforces Round 107 (Rated for Div. 2) 个人题解（A~D）

    补题链接:Here 1511A. Review Site 题意:\(n\) 个影评人,\(a_i\) 有三种类型,如下 \(a_i = 1\) ,则表示支持 \(a_i = 0\) ,则表示不支持 \ ...

  4. vivo 互联网业务就近路由技术实战

    一.问题背景 在vivo互联网业务高速发展的同时,支撑的服务实例规模也越来越大,然而单个机房能承载的机器容量是有限的,于是同城多机房甚至多地域部署就成为了业务在实际部署过程中不得不面临的场景. 一般情 ...

  5. oracle开机自动重启

    数据库服务器如果由于某种原因重启了,oracle数据库是不会重新启动的,那么如何配置可以完成操作系统重启数据库服务器自动重启. 注:如下样例根据我的实际oracle安装路径写的,使用时根据实际安装路径 ...

  6. ECharts大屏数据可视化展板项目 适配rem

    1.在utils文件夹里新建一个rem.js 2.main.js中引入rem.js 3.vscode中下载cssrem插件,配置Root Font Size大小,为1920/20 = 96. 重启vs ...

  7. RLHF · PbRL | QPA：选择 near on-policy query，加速 policy learning 收敛速度

    论文题目:Query-Policy Misalignment in Preference-Based Reinforcement Learning,ICLR 2023 Spotlight(8 6 6) ...

  8. The project description file (.project) for XXX is missing

    在STS中切换项目分支的时候,出现一个项目打不开了,提示:The project description file (.project) for XXX is missing 试了下网上的方法都没有解 ...

  9. 【南大静态代码分析】作业 2：常量传播和 Worklist 求解器

    作业 2:常量传播和 Worklist 求解器 题目链接:https://tai-e.pascal-lab.net/pa2.html 评测链接:https://oj.pascal-lab.net/pr ...

  10. 【ArgParse】一个开源的入参解析库

    项目地址:argtable3 本地验证: 编译构建 新增验证 // examples/skull.c #include "argtable3.h" int main(int arg ...