<!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. jq代替jsdom操作部分

    接触js后学习了一些js操作html的方法    js可以配合css完成许多动画和操作.初次接触jquery感觉不是很习惯,毕竟js有了习惯,但是jq还是省去了很多繁琐的操作步骤.    首先使用之前 ...

  2. iptables基本用法

    iptables选项参数 [root@test ~]# iptables --help -L #列出指定表所有链上的所有规则,本选项须置于-n选项后面 -n #以数字格式显示地址和端口号 -v #详细 ...

  3. 剑指Offer之二进制中1的个数

    题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示.     解法1:使用Integer.toBinanryString()返回int变量的二进制表示的字符串. [在Intege ...

  4. HTTP 规范中的那些暗坑

    HTTP 协议可以说是开发者最熟悉的一个网络协议,「简单易懂」和「易于扩展」两个特点让它成为应用最广泛的应用层协议. 虽然有诸多的优点,但是在协议定义时因为诸多的博弈和限制,还是隐藏了不少暗坑,让人一 ...

  5. Java IO（八） PipedInputStream 和 PipedOutputStream

    Java IO(八) PipedInputStream 和 PipedOutputStream 一.介绍 PipedInputStream 和 PipedOutputStream 是管道输入流和管道输 ...

  6. 一、【python】机器学习基础

    专有名词 机器学习 (machine learning) 预测分析 (predictive analytics) 统计学习 (statistical learning) 监督学习 (supervise ...

  7. Linux （九）服务器环境搭建

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.行为守则 1.拍摄快照 Linux系统操作非常复杂,搭建开发环境时全部使用命令完成安装过程.而在Li ...

  8. webpack+vue2.0项目 （二）热加载，vue-router

    目录创建好之后,命令行输入 npm run dev 因为在配置文件config/index.js里: dev: { env: require('./dev.env'), port: 8080, aut ...

  9. Java实现 LeetCode 404 左叶子之和

    404. 左叶子之和 计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9 20 / \ 15 7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 /** * Definiti ...

  10. Java实现蓝桥杯VIP算法训练 二元函数

    试题 算法训练 二元函数 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 令二元函数f(x,y)=ax+by,a和b为整数,求一个表达式S的值. 只有满足以下要求的表达式才是合法的: ...