比如输入框触交渐变

在原来的属性添加 :

.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. vux-- Vue.js 移动端 UI 组件库

    1.使用 安装或更新: npm install vux --save npm install vux-loader --save 如果没有安装less: npm install less less-l ...

  2. Windows AD日志分析平台WatchAD安装教程

    目录 WatchAD介绍 安装环境 WatchAD安装(日志分析端服务) 基础环境配置 安装WatchAD 运行WatchAD WatchAD-web安装(Web监控端服务) 下载WatchAD-We ...

  3. 《Java 8 in Action》Chapter 12：新的日期和时间API

    在Java 1.0中,对日期和时间的支持只能依赖java.util.Date类.同时这个类还有两个很大的缺点:年份的起始选择是1900年,月份的起始从0开始. 在Java 1.1中,Date类中的很多 ...

  4. Python json 序列号字典 文本的存储和读取

    rootDir='./resources/v1/'# 根目录 # 按钮测试图片 btnTestPicUrl = { 'armyAttack' : rootDir+'testPic/gj2.jpg', ...

  5. C#设计模式学习笔记：(13)模板方法模式

    本笔记摘抄自:https://www.cnblogs.com/PatrickLiu/p/7837716.html,记录一下学习过程以备后续查用. 一.引言 今天我们要讲行为型设计模式的第一个模式--模 ...

  6. 来简单说说var,let,const,function,import,class

    一.var和let var已经在JavaScript中存在很长一段时间了,但是它存在了一些不足的地方,接下来我们就来看看吧 首先var存在变量提升,这是怎么一回事呢,我们看下面代码 为什么是它呢,是因 ...

  7. ELK学习001：Elastic Stack简介

    ELK简介: ELK Stack:ELK是Elasticsearch.Logstash.Kibana的缩写简称,这三者都是开源软件.ELK是5.0版本前的统称:这是一套统一的日志收集分析系统.它能够方 ...

  8. PHP0026：PHP 博客项目开发3

  9. C#里面低消耗获取当前时间的思路

    Linux下有vsyscall来优化一些例如time(NULL), gettimeofday这种调用的消耗; 但是Windows下, 没有类似的东西, 但是思路还是有的 1. 程序启动的时候, 获取一 ...

  10. 小白的linux笔记8：linux自动运行爬虫并发送提醒邮件

    有了成功运行的爬虫后,希望能每天定时运行,且遇到错误时能及时发出提醒. 发出提醒 可以用mailx发出邮件做提醒.没有的话先安装Yum install mailx. 以qq邮箱为例,需要设置/etc/ ...