css动画之波纹

样式定义:

#ContactAbout { height: auto; position: relative; overflow: hidden; }
#sectioncontact { display: block; width: 100%; position: relative; height: 700px; z-index: 10; }#sectioncontact .map { width: 370px; height: 280px; position: absolute; left: 45%; 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: 1; border-radius: 73px; }#sectioncontact .map .tips { width: 370px; height: 170px; background: rgba(0,172,198,.8); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; position: absolute; left: 20px; top: 16px; z-index: 2; -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: #333; border-color: rgba(255,255,255,0); border-top-color: rgba(0,172,198,.8); position: absolute; left: 50%; top: 170px; margin-left: -26px; }#sectioncontact .map .tips .container { padding: 10px; color: #fff; font-size: 16px; font-weight: 100; line-height: 30px; }#sectioncontact .map .tips .container small { display: inline-block; width: 80px; color: #eee; font-size: 14px; }
@-webkit-keyframes Swing {0% { -webkit-transform: rotate(0deg); }20% { -webkit-transform: rotate(-2deg); }35% { -webkit-transform: rotate(2deg) scaleY(1); }50% { -webkit-transform: rotate(-2deg); }65% { -webkit-transform: rotate(1deg); }80% { -webkit-transform: rotate(-1deg); }100% { -webkit-transform: rotate(0deg); }
}@-moz-keyframes Swing {0% { -moz-transform: rotate(0deg); }20% { -moz-transform: rotate(-2deg); }35% { -moz-transform: rotate(2deg) scaleY(1); }50% { -moz-transform: rotate(-2deg); }65% { -moz-transform: rotate(1deg); }80% { -moz-transform: rotate(-1deg); }100% { -moz-transform: rotate(0deg); }
}@-ms-keyframes Swing {0% { -ms-transform: rotate(0deg); }20% { -ms-transform: rotate(-2deg); }35% { -ms-transform: rotate(2deg) scaleY(1); }50% { -ms-transform: rotate(-2deg); }65% { -ms-transform: rotate(1deg); }80% { -ms-transform: rotate(-1deg); }100% { -ms-transform: rotate(0deg); }
}@keyframes Swing {0% { transform: rotate(0deg); }20% { transform: rotate(-2deg); }35% { transform: rotate(2deg) scaleY(1); }50% { transform: rotate(-2deg); }65% { transform: rotate(1deg); }80% { transform: rotate(-1deg); }100% { transform: rotate(0deg); }
}.halo { -webkit-animation: Halo 6s linear infinite; -moz-animation: Halo 6s linear infinite; animation: Halo 6s linear infinite; }@-webkit-keyframes Halo {0% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0); }25% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.25),0 0 0 460px rgba(255,0,0,.1); }50% { box-shadow: inset 0 0 25px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,0),0 0 0 100px rgba(255,0,0,0),0 0 0 1000px rgba(255,0,0,0); }
}@-moz-keyframes Halo {0% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0); }25% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.25),0 0 0 460px rgba(255,0,0,.1); }50% { box-shadow: inset 0 0 25px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,0),0 0 0 100px rgba(255,0,0,0),0 0 0 1000px rgba(255,0,0,0); }
}@keyframes Halo {0% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0),0 0 0 0 rgba(255,0,0,0); }25% { box-shadow: inset 0 0 25px rgba(255,0,0,0.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.25),0 0 0 460px rgba(255,0,0,.1); }50% { box-shadow: inset 0 0 25px rgba(255,0,0,.25),0 0 0 0 rgba(255,0,0,.75),0 0 0 200px rgba(255,0,0,0),0 0 0 100px rgba(255,0,0,0),0 0 0 1000px rgba(255,0,0,0); }
}

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" οnclick="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>

页面效果:

转载于:https://www.cnblogs.com/shy1766IT/p/3736220.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/473357.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

牛客 奇怪的排序问题(单调栈/遍历)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/B 来源&#xff1a;牛客网 操场上有n个人排成一队&#xff0c;这n个人身高互不相同&#xff0c;可将他们的身高视为一个1到n的排列。 这时需要把队伍变成升序&#xff0c;也就是从…

Python 中,matplotlib绘图无法显示中文的问题

在python中&#xff0c;默认情况下是无法显示中文的&#xff0c;如下代码&#xff1a; import matplotlib.pyplot as plt# 定义文本框和箭头格式 decisionNode dict(boxstyle "sawtooth", fc "0.8") leafNode dict(boxstyle "round4", fc …

使用Marshal.Copy把Txt行数据转为Struct类型值

