比如输入框触交渐变

在原来的属性添加 :

.form-control{-webkit-transition: all .3s; transition: all .3s;}

.form-control:focus {border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);}
 
 

css动画 transition的更多相关文章

  1. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  2. css动画(transition/transform/animation)

    在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

  3. css动画——transition和animation

    http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...

  4. css 动画 transition和animation

    本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...

  5. CSS之transition（动画）

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

  6. 原生js判断css3动画过度(transition)结束 transitionend事件 以及关键帧keyframes动画结束(animation)回调函数 animationEnd 以及 css 过渡 transition无效

      上图的 demo 主要讲的 是 css transition的过渡回调函数transitionend事件: css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画 ...

  7. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  8. CSS动画：animation、transition、transform、translate

    https://blog.csdn.net/px01ih8/article/details/80780470 一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画). ...

  9. CSS动画详解及transform、transition、translate的区别

    刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...

随机推荐

  1. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...

  2. Zookeeper分布式系统协同器概念快速学习

    原文格式可以访问:https://www.rockysky.tech 分布式系统的基本操作 主节点选举:在绝大多数分布式系统中,都需要进行主节点选举.主节点负责管理协调其它节点或者同步集群中其它节点的 ...

  3. jdk升级后Eclipse无法启动问题

    overview: 今日安装jdk11,设置好环境变量后,eclipse无法运行,由于项目依赖原因,不想更新eclipse的版本. 我的jdk是1.8,在将环境变量设回1.8后依然无法运行.在多次尝试 ...

  4. debian 10安装英伟达独显驱动

    我的显卡是GTX1050TI,刚安装好Debian 10的时候启动会黑屏,无法进入系统,解决办法是在grub界面,按e修改启动参数,在启动参数那一行(一般会包含quiet)后面加上 nouveau.m ...

  5. python range函数（42）

    在python中使用最多的除了print函数 就是 for循环 了,那么这里就不得不介绍一下python内置函数range函数! 一.range函数简介 python range函数可创建一个整数列表 ...

  6. SAP 如何看某个TR是否传入了Q或者P系统？

    SAP 如何看某个TR是否传入了Q或者P系统? 两种方式可以查询. 1)进入Q系统或者P系统.SE16,看表TPALOG, 输入请求号码, 执行,看记录里的字段TPSTAT_KEY是否为空,如果不为空 ...

  7. docker jenkins 安装

    1:官方教程 https://jenkins.io/zh/doc/book/installing/ 2:拉取jenkins镜像 docker pull jenkinsci/blueocean 3:输入 ...

  8. python+selenium自动化测试，浏览器最大化报错解决方法

    此处以谷歌浏览器为例 [问题1]缺少chrome驱动,webdriver调用谷歌浏览器的时候就报错了,如下图: [原因分析]缺少谷歌驱动程序 [解决办法] 1.查看本地安装chrome浏览器版本 2. ...

  9. redis的基础知识

    select切换数据库 remoteSelf:0>select 0 "OK" dbsize查看当前数据库的key数量 remoteSelf:0>dbsize " ...

  10. CMD命令下图片合成一句话木马命令

    非常简单,我们只需要一张图片1.jpg一句话木马写好的php文件 1.php之后我们进入到命令行.注意:将php文件和图片文件放到同一目录下,cmd也要跳转到放文件的目录下之后执行命令 copy .j ...