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实现弹出效果的更多相关文章
-
仿简书、淘宝等等App的View弹出效果
昨天用简书App的时候觉得这个View的弹出效果特别好,而且非常平滑,所以我就尝试写了一个,和简书App上的效果基本一致了: 下面开始讲解: 1.首先我们要知道这个页面有几个View?这个页面其实有四 ...
-
Android PopupWindow 仿微信弹出效果
项目中,我须要PopupWindow的时候特别多,这个东西也特别的好使,所以我今天给大家写一款PopupWindow 仿微信弹出效果.这样大家直接拿到项目里就能够用了! 首先让我们先看效果: 那么我首 ...
-
Android 仿 新闻阅读器 菜单弹出效果(附源码DEMO)
这一系列博文都是:(android高仿系列)今日头条 --新闻阅读器 (一) 开发中碰到问题之后实现的,觉得可能有的开发者用的到或则希望独立成一个小功能DEMO,所以就放出来这么一个DEMO. 原本觉 ...
-
两种纯CSS方式实现hover图片pop-out弹出效果
实现原理 主要图形的组成元素由背景和前景图两个元素,以下示例代码中,背景元素使用伪元素 figure::before 表示, 前景元素使用 figure img 表示,当鼠标 hover 悬浮至 fi ...
-
Android listview 制作表格样式+由下往上动画弹出效果实现
效果是这样的:点击按下弹出表格的按钮,会由下往上弹出右边的列表,按下返回按钮就由上往下退出界面. 布局文件: activity_main.xml <RelativeLayout xmlns:an ...
-
自定义Dialog,实现由下而上的弹出效果(模仿QQ退出等)
方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...
-
整理:手机端弹出提示框,使用的bootstrap中的模态框(modal,弹出层),比kendo弹出效果好
效果图: 我的代码示例: <!--提示模态框--> <div class="modal fade" id="myModal" tabindex ...
-
NiftyDialogEffects-多种弹出效果的对话框
感觉系统自带的对话框弹出太生硬?那就试试NiftyDialogEffects吧,类似于(Nifty Modal Window Effects),效果是模仿里面实现的 ScreenShot . . ...
-
ExtJS前端框架EXT弹出窗口事件
https://blog.csdn.net/alsyuan/article/details/73240841 Ext.MessageBox.alert()Ext.MessageBox.alert()提 ...
随机推荐
-
Quartz 在 Spring 中如何动态配置时间--转
原文地址:http://www.iteye.com/topic/399980 在项目中有一个需求,需要灵活配置调度任务时间,并能*启动或停止调度. 有关调度的实现我就第一就想到了Quartz这个开源 ...
-
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应 ...
-
NABCD模式
各位用户: 我们的“昵妆”是为了帮助不会化妆的用户解决困难, 他们需要有适合他们的优质的化妆品和 正确的视频或者化妆师来指导他们,但是现有的方案并没有很好地解决这些需求,我们有独特的办法, ...
-
css模块化思想(一)--------命名是个技术活
引子: 女孩子都喜欢买衣服,而我也不例外,奈何钱包太瘦,买不起高大上的定制,只能买撞衫率极高的休闲衣,不过对于我来说,我还是开心的,毕竟买衣服买的不仅是衣服,更是一种心情.在web前端的世界里,css ...
-
SQL Server代理服务无法启动的处理方法(转载)
SQL Server代理服务无法启动问题的确很让我们头疼,下面就为您介绍SQL Server代理服务无法启动的处理方法,希望对您能有所帮助. --==配置环境服务器环境为32位Intel® Xeon® ...
-
lc面试准备:Candy
1 题目 There are N children standing in a line. Each child is assigned a rating value. You are giving ...
-
Ubuntu彻底删除/卸载mysql,php,apache
一.卸载删除 mysql 1 sudo apt-get autoremove --purge mysql-server-5.02 sudo apt-get remove mysql-server3 s ...
-
内网神器-Bettercap
安装bettercap 1 2 root@sch01ar:~# apt-get update root@sch01ar:~# apt-get install bettercap 安装完成后查看一下帮 ...
-
【查漏补缺】File的path、absolutePath和canonicalPath的区别
背景 在学习Idea的插件开发时,用到了相关的VirtualFileSystem这个东西,里面的VirtualFile有一个getCanonicalPath()方法引起了我的注意,我发现我不知道-- ...
-
【目录】LeetCode Java实现
这里记录一下自己刷的LeetCode题目. 有些博客用英文阐述自己的思路和收获,相当于练习一下英文的表达能力. 比较好的题目有加粗. 1. Two Sum 3. Longest Substring W ...