添加重要的命名空间: using System.Runtime.InteropServices; 先建立结构相同(char长度相同)的Struct类型用于转换: [StructLayout(LayoutKind.Sequential, Pack 1)]public struct Employee{[MarshalAs(UnmanagedType.ByValArray, SizeConst 6)]public char[] EmployeeId;[Ma…

牛客 XOR和(找规律)

文章目录1. 题目2. 解题1. 题目 链接&#xff1a;https://ac.nowcoder.com/acm/contest/10166/C 来源&#xff1a;牛客网 牛牛最近学会了异或操作&#xff0c;于是他发现了一个函数 f(x)x⊕(x−1)f(x)x\oplus (x-1)f(x)x⊕(x−1)&#xff0c;现在牛牛给你一个数 n&#xff0c…

采用contentprivider扫描手机SD卡的图片资源

Intent inten new Intent(Intent.ACTION_PICK,MediaStore.Images.Media.EXTERNAL_CONTENT_URI);startActivityForResult(inten,21);------------------------在onActivityResult中加入-------------------Uri uri data.getData();String[] filePath { MediaStore.Images.Med…

天池 在线编程 数组划分III(计数)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/231188302809557697/235445278655844965 给你一个整数数组和一个整数K&#xff0c;请你判断数组是否可以划分为若干大小为k序列&#xff0c;并满足以下条件&#xff1a; 数组中的每一个数恰恰出现在一个序列中…

详解nohup和 区别

一、nohup nohup 命令运行由 Command参数和任何相关的 Arg参数指定的命令&#xff0c;忽略所有挂断&#xff08;SIGHUP&#xff09;信号。在注销后使用 nohup 命令运行后台中的程序。要运行后台中的 nohup 命令&#xff0c;添加 & &#xff08; 表示“and”的符号&#xf…

谈谈.NET MVC QMVC高级开发

自从吾修主页上发布了QMVC1.0&#xff0c;非常感兴趣&#xff0c;用了半月的时间学习&#xff0c;真的感觉收益非浅&#xff0c;在此声明非常感谢吾修大哥的分享&#xff01; 1、轻快简单&#xff0c;框架就几个类&#xff0c;简单&#xff0c;当然代码少也就运行快&#xff01…

天池 在线编程 最小振幅(排序)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/231188302809557697/235445278655844966 给定一个由N个整数组成的数组A&#xff0c;一次移动&#xff0c;我们可以选择此数组中的任何元素并将其替换为任何值。 数组的振幅是数组A中的最大值和最小值之间的差。…

文件系统的类型

文件系统的类型 文件系统类型&#xff1a; ext2 &#xff1a; 早期linux中常用的文件系统 ext3 &#xff1a; ext2的升级版&#xff0c;带日志功能 RAMFS &#xff1a; 内存文件系统&#xff0c;速度很快 NFS &#xff1a; 网络文件系统&#xff0c;由SUN发明&a…

Git中非常重要的一个文件——.gitignore详解

首先要强调一点&#xff0c;这个文件的完整文件名就是“.gitignore”&#xff0c;注意最前面有个“.”。这样没有扩展名的文件在Windows下不太好创建&#xff0c;这里给出win7的创建方法&#xff1a; 创建一个文件&#xff0c;文件名为&#xff1a;“.gitignore.”&#xff0c…

行先知 为您的办公室管理提供方便

《行先知》为您的办公室管理提供方便■省时间和空间 公司人员去向及预定事项一目了然。不管你位置在哪里&#xff0c;不需要回头、翘首去看通知栏。不需要一次次去擦写、修改通知栏。尽管公司人员分布在不同的楼层、不同的建筑&#xff0c;人员去向一目了然。不需要再往纸上写留…

Python把两张图片拼接为一张图片并保存

这里主要用Python扩展库pillow中Image对象的paste()方法把两张图片拼接起来 from os import listdir from PIL import Imagedef pinjie():# 获取当前文件夹中所有JPG图像im_list [Image.open(fn) for fn in listdir() if fn.endswith(.jpg)]# 图片转化为相同的尺寸ims []for…

ubuntu 13.04下MYSQL 5.5环境搭建

解决的问题&#xff1a; 安装mysql server和mysql client 5.5 新建远程账户 远程访问权限 MYSQL默认字符集修改为UTF8 检查防火墙 一、安装 BTW:可以使用查找命令查看安装包 sudo apt- 安装命令 sudo apt-get install mysql-server-5.5 回车 &#xff08;有一个带core的&…

天池 在线编程 高效作业处理服务(01背包DP)

文章目录1. 题目2. 解题1. 题目 https://tianchi.aliyun.com/oj/231188302809557697/235445278655844967 Twitter正在测试一种名为Pigeon的新工作处理服务。 Pigeon可以用任务实际持续时间的两倍处理任务&#xff0c;并且每个任务都有一个权重。 此外&#xff0c;Pigeon在一…

【django学习】request.POST与request.POST.get两者主要区别

request.POST是用来接收前端传过来的数据 一、request.POST.get&#xff08;sth&#xff09;与 request.POST [sth] - 区别 request.POST[sth]KeyError如果sth不在&#xff0c;将提出异常request.POST。 request.POST.get(sth)将返回None如果sth不在request.POST。 此外&…

转载:mongoDB java驱动学习笔记

http://www.blogjava.net/watchzerg/archive/2012/09/22/388346.html mongoDB java驱动学习笔记 指定新mongo实例&#xff1a;Mongo m new Mongo();Mongo m new Mongo( "localhost" );Mongo m new Mongo( "localhost" , 27017 );// or, to connect to a…

LeetCode 1694. 重新格式化电话号码(模拟)

文章目录1. 题目2. 解题1. 题目 给你一个字符串形式的电话号码 number 。 number 由数字、空格 、和破折号 - 组成。 请你按下述方式重新格式化电话号码。 首先&#xff0c;删除 所有的空格和破折号。 其次&#xff0c;将数组从左到右 每 3 个一组 分块&#xff0c;直到 剩…

Python中查找包含它的列表元素的索引,index报错!!!

对于列表["foo", "bar", "baz"]和列表中的项目"bar"&#xff0c;如何在Python中获取其索引&#xff08;1&#xff09;&#xff1f; 一、index >>> ["foo", "bar", "baz"].index("bar&qu…

LeetCode 1695. 删除子数组的最大得分(前缀和+哈希+双指针)

文章目录1. 题目2. 解题1. 题目 给你一个正整数数组 nums &#xff0c;请你从中删除一个含有 若干不同元素 的子数组。 删除子数组的 得分 就是子数组各元素之 和 。 返回 只删除一个 子数组可获得的 最大得分 。 如果数组 b 是数组 a 的一个连续子序列&#xff0c;即如果它…