比如输入框触交渐变

在原来的属性添加 :

.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. apache/tomcat安装过程略

    apache/tomcat安装过程略 一些变量 apache安装目录 APACHE_PREFIX=/Data/app/apache apache配置文件 APACHE_CONF=/etc/httpd/ ...

  2. ES6学习笔记（二）：教你玩转类的继承和类的对象

    继承 程序中的继承: 子类可以继承父类的一些属性和方法 class Father { //父类 constructor () { } money () { console.log(100) } } c ...

  3. MySQL存储过程和游标

    一.存储过程 什么是存储过程,为什么要使用存储过程以及如何使用存储过程,并且介绍创建和使用存储过程的基本语法. 什么是存储过程: 存储过程可以说是一个记录集,它是由一些T-SQL语句组成的代码块,这些 ...

  4. 在视觉可视化中如何使用ScaleBreaks-比例中断

    从lightningChart V8开始,这项图表控件产品开始支持X轴的Scale break功能. 这个功能的主要作用是排除选定的X轴范围,例如互动交易时间/日期或者机器停产时间等.如果有一部分的数 ...

  5. Kong 系列【六】添加插件---ip-restriction之黑白名单

    写在前边 本地postMan请求http://192.168.130.131:8000/test-route,可以正常访问,本地IP:192.168.130.1同样在虚拟机环境192.168.130. ...

  6. 如何获取Session对象中的对象

    先调用request的getSession()方法获取一个HttpSession的对象,然后将这个对象进行强制类型转换成原本封装的对象,这样就能获取Session对象中的对象了 1.调用request ...

  7. tensorflow安装问题

    环境 windows7 开始的时候,打算在最新版本下安装tensorflow体验下,python是3.6  anaconda是最新的5.0.1 结果执行  pip3 install --upgrade ...

  8. 使用vscode阅读C代码outline不显示问题

    1 问题:使用vscode code 阅读C代码 outline 显示No symbols found in document 'xxxx' 2 参考网上解决方法,进行如下操作 2.1  安装C/C+ ...

  9. 纪中集训2020.02.09【NOIP提高组】模拟B 组总结反思

    目录 JZOJ.1747[NOIP2014模拟11.5]无穷迷宫 比赛时 之后 总结 JZOJ1478.[NOIP2014模拟11.5]近似乘积 比赛时 之后 总结 JZOJ3926. [NOIP20 ...

  10. PHP Help Guideds

    how does php work with Apache? https://stillat.com/blog/2014/04/02/how-does-php-work-with-the-web-se ...