<!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. Java-main方法中调用非static方法

    java的calss中,在public static void main(String[] args) { }方法中调用非static的方法:在main方法中创建该calss的对象,用对象调用非sta ...

  2. C#命名空间大全

    Microsoft.Jscript Jscript语言进行编译和代码生成的Jscript运行库和类. Microsoft.VisualBasic Visual Basic .NET运行库.此运行库与V ...

  3. 【译】OWIN: Open Web Server Interface for .NET

    主要是使用 OAuth 时,它运行在 OWIN 上,然后又出了若干问题,总之,发现对 IIS.ASP.NET 和 OWIN 理解一塌糊涂. 后面看到 OWIN: Open Web Server Int ...

  4. 【JAVA习题六】输入两个正整数m和n，求其最大公约数

    import java.util.Scanner; public class Oujilide欧几里得 { public static void main(String[] args) { // TO ...

  5. NIO 的非阻塞式网络通信

    1.阻塞与非阻塞   ①  传统的 IO 流都是阻塞式的.也就是说,当一个线程调用 read() 或 write()时, 该线程被阻塞,直到有一些数据被读取或写入,该线程在此期间不能执行其他任务. 因 ...

  6. Python编程基本规范

    1.命名规范 类:类的名称一般为名词,且以驼峰形式(即每个单词首字母要大写,其余字母小写,单词之间无间隔符号)给出. 函数:一般以动词开头,函数名称要准确.简要地概括本函数的作用.函数名一律小写,如有 ...

  7. 前后端分离，如何在前端项目中动态插入后端API基地址？（in docker）

    开门见山,本文分享前后端分离,容器化前端项目时动态插入后端API基地址,这是一个很赞的实践,解决了前端项目容器化过程中受制后端调用的尴尬. 尴尬从何而来 常见的web前后端分离:前后端分开部署,前端项 ...

  8. （Java实现） 洛谷 P1781 宇宙总统

    题目背景 宇宙总统竞选 题目描述 地球历公元6036年,全宇宙准备竞选一个最贤能的人当总统,共有n个非凡拔尖的人竞选总统,现在票数已经统计完毕,请你算出谁能够当上总统. 输入输出格式 输入格式: pr ...

  9. Java实现 LeetCode 698 划分为k个相等的子集(递归)

    698. 划分为k个相等的子集 给定一个整数数组 nums 和一个正整数 k,找出是否有可能把这个数组分成 k 个非空子集,其总和都相等. 示例 1: 输入: nums = [4, 3, 2, 3, ...

  10. Java实现蓝桥杯模拟约数的个数

    问题描述 1200000有多少个约数(只计算正约数). 答案提交 这是一道结果填空的题,你只需要算出结果后提交即可.本题的结果为一个整数,在提交答案时只填写这个整数,填写多余的内容将无法得分. pac ...