一、CSS3 过渡

（一）、CSS3过渡简介

CSS3过渡是元素从一种样式逐渐改变为另一种的效果。

实现过渡效果的两个要件：

  • 规定把效果添加到哪个 CSS 属性上
  • 规定效果的时长

定义动画的规则

过渡transition  （作用） 将元素的某个属性从“一个值”在指定的时间内过渡到“另一个值”

（二）、transition属性

   语法 ：   {transition： 属性名 持续时间 过渡方法 }

transition-timing-function  属性取值

示例：

利用transition设置过渡的实例

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style>
  6. div
  7. {
  8. width:100px;
  9. height:100px;
  10. background:blue;
  11.  
  12. transition:width 2s;
  13. }
  14. div:hover
  15. {
  16. width:600px;
  17. height:600px;
  18. text-align: center;
  19. line-height:100px;
  20. background:url(1.jpg);
  21. background-position:top;
  22. background-repeat: no-repeat;
  23. }
  24.  
  25. </style>
  26. </head>
  27. <body>
  28. <div>kaka</div>
  29. </body>
  30. </html>

从一个正方体

过渡到一个背景图片

css过渡transition属性的更多相关文章

  1. 深入理解CSS过渡transition

    × 目录 [1]定义 [2]过渡属性 [3]持续时间[4]延迟时间[5]时间函数[6]多值[7]阶段[8]触发[9]API 前面的话 通过过渡transition,可以让web前端开发人员不需要jav ...

  2. css过渡transition

    定义 过渡transition是一个复合属性,包括transition-property.transition-duration.transition-timing-function.transiti ...

  3. 深入css过渡transition

    通过过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果.过渡属性看似简单,但实际上它有很多需要注意的细节和容易混淆的地方. 过渡transitio ...

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

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

  5. css的transition 属性

    把鼠标指针放到 div 元素上,其宽度会从 100px 逐渐变为 300px: div { width:100px; transition: width 2s; -moz-transition: wi ...

  6. CSS过渡动画之transition

    O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...

  7. Vue过渡效果之CSS过渡

    前面的话 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.本文将从CSS过渡transition.CSS动画animation及配合使用第三方CSS动画库(如animate. ...

  8. 我想学前端动画-CSS之transition

    Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...

  9. Vue css过渡 和 js 钩子过渡

    css过渡 <transition name="slide"> <div v-show="!showChatInput" class=&quo ...

随机推荐

  1. Spring boot 梳理 -@SpringBootApplication、@EnableAutoConfiguration与（@EnableWebMVC、WebMvcConfigurationSupport,WebMvcConfigurer和WebMvcConfigurationAdapter）

    @EnableWebMvc=继承DelegatingWebMvcConfiguration=继承WebMvcConfigurationSupport 直接看源码,@EnableWebMvc实际上引入一 ...

  2. 『TensorFlow2.0正式版教程』极简安装TF2.0正式版（CPU&GPU）教程

    0 前言 TensorFlow 2.0,今天凌晨,正式放出了2.0版本. 不少网友表示,TensorFlow 2.0比PyTorch更好用,已经准备全面转向这个新升级的深度学习框架了. ​ 本篇文章就 ...

  3. Spring Cloud Config 配置中心实践过程中，你需要了解这些细节！

    本文导读: Spring Cloud Config 基本概念 Spring Cloud Config 客户端加载流程 Spring Cloud Config 基于消息总线配置 Spring Cloud ...

  4. ubuntu13 eclipse菜单栏失效解决

    使用ubuntu13安装完eclipse和myeclipse后发现菜单栏单击时不显示下拉框只能通过快捷键显示. 百度了一下,找到以下解决办法. 打开终端运行下面的命令,打开eclipse后可正常显示菜 ...

  5. centos7 远程连接其他服务器mysql

    在本地远程连接 在终端输入: mysql -h 服务器ip地址 -P 端口 -u 用户名 -p 然后输入密码即可.

  6. Docker系列（三）：将.Net Core Api部署到Kubernetes (K8s)中

    1.新建一个WebApi项目,并添加Dockerfile文件: FROM microsoft/dotnet:2.1-aspnetcore-runtime AS base WORKDIR /app EX ...

  7. 如果有人问你 JFinal 如何集成 EhCache，把这篇文章甩给他

    废话不多说,就说一句:在 JFinal 中集成 EhCache,可以提高系统的并发访问速度. 可能有人会问 JFinal 是什么,EhCache 是什么,简单解释一下. JFinal 是一个基于Jav ...

  8. 【maven的使用】1maven的概念与配置

    maven是一个基于java平台的自动化构建工具.构建工具的发展由make->ant->maven->gradle其中gradle还在发展中,使用较少,学习难度比较大,所以目前占据主 ...

  9. Java面试----01.JavaSE

    1.面向对象和面向过程的区别 面向过程:面向过程性能比面向对象高. 因为类调用时需要实例化,比较消耗资源,所以当性能是最重要的考虑因素时,比如单片机.嵌入式开发.Linux/Unix等一般采用面向对象 ...

  10. redis在mac上的下载安装

    redis官网下载压缩包: 在终端进入下载后的目录,然后: 解压:tar zxvf redis-5.0.5.tar.gz 移动到:sudo mv redis-5.0.5 /usr/local 切换到: ...