[css3]搜索框focus时变长


结构:
<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时变长的更多相关文章
- 【转】如何建立一个样式新颖的CSS3搜索框
在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章 ...
- 搜索框focus 搜索面板显示 点击别处消失 从浏览器别的页面回来消失
开始是设置了回到页面使display:none(离开页面操作失效),但是发现回到页面,面板显示,dom获取却为null,于是做了个延时的处理 currentPage: function() { var ...
- 好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...
- css3 jQuery实现3d搜索框+为空推断
<!DOCTYPE html> <html> <head> <title>css3实现3d搜索框</title> <style> ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- CSS3实现的苹果网站搜索框效果
在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.
- 自定义webkit搜索框样式
好吧,这是个有点儿蛋疼的文章,每个浏览器都可以有自己的行为和表现,只是webkit在apple的带领下,在UI上走的更远了一点儿,但是却给我们带来了点儿困扰,因为很多情况下,我们希望搜索框在所有的浏览 ...
- Android 根据EditText搜索框ListView动态显示数据
根据EditText搜索框ListView动态显示数据是根据需求来的,觉得这之中涉及的东西可能比较的有意思,所以动手来写一写,希望对大家有点帮助. 首先,我们来分析下整个过程: 1.建立一个layou ...
- Android 依据EditText搜索框ListView动态显示数据
依据EditText搜索框ListView动态显示数据是依据需求来的,认为这之中涉及的东西可能比較的有意思,所以动手来写一写.希望对大家有点帮助. 首先.我们来分析下整个过程: 1.建立一个layou ...
随机推荐
- 基于Spark ALS构建商品推荐引擎
基于Spark ALS构建商品推荐引擎 一般来讲,推荐引擎试图对用户与某类物品之间的联系建模,其想法是预测人们可能喜好的物品并通过探索物品之间的联系来辅助这个过程,让用户能更快速.更准确的获得所需 ...
- c 函数调用产生的汇编指令和数据在内存情况(2)
c 函数调用产生的汇编指令和数据在内存情况(1) 一直对函数调用的具体汇编指令和各种变量在内存的具体分配,一知半解.各种资料都很详细,但是不实践,不亲自查看下内存总不能笃定.那就自己做下. 两个目的: ...
- 06 SQL执行计划
解释计划 与 执行计划的 区别 随着可以得到解释计划输出的开发工具, 比如 toad 的普遍使用, 生成解释计划就变的相当简单. 而不简单的是得到执行计划. 解释计划 EXPLAIN PLAN 用来显 ...
- web设计经验<九>教你测试手机网页的5大方法
我们知道手机浏览器的使用量每天都在增长,根据StatCounter的统计数据,手机和平板的使用量约占30%的网络流量,这意味着消费者耗费在移动版网页上的时间比以往任何时候都高.可即使具备诸如移动端优先 ...
- JavaWeb学习总结(十)--JDBC之MySQL大数据
一.基本概念 大数据也称之为LOB(Large Objects),LOB又分为:clob和blob,clob用于存储大文本,blob用于存储二进制数据,例如图像.声音.二进制文等. 但是,在mysql ...
- HttpURLConnection请求接口
import java.io.BufferedInputStream; import java.io.BufferedReader; import java.io.DataOutputStream; ...
- c++(vs上)与g++(linux下)对于++操作的汇编代码解读
先来看一个代码,估计很多同学都碰到过其中的某一个. #include <stdio.h> #include <iostream> using namespace std; in ...
- ogre入门笔记
ogre作为一款开源的非商业渲染引擎, 除去效率不谈, 其设计结构十分优雅, 值得游戏从业者拥有和学习.本篇笔记基于ogre v1.9. 1.代码模块 ogre的核心代码分布如下图: ogreMain ...
- mysql5.7主从复制
1.简介 1.1主从复制 是指建立一个和主数据库完全一样的数据库环境,称为从数据库:主数据库一般是实时的业务数据库,从数据库的作用和使用场合一般有几个: 一是作为后备数据库,主数据库服务器故障后,可切 ...
- jmeter笔记8
JMETER接口性能测试方案 JMETER简介 JMeter可以用于测试静态或者动态资源的性能(文件.Servlets.Perl脚本.java对象.数据库和查询.ftp服务器或者其 ...