纯css简单的警告框加抖动效果

这种效果的警告框,出错了会抖动

.alert-box {
          width: 400px;
          border-style: outset;
          position: relative;
          color:#555;
          border-radius:10px;
          font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px;
          padding:10px 10px 10px 10px;
          margin:auto;
          display: none;
      }

      .alert-box span {
          font-weight:bold;
          text-transform:uppercase;
      }

      .error {
          background:#ffecec no-repeat 10px 50%;
          border:1px solid #f5aca6;
      }

jQuery的动画效果,animate for循环4次左右移动

var $box = $(‘.alert-box‘);
                  $box.html(‘<span>error: </span>‘ + data.error);
                  $box.show();
                  var box_left = ($(window).width() -  $box.width()) / 2;
                  for(var i=1; 4>=i; i++){
                      $box.animate({left:-(40-10*i)},50);
                      $box.animate({left:+2*(40-10*i)},50);
                  }
时间: 2024-12-31 03:50:48

纯css简单的警告框加抖动效果的相关文章

CSS3新vw, vh单位与纯CSS定位的弹框屏幕居中效果实例页面

在css中vw和vh分别代表所占的百分比,可以设置最外部的容器的宽高,但是都要结合百分比一起使用. 展示 回到相关文章 ? 图片宽度(目前1024像素): 128  1024 点击我出现图片弹框 代码CSS代码:.dialog_container {    display: none;    width: 100%;    width: 100vw;    height: 100%;    height: 100vh;    background-color: rgba(0,0,0,.35); 

纯CSS实现tooltip提示框,CSS箭头及形状之续篇--给整个tooltip提示框加个边框

在前面一篇中我们介绍了纯CSS实现tooltip提示框,通俗的讲也就是CSS箭头及形状 不过注意一点是,他始终是一个元素,只是通过CSS实现的,今天我们要说的是给这个“tooltip提示框”整体加一个边框,下面是是一篇完成的截图(不了解的可以看看:纯CSS实现tooltip提示框,CSS箭头及形状): 首先像:after一样我们介绍另外一个CSS中“ :before ”选择器 定义和用法:(参考w3school:before选择器) :before 选择器在被选元素的内容前面插入内容,使用 co

纯CSS实现tooltip提示框,CSS箭头及形状

原文:纯CSS实现tooltip提示框,CSS箭头及形状 本片介绍仅用CSS做出tooltip那样的提示框及箭头等形状! 首先介绍一下CSS:after选择器 定义和用法:(参考w3school:after选择器) :after选择器在被选元素的内容后面插入内容,使用content属性来指定要插入的内容 例: p:after { content:"台词:-"; background-color:yellow; color:red; font-weight:bold; } 具体大家可以参

用纯css改变下拉列表select框的默认样式(转)

用纯css改变下拉列表select框的默认样式 分享到 分类 JS学习   关键字 前端   发布 kris  2015-04-01 注意 转载须保留原文链接,译文链接,作者译者等信息. 在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 问题的提出 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没

Android一个简单的警告框,带标题、图标、按钮的代码

工作之余,将内容过程比较常用的内容做个珍藏,下面内容是关于Android一个简单的警告框,带标题.图标.按钮的内容,应该是对大伙有些用. AlertDialog alertDialog = new AlertDialog.Builder(this).create();alertDialog.setTitle("Title");alertDialog.setMessage("Message");alertDialog.setButton("OK",

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

UIImageView加抖动效果

CGAffineTransform moveRight = CGAffineTransformTranslate(CGAffineTransformIdentity, 20, 0); CGAffineTransform moveLeft = CGAffineTransformTranslate(CGAffineTransformIdentity, -20, 0); CGAffineTransform resetTransform = CGAffineTransformTranslate(CGAf

JS配合css实现slide文字框缩放伸展效果

<!DOCTYPE html> <html> <head> <meta http-equiv="content" content="text/html charset=gb2312"> <title>JS配合css实现slide文字框缩放伸展效果</title> <style type="text/css"> *{margin:0; padding:0;} ul{

用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分