比如输入框触交渐变

在原来的属性添加 :

.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. Class Literal（Java）

    前言 上一节我们讨论过通过关键字synchronized实现线程同步,同时最主要了解到在Java中className.class所代表的具体含义,在博客写完后,感觉还是有点迷糊,然后再次深入了解后,原 ...

  2. C# 数据类型详解以及变量、对象与内存

    学习刘铁猛老师<C#语言入门详解>视频,针对其中重点知识点进行总结. 1.什么是类型? 类型又称为数据类型(Data Type),数据类型在数据结构中的定义是一个值的集合以及定义在这个值集 ...

  3. 深入源码分析SpringMVC执行过程

    本文主要讲解 SpringMVC 执行过程,并针对相关源码进行解析. 首先,让我们从 Spring MVC 的四大组件:前端控制器(DispatcherServlet).处理器映射器(HandlerM ...

  4. jQuery的核心功能选择器

    选择器是jquery的核心 jquery选择器返回的对象是jquery对象,不会返回undefined或者null,因此不必进行判断 基本选择器: ID选择器  $("#ID") ...

  5. uniapp简易直播

    实验准备 在服务器部署nginx-rtmp作为我们直播推流和拉流的服务器(如果服务商选择七牛,也是直接给地址推流).为了加快部署,我在这一步使用Docker. docker pull tiangolo ...

  6. MySql学习-1.MySql的安装：

    1.安装包的下载(mysql-v5.7.25 )(NavicatforMySQL_11.2.15): 链接:https://pan.baidu.com/s/166hyyYd3DMjYhMwdW805F ...

  7. 使用uftrace来debug应用程序

    谈uftrace之前,先谈谈ftrace. ftrace是一个用于调试linux内核的工具,它可以用于调试内核的调用栈,performance等. ftrace的核心是在编译内核代码时,通过制定-pg ...

  8. Python——模块和包

    一.概念 """模块():一个python文件,以 .py 结尾,包含python对象定义和语句.模块可以定义函数.类.变量,也可包含可执行文件 导入模块: 1.impo ...

  9. myeclipse 2018 intaslled jars JREs 选项区别，及注意事项

    Standard 1.1.x VM与Standard VM的区别 在Eclipse或MyEclipse中要设置Installed JREs时,有三个选择: - Execution Environmen ...

  10. day19 几个模块的学习

    # 模块本质上就是一个 .py 文件# 数据类型# 列表.元组# 字典# 集合.frozenset# 字符串# 堆栈:特点:先进后出# 队列:先进先出 FIFO # from collections ...