<!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. ShoneSharp语言(S#)的设计和使用介绍系列（7）— 布尔Bool及对象Object

    ShoneSharp语言(S#)的设计和使用介绍 系列(7)— 布尔Bool及对象Object 作者:Shone 声明:原创文章欢迎转载,但请注明出处,https://www.cnblogs.com/ ...

  2. Java效率工具Lombok使用与原理

    Java效率工具Lombok使用与原理 我个人觉得 Lombok是一个优化Java代码以及提升开发效率不错的工具.Lombok 的Github地址为:https://github.com/rzwits ...

  3. centOS 6.8下使用Gparted进行分区扩容

    centOS 6.8下使用Gparted进行分区扩容 ​ 机器环境:windows上运行的VMware虚拟机,系统为centOS 6.8. ​ 由于前期分区分配空间过小,无法满足后续的数据存储预期,所 ...

  4. 使用容器化块存储OpenEBS在K3s中实现持久化存储

    作者简介 Giridhara Prasad,Mayadata Inc.首席工程师.在软件测试自动化.混沌工程(chaos engineering)方面有丰富的经验.目前,他正在研究开源混沌工程项目Li ...

  5. windows+vs2017+C语言 引入mysql.h对MYSQL数据库的操作

    mysql.h文件用作VS开发用,用来连接数据库.没有mysql.h文件,就无法调用mysql的东西 也无法用C语言对MYSQL操作. 一般安装了mysql之后,这个文件就在mysql目录的inclu ...

  6. Java IO（五）字节流 FileInputStream 和 FileOutputStream

    Java IO(五)字节流 FileInputStream 和 FileOutputStream 一.介绍 字节流 InputStream 和 OutputStream 是字节输入流和字节输出流的超类 ...

  7. Chisel3 - model - DefWire, Reg, Memory, Prim

    https://mp.weixin.qq.com/s/KkkqvekWHG6yrqwHUECRIw   介绍如何定义Wire/Reg/Memory/Prim.   1. DefWire   Wire( ...

  8. 前端HTML学习 table标签 知识点与使用

    表格基本结构 <table> <tr> <td>单元格</td> </tr> </table> < tr >表示 行 ...

  9. Java并发编程 (四) 线程安全性

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.线程安全性-原子性-atomic-1 1.线程安全性 定义: 当某个线程访问某个类时,不管运行时环境 ...

  10. Java实现 LeetCode 498 对角线遍历

    498. 对角线遍历 给定一个含有 M x N 个元素的矩阵(M 行,N 列),请以对角线遍历的顺序返回这个矩阵中的所有元素,对角线遍历如下图所示. 示例: 输入: [ [ 1, 2, 3 ], [ ...