<!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. [PHP自动化－进阶]003.CURL处理Https请求访问

    引言:继前文<模拟登录并采集数据>,<模拟登录带有验证码的网站>,大家对CURL基本上已经有了认识,这一讲简单的说一下请求Https. 在很多的站点,如TalkingData, ...

  2. [Python基础]005.语法(4)

    语法(4) 类 创建 self 方法 变量 综合例子 继承 类 创建 与其他大部分语言一样,Python也用 class 来创建类. class Person: # Person类 pass # 空语 ...

  3. 学习使用re做解析器爬小说

    一.背景:近期学习python爬虫中看到,在对网页内容进行解析的技术中,re正则表达式工具也是一个很好的工具,使用re编制爬虫工具正好熟悉re正则表达式的使用. 二.环境及爬取目标 1.linux c ...

  4. Rocket - regmapper - RegisterCrossing

    https://mp.weixin.qq.com/s/82iLT-fmDg9Comp2p9bxKg 简单介绍RegisterCrossing的实现. 1. BusyRegisterCrossing 简 ...

  5. Java实现 LeetCode 712 两个字符串的最小ASCII删除和（最长公共子串&&ASCII值最小）

    712. 两个字符串的最小ASCII删除和 给定两个字符串s1, s2,找到使两个字符串相等所需删除字符的ASCII值的最小和. 示例 1: 输入: s1 = "sea", s2 ...

  6. Java实现 LeetCode 443 压缩字符串

    443. 压缩字符串 给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回 ...

  7. Java实现 蓝桥杯VIP 算法提高 计算器

    算法提高 计算器 时间限制:1.0s 内存限制:256.0MB [问题描述] 王小二的计算器上面的LED显示屏坏掉了,于是他找到了在计算器维修与应用系学习的你来为他修计算器. 屏幕上可以显示0~9的数 ...

  8. Java实现 蓝桥杯VIP 算法提高 产生数

    算法提高 产生数 时间限制:1.0s 内存限制:256.0MB 问题描述 给出一个整数 n(n<10^30) 和 k 个变换规则(k<=15). 规则: 一位数可变换成另一个一位数: 规则 ...

  9. Java实现 LeetCode 127 单词接龙

    127. 单词接龙 给定两个单词(beginWord 和 endWord)和一个字典,找到从 beginWord 到 endWord 的最短转换序列的长度.转换需遵循如下规则: 每次转换只能改变一个字 ...

  10. Java实现LeetCode 111. Minimum Depth of Binary Tree

    /** * Definition for a binary tree node. * public class TreeNode { * int val; * TreeNode left; * Tre ...