结构:

<form class="demo-a">
    <input placeholder="Search" type="search">
</form>

关键样式:

.demo-a input{width: 15px; border-radius: 10em; transition: all 0.5s ease 0s;}

.demo-a input:focus{width: 130px; box-shadow: 0 0 5px rgba(109,207,246,.5);}

[css3]搜索框focus时变长的更多相关文章

  1. 【转】如何建立一个样式新颖的CSS3搜索框

    在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...

  2. 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失

    开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...

  3. 好看css搜索框样式_分享8款纯CSS搜索框

    最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...

  4. css3 jQuery实现3d搜索框+为空推断

    <!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...

  5. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  6. CSS3实现的苹果网站搜索框效果

    在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.

  7. 自定义webkit搜索框样式

    好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...

  8. Android 根据EditText搜索框ListView动态显示数据

    根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...

  9. Android 依据EditText搜索框ListView动态显示数据

    依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...

随机推荐

  1. iOS - UICollectionViewController

    前言 NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionView : UIScrollView @available(iOS 6.0, *) pub ...

  2. z-score

    标准分数(standard score)也叫z分数(z-score),是一个分数与平均数的差再除以标准差的过程.用公式表示为: z=(x-μ)/σ.其中x为某一具体分数, μ为平均数,σ为标准差. Z ...

  3. 【Todo】Python面试题分析记录(修饰器等)

    首先,看这一段代码: class A(object): x = 1 gen = (lambda t: (t for _ in xrange(10)))(x) if __name__ == '__mai ...

  4. Android 热补丁动态修复框架小结

    一.概述 最新github上开源了很多热补丁动态修复框架,大致有: https://github.com/dodola/HotFix https://github.com/jasonross/Nuwa ...

  5. HashMap循环遍历方式及其性能对比(zhuan)

    http://www.trinea.cn/android/hashmap-loop-performance/ ********************************************* ...

  6. Mvc4_ActionLink跟@RenderBody ,@RenderPage

    . @Html.ActionLink("该链接要显示的文字A","对应的控制器方法B");会生成:<a href="C/B">A ...

  7. STM8s窗口看门狗

    看看窗口看门狗的框图 从图里看出产生复位信号有2个方式: 1 WDGCR寄存器的T6 由1变0,也就是从此寄存器的值从0x40变成0x3F会产生复位信号: 2 当寄存器WDGCR的值大于WDGWR的时 ...

  8. Java读取xml数据

    xml中的代码 <?xml version="1.0" encoding="UTF-8"?> <books id="aaa" ...

  9. 连续型变量的推断性分析——t检验

    连续型变量的推断性分析方法主要有t检验和方差分析两种,这两种方法可以解决一些实际的分析问题,下面我们分别来介绍一下这两种方法 一.t检验(Student's t test) t检验也称student ...

  10. ThinkPHP框架如何修改X-Powered-By

    以前用ThinkPHP框架开发了一个小网站,前几天查询页面HTTP状态发现,里面有一项: X-Powered-By: ThinkPHP 2.0 这样虽然没什么,但感觉如果别有用心的人查询会知道你是用这 ...