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" 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动画之波纹,布布扣,bubuko.com

时间： 2024-08-06 03:47:07

css动画之波纹的相关文章

Css3之高级-7 Css动画(概述、关键帧、动画属性)

一.动画概述动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o- 动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyframes 声明动画的关键帧 - 为元

css动画-animation各个属性详解（转）

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

Animate.css让添加CSS动画像喝水一样容易

animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用.用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了. 用法在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称.就是这样!你就有了一个CSS动画效果.超强! <head> <link rel="stylesheet" href="animat

CSS动画效果之animation

Y(^o^)Y css动画大乱弹之animation. 概述什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中,可以使用百分比,如从0%到100%的任意值,分别在每个百分比中,加上不同的属性,从而让元素达到一种在不断变化的动画效果.这和我们制作flash动画一样,我们只需设计几个关键帧,系统就能生成动画啦! 一个@keyframe例子: 1 /*定义关键帧动画*/ 2 @keyframes myframe {

CSS动画原理及硬件加速

一.图层图层即层叠上下文,具体概念和应用大家可以看我之前转自张鑫旭大神博客的<CSS层叠上下文和层叠顺序>,这里我们简单复习一下产生层叠上下文的原因. 1.根层叠上下文指的是页面根元素,也就是滚动条的默认的始作俑者<html>元素.这就是为什么,绝对定位元素在left/top等值定位的时候,如果没有其他定位元素限制,会相对浏览器窗口定位的原因. 2.定位元素与传统层叠上下文对于包含有position:relative/position:absolute的定位元素,以及Fire

CSS动画与GPU

写在前面满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d(0, 0, 0).will-change: transform等,开启硬件加速动画元素尽量用fixed.absolute定位方式,避免reflow 对动画元素应用高一点的z-index,减少复合层数量 ...其它可能有用的规则那么问题是:已经小心遵守这些规则了,为什么动画还会卡顿.跳帧?还能优化

CSS动画简介

原文地址:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 现在,我很少写介绍CSS的文章,因为感觉网站开发的关键还是在服务器端. 但是,CSS动画除外,它实在太有用了. 本文介绍CSS动画的两大组成部分:transition和animation.我不打算给出每一条属性的详尽介绍,那样可以写一本书.这篇文章只是一个简介,帮助初学者了解全貌,同时又是一个快速指南,当你想不起某一个用法的时候,能够快速地找

css动画-音频跳动

---------------------------------------------------------------------------- --------------------------------------------------------------------- 这张图片,大大小小不一样的柱状,只是一张图片?NO! 它不是图片,而且可以让他活灵活现的,跳舞,动起来.类似音频跳动那样无限跳动…… 让你的页面动画在移动设备上运行的更快一些.仅做,音频跳动demo. 效果

Mobile Web 前端开发 CSS动画经验分享

谈到动画作用.CSS动画是Mobilweb开发的利器,CSS动画不得不谈.受限于Mobil设备功能等疑问,PC上的动画完结计划在Mobil上大都行不通,幸运的Mobil上我能够用CSS动画,今日我就来了解一下CSS动画的3个首要成员. CSS改换(Transit transit默许的突变动画.当CSS特点改动的时分,界说好需求改换的CSS特点.transit动画被触发.可是并不是一切的CSS特点改动都会触发translat当前,并没有一个官方的文档列出来那些能够,那些不能够,可是能够经过一些小窍