<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             *{

                 margin: 0;

                 padding: 0;

             }

             .box{

                 width: 500px;

                 height: 400px;

                 background: pink;

             }

             .txt1{

                 background: red;

                 color: #fff;

                 font-size: 20px;

                 font-weight: bold;

                 transform: translateY(20px);

                 transition: 1s;

             }

             .txt2{

                 background: red;

                 color: skyblue;

                 font-weight: bold;

                 transform: translateY(300px);

                 transition: 1s;

             }

             .box:hover .txt1{

                 transform: translateY(60px);

             }

             .box:hover .txt2{

                 transform: translateY(200px);

             }

         </style>

     </head>

     <body>

         <div class="box">

             <p class="txt1">哈哈哈哈哈哈哈呵呵</p>

             <p class="txt2">哈哈哈哈哈哈哈呵呵</p>

         </div>

     </body>

 </html>

css3动画特效代码的更多相关文章

  1. css3动画特效：上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  2. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  3. 9种jQuery和css3图片动画特效代码演示

    1.自由旋转的jQuery图片 演示和下载地址 2.css3阴影动画效果 演示和下载地址 3.拉窗帘特效图片 演示和下载地址 4.css3文字特效动画 演示和下载地址 5.css3时钟代码 演示和下载 ...

  4. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  5. 分享7款顶级的CSS3动画特效

    1.CSS3 SVG文字背景动画 超酷的文字特效 今天我们来分享一款基于CSS3和SVG的文字特效,文字的背景可以定义一些动画特效,在背景动画播放的同时,我们还可以选中文字.本示例让文字背景展示水波和 ...

  6. css3动画特效：纯css3制作win8加载动画特效

    Windows 8     完整效果如上图:这个里面可能是css冲突,喜欢的可以自己去体征一下:   css特效代码: <style type="text/css"> ...

  7. 基于css3炫酷页面加载动画特效代码

    基于CSS3实现35个动画SVG图标.这是一款基于jQuery+CSS3实现的SVG图标动画代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&qu ...

  8. CSS3动画特效——transform详解

    transform让css3可以做很优质的特效,transform的意思是:改变,使-变形,转换. 在css3中transform的作用也是改变,让元素倾斜,旋转,缩放,位移. 下面来一一分解tran ...

  9. css3动画特效集合

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

随机推荐

  1. vue触发事件的五个关键字

    v-on    vue中提供了v-on事件绑定    v-on:click='函数';    v-on可以使用@代替 vue  五个触发事件关键字    .stop 用于阻止冒泡    例如 div1 ...

  2. Linux 番茄时钟 定时 取消 快捷方式

    shell 脚本 clock.sh #!/bin/bash if [ $1 == 0 ] then at -d `atq | awk -v ORS=" " '{a[NR]=$1} ...

  3. Qt版本中国象棋开发（一）

    开发目的:实现象棋人机对战简单AI,网络对战,移植到android中. 开发平台:windows10 + Qt5.4 for android 开发语言:C++ 开发过程:1.棋盘绘制: 方法一:重写  ...

  4. 看完这篇还不懂Redis的RDB持久化，你们来打我！

    一.为什么需要持久化 redis里有10gb数据,突然停电或者意外宕机了,再启动的时候10gb都没了?!所以需要持久化,宕机后再通过持久化文件将数据恢复. 二.优缺点 1.rdb文件 rdb文件都是二 ...

  5. 虚拟机安装中标麒麟桌面版7.0系统 + 升级Firefox浏览器

    背景 由于公司业务(政府项目)需要走国产化路线,需要把原来已有的产品在国产的系统进行测试.目前选择的是中标麒麟系统,这是一款国产系统,界面 UI 和 window 类似,系统内核使用的是 Linux ...

  6. 03 . MysSQL权限和备份

    MySQL权限介绍 mysql中存在4个控制权限的表,分别为 user db tables_priv columns_priv 用户和权限内容放在mysql库中,该库中有一张名为user的表,记录了用 ...

  7. 解决SpringBoot在后台接收前台传递对象方式

    问题描述 前台传递对象,不管是通过ajax请求方式,还是axios请求方式.后台应该怎么接收对象处理呢? 比如前台传递 ajax方式: $.ajax({ url: "后台的方式", ...

  8. Java实现 LeetCode 803 打砖块 （DFS）

    803. 打砖块 我们有一组包含1和0的网格:其中1表示砖块. 当且仅当一块砖直接连接到网格的顶部,或者它至少有一块相邻(4 个方向之一)砖块不会掉落时,它才不会落下. 我们会依次消除一些砖块.每当我 ...

  9. Java实现 蓝桥杯VIP 算法训练 平方计算

    问题描述 输入正整数a, m,输出a2%m,其中表示乘方,即a^2表示a的平方,%表示取余. 输入格式 输入包含两个整数a, m,a不超过10000. 输出格式 输出一个整数,即a^2%m的值. 样例 ...

  10. Java实现蓝桥杯VIP 算法训练 阶乘末尾

    试题 算法训练 阶乘末尾 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 给定n和len,输出n!末尾len位. 输入格式 一行两个正整数n和len. 输出格式 一行一个字符串,表示 ...