css动画之波纹
样式定义:
#ContactAbout { height: auto; position: relative; overflow: hidden; }
#sectioncontact { display: block; width: %; position: relative; height: 700px; z-index: ; }
#sectioncontact .map { width: 370px; height: 280px; position: absolute; left: %; margin-left: -105px; }
#sectioncontact .map .button { width: 73px; height: 63px; background: url(../images/map-button.png) no-repeat; position: absolute; bottom: 0px; left: 165px; z-index: ; border-radius: 73px; }
#sectioncontact .map .tips { width: 370px; height: 170px; background: rgba(,,,.); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; left: 20px; top: 16px; z-index: ; -webkit-animation: Swing 2s ease-in-out infinite; -moz-animation: Swing 2s ease-in-out infinite; -ms-animation: Swing 2s ease-in-out infinite; -o-animation: Swing 2s ease-in-out infinite; animation: Swing 2s ease-in-out infinite; }
#sectioncontact .map .tips:before { content: ''; border: 26px solid; border-color: #; border-color: rgba(,,,); border-top-color: rgba(,,,.); position: absolute; left: %; top: 170px; margin-left: -26px; }
#sectioncontact .map .tips .container { padding: 10px; color: #fff; font-size: 16px; font-weight: ; line-height: 30px; }
#sectioncontact .map .tips .container small { display: inline-block; width: 80px; color: #eee; font-size: 14px; }
@-webkit-keyframes Swing {
% { -webkit-transform: rotate(0deg); }
% { -webkit-transform: rotate(-2deg); }
% { -webkit-transform: rotate(2deg) scaleY(); }
% { -webkit-transform: rotate(-2deg); }
% { -webkit-transform: rotate(1deg); }
% { -webkit-transform: rotate(-1deg); }
% { -webkit-transform: rotate(0deg); }
} @-moz-keyframes Swing {
% { -moz-transform: rotate(0deg); }
% { -moz-transform: rotate(-2deg); }
% { -moz-transform: rotate(2deg) scaleY(); }
% { -moz-transform: rotate(-2deg); }
% { -moz-transform: rotate(1deg); }
% { -moz-transform: rotate(-1deg); }
% { -moz-transform: rotate(0deg); }
} @-ms-keyframes Swing {
% { -ms-transform: rotate(0deg); }
% { -ms-transform: rotate(-2deg); }
% { -ms-transform: rotate(2deg) scaleY(); }
% { -ms-transform: rotate(-2deg); }
% { -ms-transform: rotate(1deg); }
% { -ms-transform: rotate(-1deg); }
% { -ms-transform: rotate(0deg); }
} @keyframes Swing {
% { transform: rotate(0deg); }
% { transform: rotate(-2deg); }
% { transform: rotate(2deg) scaleY(); }
% { transform: rotate(-2deg); }
% { transform: rotate(1deg); }
% { transform: rotate(-1deg); }
% { transform: rotate(0deg); }
} .halo { -webkit-animation: Halo 6s linear infinite; -moz-animation: Halo 6s linear infinite; animation: Halo 6s linear infinite; } @-webkit-keyframes Halo {
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,), rgba(,,,), rgba(,,,); }
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,.), 200px rgba(,,,.), rgba(,,,.), 460px rgba(,,,.); }
% { box-shadow: inset 25px rgba(,,,.), rgba(,,,.), 200px rgba(,,,), 100px rgba(,,,), 1000px rgba(,,,); }
} @-moz-keyframes Halo {
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,), rgba(,,,), rgba(,,,); }
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,.), 200px rgba(,,,.), rgba(,,,.), 460px rgba(,,,.); }
% { box-shadow: inset 25px rgba(,,,.), rgba(,,,.), 200px rgba(,,,), 100px rgba(,,,), 1000px rgba(,,,); }
} @keyframes Halo {
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,), rgba(,,,), rgba(,,,); }
% { box-shadow: inset 25px rgba(,,,0.25), rgba(,,,.), 200px rgba(,,,.), rgba(,,,.), 460px rgba(,,,.); }
% { box-shadow: inset 25px rgba(,,,.), rgba(,,,.), 200px rgba(,,,), 100px rgba(,,,), 1000px rgba(,,,); }
}
aspx:
<div id="ContactAbout">
<div id="sectioncontact">
<div class="baidumapsite" id="dituContent"></div>
<div class="map">
<div class="tips">
<div class="container">
<p><small>公司名称:</small><asp:Literal ID="cName" runat="server"></asp:Literal></p>
<p><small>公司邮箱:</small><asp:Literal ID="cEmail" runat="server"></asp:Literal></p>
<p><small>联系手机:</small><asp:Literal ID="cTel" runat="server"></asp:Literal></p>
<p><small>公司邮编:</small><asp:Literal ID="cPostcode" runat="server"></asp:Literal></p>
<p><small>公司地址:</small><asp:Literal ID="cAddr" runat="server"></asp:Literal></p>
</div>
</div>
<div class="button halo"></div>
</div> <div id="messageus" title="点击给我留言吧"></div>
<div id="pop-login" style="display: none"> <div class="subline">
<span>客户姓名:</span>
<input name="txtName" runat="server" type="text" id="txtName" class="txtinput" />
</div>
<div class="subline">
<span>邮箱地址:</span>
<input name="txtEmail" runat="server" type="text" id="txtEmail" class="txtinput" />
</div>
<div class="subline">
<span>联系电话:</span>
<input name="txtTel" runat="server" type="text" id="txtTel" class="txtinput" />
</div>
<div class="subcontent">
<span>留言内容:</span>
<textarea name="txtMsgContent" id="txtMsgContent" runat="server" class="txtMsgContent" />
</div>
<div class="subline">
<span>验证码:</span>
<img src="VerifyImage.ashx" class="txtverity" onclick="this.src=this.src+'?'" />
<input name="txtCode" runat="server" type="text" id="txtCode" class="txtinput1" />
<asp:Button ID="Button1" runat="server" Text="提交" OnClientClick="return check()" class="btn" OnClick="btnSendMsg_Click" />
</div>
</div>
<script type="text/javascript" src="js/baidumap.js"></script>
</div>
</div>
页面效果:
css动画之波纹的更多相关文章
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Css 动画的回调
在做项目中经常会遇到使用动画的情况.以前的情况是用js写动画,利用setTimeout函数或者window.requestAnimationFrame()实现目标元素的动画效果.虽然后者解决了刷新频率 ...
- 【译】css动画里的steps()用法详解
原文地址:http://designmodo.com/steps-c... 原文作者:Joni Trythall 我想你在css 动画里使用steps()会和我一样有很多困惑.一开始我不清楚怎样使用它 ...
- css动画属性性能
性能主要表现:流量.功耗与流畅度 在现有的前端动画体系中,通常有两种模式:JS动画与CSS3动画. JS动画是通过JS动态改写样式实现动画能力的一种方案,在PC端兼容低端浏览器中不失为一种推荐方案. ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
随机推荐
- sudo简单命令语法及配置
参考:http://yangrong.blog.51cto.com/6945369/1289452, https://wiki.archlinux.org/index.php/Sudo_(%E7%AE ...
- Android资源下载
各个版本,在线源码: http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/ ...
- 使用flume的一个例子
新项目中需要使用到hadoop和vertica,使用flume把数据加载到hadoop中,我做了一个例子, 即监控一个sharefolder,如果里面有文件,则会文件load到hadoop. 开启Fl ...
- [转]用NPOI操作EXCEL--数据有效性
本文转自:http://www.cnblogs.com/atao/archive/2009/09/22/1572170.html 在有些情况下(比如Excel引入),我们可能不允许用户在Excel随意 ...
- CORDIC原理与FPGA实现(1)
CORDIC算法的来历与用途大家网上随处可以见到,这里写 一下自己的理解. 将P(x,y)旋转角度a得到新的坐标P’(x’,y’).这里的坐标变换为: x’= x cos(a) – y sin(a) ...
- 翻译《Writing Idiomatic Python》(二):函数、异常
原书参考:http://www.jeffknupp.com/blog/2012/10/04/writing-idiomatic-python/ 上一篇:翻译<Writing Idiomatic ...
- leetcode: Path Sum II 迭代法
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 第10章 同步设备I/O和异步设备I/O(4)_利用I/O完成端口实现Socket通信
I/O完成端口原理见上一篇(可点击这里) 10.5.4.4 利用I/O完成端口实现Socket通信 (1)Accept和AcceptEx流程的比较 ①采用accept方式的流程示意图如下(普通的阻塞函 ...
- DoTween NGUI bug
多次动画导致UISprite丢失 DOTween动画进行时与UISprite有冲突,DOTween多次重复同一个动画时,UISprite会莫名的丢失 UISprite动画代码 CUIManager.I ...
- java13-5 JDK1.5以后的一个新特性和Integer的面试题
1.JDK5的新特性 自动装箱:把基本类型转换为包装类类型 自动拆箱:把包装类类型转换为基本类型 注意一个小问题: 在使用时,Integer x = null;代码就会出现NullPointerExc ...