比如输入框触交渐变

在原来的属性添加 :

.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. getElementsByName和getElementById获取控件

    js对控件的操作通常使用getElementsByName或getElementById来获取不同的控件进行操作 getElementsByName() 得到的是一个array, 不能直接设value ...

  2. Linux运维--11.手动部署Galera Cluster

    1.搭建galera集群 yum install epel-release yum install centos-release-openstack-stein #1.1 安装mariadb yum ...

  3. DEM转换为gltf

    目录 1. 概述 2. 详细 3. 结果 4. 参考 1. 概述 DEM(地形文件)天然自带三维信息,可以将其转换成gltf模型文件.DEM是栅格数据,可以通过GDAL进行读取:gltf是一种JSON ...

  4. ELK学习001：Elastic Stack简介

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

  5. C++实现一个简单的双栈队列

    双栈队列的原理是用两个栈结构模拟一个队列, 一个栈A模拟队尾, 入队的元素全部压入此栈, 另一个栈B模拟队首, 出队时将栈A的元素弹入栈B, 将栈B的栈顶元素弹出 此结构类似汉诺塔, 非常经典, 这里 ...

  6. 使用Ajax时[object%20object] 报错的解决方案

    踩坑经过 最近初学Ajax,当我想把Ajax应用到自己项目中的时候,没有达到理想的效果,还报了如下错误: 点击图中报错,产生报错页面如下: 当时写的Ajax如下: // 提交修改密码表单 $(&quo ...

  7. 折腾vue--vue自定义组件（三）

    1.创建组件  demo.vue,内容如下: <template> <div> <input type="button" :value="n ...

  8. 清北学堂—2020.1提高储备营—Day 3（图论初步（一））

    qbxt Day 3 --2020.1.19 济南 主讲:李奥 目录一览 1.图论(图.图的存储方式.最小生成树的定义) 总知识点:图论 前言:众所周知,图论是一个非常重要的部分,而这次集训也可以算从 ...

  9. ubuntu 安装mysql数据库

    apt方式安装 官网参考: https://dev.mysql.com/doc/mysql-apt-repo-quick-guide/en/ 执行命令: sudo wget https://dev.m ...

  10. [Blog] Part1: 技术札记-写个创站小结吧

    创站绝对是一个大坑 我当初真有勇气.. 嗯 这个站主要就是 Github+Jekyll+markdown 基本上还是现在能用的比较习惯的模式 基本流程概述 域名 -> 修改DNS -> g ...