36氪这个网站上的登录框弹出的时候挺帅气的，想知道它是怎么做的 .. 今天通过问新爷再加上自己琢磨琢磨写出一个小小Demo ～

上代码

 <!DOCTYPE html>

 <html>

 <head>

 <style>

 div

 {

 width:100px;

 height:100px;

 background:red;

 }

 div:hover

 {

 opacity:1;

 width:200px;

 height:200px;

 background:blue;

 position:relative;

 animation:showPanel 5s ease;

 -moz-animation:showPanel 5s ease-in;

 -webkit-animation:showPanel 0.5s ease;

 }

 @keyframes showPanel

 {

 0%   {transform:scale(0.5);opacity:0.0;}

 50%  {transform:scale(1.05);opacity:1.0;}

 100% {transform:scale(1);opacity:1.0;}

 }

 /* Firefox */

 @-moz-keyframes showPanel

 {

 0%   {-moz-transform:scale(0.5);opacity:0.0;}

 50%  {-moz-transform:scale(1.05);opacity:1.0;}

 100% {-moz-transform:scale(1);opacity:1.0;}

 }

 /* Safari and Chrome */

 @-webkit-keyframes showPanel

 {

 0%   {-webkit-transform:scale(0.75);opacity:0.0;}

 50%  {-webkit-transform:scale(1.05);opacity:1.0;}

 100% {-webkit-transform:scale(1);opacity:1.0;}

 }

 </style>

 </head>

 <body>

 <p>把鼠标放到红色方块上看效果</p>

 <p><b>注释：</b>仅调试了chrome .. 其他的浏览器不知道好不好用 .. 因为懒没测试过 .. 不过知道这个怎么玩了^_^</p>

 <div></div>

 </body>

 </html>

把w3school上的CSS3教程刷了一下，还是有些收获的，虽然可能过几天都不记得了，但是捡起来快啊 ～

发现对CSS还是有一些兴趣滴 ... 可是一旦写错就纠结了 ... 不懂这玩意肿么调试 ==

【前端】CSS3实现弹出效果的更多相关文章

  1. 仿简书、淘宝等等App的View弹出效果

    昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...

  2. Android PopupWindow 仿微信弹出效果

    项目中,我须要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果.这样大家直接拿到项目里就能够用了! 首先让我们先看效果: 那么我首 ...

  3. Android 仿 新闻阅读器 菜单弹出效果（附源码DEMO）

    这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...

  4. 两种纯CSS方式实现hover图片pop-out弹出效果

    实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...

  5. Android listview 制作表格样式+由下往上动画弹出效果实现

    效果是这样的:点击按下弹出表格的按钮,会由下往上弹出右边的列表,按下返回按钮就由上往下退出界面. 布局文件: activity_main.xml <RelativeLayout xmlns:an ...

  6. 自定义Dialog，实现由下而上的弹出效果（模仿QQ退出等）

    方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...

  7. 整理：手机端弹出提示框，使用的bootstrap中的模态框（modal，弹出层），比kendo弹出效果好

    效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...

  8. NiftyDialogEffects-多种弹出效果的对话框

    感觉系统自带的对话框弹出太生硬?那就试试NiftyDialogEffects吧,类似于(Nifty Modal Window Effects),效果是模仿里面实现的 ScreenShot  .  .  ...

  9. ExtJS前端框架EXT弹出窗口事件

    https://blog.csdn.net/alsyuan/article/details/73240841 Ext.MessageBox.alert()Ext.MessageBox.alert()提 ...

随机推荐

  1. 如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码

    如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码 1.Delphi编译方式介绍: 当我们在开发一个常规应用程序时,Delphi可以让我们用两种方式使用VCL,一种是把VCL中的申明 ...

  2. dota 路人水平鉴定器

    测试的dota水平...目的是学习一下tornado框架 #coding:utf8 import tornado.web,tornado.httpserver,tornado.ioloop,torna ...

  3. Python设计模式——代理模式（Proxy）

    书中的例子是:男A喜欢女A,但是不敢向其表白,所以委托男B为代理,代他送礼物给女A,实现这个需求的重点是,男A和女A是不互相直接接触的,都是通过代理男B,实现间接接触. #encoding=utf-8 ...

  4. MVC4升级MVC5 异常处理

    使用过程中的一些烦人的事情,权当这篇文章是MVC4升级MVC5的异常合集吧,后期不定期更新. 在这里你可以看到ASP.NET MVC的发展历程以及你需要的版本和目前最稳定的版本.戳ASP.NET MV ...

  5. MVC去掉传参时的验证：从客户端中检测到有潜在危险的Request.QueryString值

    解决方法:给Action添加属性[ValidateInput(false)]. 例: [ValidateInput(false)] public ActionResult Index(string o ...

  6. JAVA 内存管理总结

    1. java是如何管理内存的 Java的内存管理就是对象的分配和释放问题.(两部分) 分配 :内存的分配是由程序完成的,程序员需要通过关键字new 为每个对象申请内存空间 (基本类型除外),所有的对 ...

  7. win2003 sp2+iis 6.0上部署.net 2.0和.net 4.0网站的方法

    网站环境 IIS6.0,操作系统Windows server2003 sp2,服务器之前已经部署了.net 2.0和asp的网站,现在要部署新开发的.net 4.0网站.本来认为很简单,却遇到了很多问 ...

  8. mongodb MongoDB 聚合 group

    MongoDB 聚合 MongoDB中聚合(aggregate)主要用于处理数据(诸如统计平均值,求和等),并返回计算后的数据结果.有点类似sql语句中的 count(*). 基本语法为:db.col ...

  9. 当页面编辑或运行提交时，出现“从客户端中检测到有潜在危险的request.form值”问题，该怎么办呢？

    最近在学习highcharts时,关于其中的导出功能,本来是想把导出的图片存放在本地,发现只有在电脑联网的情况下才可以一下导出图片,后来查阅了一番资料,才发现highcharts中的导出默认的官网服务 ...

  10. 为什么Nagios会那么吵？你又能做些什么呢？（1）

    如果你受困于 Nagios 的告警洪潮中不能自拔,那么这两篇连载博客就是为你而生的.让我们来详细的阐述下这个问题! 运维人员都有着独立的监控工具,因此会经常受到 Nagios 告警吵闹的影响.很多运维 ...