网站导航免费论文 原创论文 论文搜索 原创论文 网学软件 学术大家 资料中心 会员中心 问题解答 原创论文 大学论文导航 设计下载 最新论文 下载排行 原创论文 论文源代码
返回网学首页
网学联系
最新论文 推荐专题 热门论文 素材专题
当前位置: 网学 > 编程文档 > 网络知识 > 正文

css3 -input focus的发光效果

来源:http://myeducs.cn 联系QQ:点击这里给我发消息 作者: 用户投稿 来源: 网络 发布时间: 14/07/16

文章导读:在新的一年中,各位网友都进入紧张的学习或是工作阶段。网学的各位小编整理了网络知识-css3 -input focus的发光效果的相关内容供大家参考,祝大家在新的一年里工作和学习顺利!

在做项目时想做个input focus的效果,感觉很帅!上网搜集了一些资料,整理一下!加工成我的发光效果!哈哈 看着不错,跟大家分享一下啊!补充:chrome下input focus默认有个黄色的光影,如果不想要的话 可以在css样式中 添加一下

      input:focus{

         outline:none;

     }

  就可以去掉了!


   我的样式代码:

    input{

       border-radius:6px;
       border:1px solid #909090;
       -webkit-transition: box-shadow 0.30s ease-in-out;   //只让box-shadow属性做过渡效果!
       -moz-transition:  box-shadow 0.30s ease-in-out;      //firefox

    }


   input :focus{

     outline:none;
     border:#87C6F9 1px solid;
     box-shadow: 0 0 8px rgba(103, 166, 217, 1);

   }


哈哈,简单吧!用css3几句样式就可以搞定了,细节做足了吧!

截图如下:

   

网学推荐

免费论文

原创论文

设为首页 | 加入收藏 | 论文首页 | 论文专题 | 设计下载 | 网学软件 | 论文模板 | 论文资源 | 程序设计 | 关于网学 | 站内搜索 | 网学留言 | 友情链接 | 资料中心
版权所有 QQ:3710167 邮箱:3710167@qq.com 网学网 [Myeducs.cn] 您电脑的分辨率是 像素
Copyright 2008-2015 myeducs.Cn www.myeducs.Cn All Rights Reserved 湘ICP备09003080号