CSS3中的动画示例

大家好,欢迎来到雄雄的小课堂,上一期我们分享了几个CSS变形案例,大家还记得有哪几个吗?原文在这里:CSS3的几个变形案例……

今天,我们来看看CSS的过渡:

过渡

简单的来讲,就是元素由一种状态(样式)转变到另一种时的过程,可以称之为过渡。我们来口头举个例子:

某div初始的宽和高均为200px,背景色为红色(red),当鼠标悬浮时,我们想让其原地转一圈,背景色为黄色(yellow),那么由红色转到黄色的这个过程,即过渡……

语法:

transition: transition-property transition-duration transition-timing-function transition-delay;

大部分人一看这个语法,心理难免咯噔一下,我去,这么多啊……

其实不然,我们将其属性和挨个分析一下:

transition-property:规定应用过渡的 CSS 属性的名称;值可以width,height,background-color等,也可以是all,一般为了方便都写all。

transition-duration:定义过渡效果花费的时间;值可以是1s,2s等。秒数越大,动画执行的越慢。

transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。其余的值还有: linear       (匀速执行),ease(规定慢速开始,然后变快,然后慢速结束),ease-in(规定以慢速开始的过渡效果),ease-out(规定以慢速结束的过渡效果),ease-in-out(规定以慢速开始和结束的过渡效果)

transition-delay:规定过渡效果何时开始。默认是 0。也可以是具体的秒数,1s,2s等。

最后使用代码举个例子吧:

有如下div元素:

<div id="div6">6</div>

css样式为:

#div6{transition: all 1s ease-in-out;}#div6:hover{transform: translate(10px,10px) rotate(360deg);background:beige;}

运行效果如图所示:

往期精彩

CSS3的几个变形案例……

2020-11-18

jsp中使用cookie时报错……

2020-11-17

Java中的TreeSet集合会自动将元素升序排序

2020-11-16

“老师,请您多关注一下我吧!!!”

2020-11-15

晨读,难道只是为了完成任务而读的吗?

2020-11-14

Vector是线程安全的?

2020-11-13

点分享

点点赞

点在看

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/324510.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ASP.NET Core之跨平台的实时性能监控(2.健康检查)

前言 上篇我们讲了《如何使用App Metrics 做一个简单的APM监控》,最后提到过健康检查这个东西. 这篇主要就是讲解健康检查的内容. 没看过上篇的,请移步:ASP.NET Core之跨平台的实时性能监控 首先我们来了解一下什么是健康检查(health checks)? 1.什么是健康检查? 健康检查…

​通俗理解神经网络BP反向传播算法

转载自 ​通俗理解神经网络BP反向传播算法 通俗理解神经网络BP反向传播算法 在学习深度学习相关知识&#xff0c;无疑都是从神经网络开始入手&#xff0c;在神经网络对参数的学习算法bp算法&#xff0c;接触了很多次&#xff0c;每一次查找资料学习&#xff0c;都有着似懂非…

ssl初一组周六模拟赛【2018.3.31】

前言 先说一下成绩&#xff1a; 姓名成绩hjq300wyc(本人千年老二)270zyc260xjq240lw223xxy220lrz200hzb200 正题 题目1&#xff1a;ssl2406 约数【水题】 水题 链接&#xff1a; https://blog.csdn.net/mr_wuyongcong/article/details/79768338 题目2&#xff1a;ssl2407 …

CSS动画示例(上一篇是CSS过渡…)

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;前面&#xff0c;我们将CSS的变形和过渡都整理了&#xff0c;有需要的可以移步这里看&#xff1a;CSS3中的动画示例CSS3的几个变形案例……今天&#xff0c;我们来看看CSS3的动画。CSS3使用动画分为两个步骤&#xff1a;1.通…

Health Check in eShop -- 解析微软微服务架构Demo(五)

引言 What is the Health Check Health Check&#xff08;健康状态检查&#xff09;不仅是对自己应用程序内部检测各个项目之间的健康状态&#xff08;各项目的运行情况、项目之间的连接情况等&#xff09;&#xff0c;还包括了应用程序对外部或者第三方依赖库的状态检测。 W…

为什么梯度反方向是函数下降最快的方向

转载自 为什么梯度反方向是函数下降最快的方向 为什么梯度反方向是函数下降最快的方向&#xff1f; 刚接触梯度下降这个概念的时候&#xff0c;是在学习机器学习算法的时候&#xff0c;很多训练算法用的就是梯度下降&#xff0c;然后资料和老师们也说朝着梯度的反方向变动&a…

ssl1335-最佳派对【二分图,最大匹配,图论】

正题 题目 有n个中国学生与若干个外国学生&#xff0c;一些中国学生与外国学生之间可以很好的配对&#xff0c;求能配成的最多对数 解题思路 二分图匈牙利算法 代码 #include<cstdio> #include<cstring> using namespace std; struct line{int x,y,next; }a[100…

javaweb中实现分页,持续更新……

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;昨天分享了个分页工具类一个简单的分页工具类&#xff0c;其实&#xff0c;也是为今天的分享做的铺垫&#xff0c;今天&#xff0c;给大家带来的是javaweb实现分页的全过程&#xff01;前言&#xff1a;为什么需要分页&…

Redis(入门)

文章目录一、 Redis简介二、 基于Docker安装Redis单机版三、 Redis常用命令1 Key操作2 字符串值(String)&#xff08;值的长度不超过512MB&#xff09;3 哈希表(Hash)4 列表&#xff08;List&#xff09;5 集合(Set)6 有序集合&#xff08;Sorted Set&#xff09;四、 Redis持久…

浅析神经网络为什么能够无限逼近任意连续函数

转载自 浅析神经网络为什么能够无限逼近任意连续函数 神经网络为什么能够无限逼近任意连续函数&#xff1f; 下面通过一个分类例子一步一步的引出为什么神经网络能够无限逼近任意函数这个观点&#xff0c;并且给出直观感觉! 我们首先有这个需求&#xff0c;需要将下面的数据…

前端模块化工具--webpack学习心得

话说前头 webpack前段时间有听说一下&#xff0c;现在已经到了3.x的版本&#xff0c;自己没去接触。因为之前使用gulp来作为自己的项目构建工具。现在感觉gulp使用的趋势在减少。现在这段时间去接触了webpack&#xff0c;感觉很不错&#xff0c;它的模块化打包机制&#xff0c…

ssl1333-地鼠的困境【二分图,最大匹配,图论】

正题 大意 有n个地鼠有m个地洞&#xff0c;每只地鼠的速度都是v。若不在s秒之内回到地洞就会狗带&#xff0c;每只地洞只能躲一只地鼠&#xff0c;求能活下来多少只 代码 #include<cstdio> #include<cstring> #include<cmath> using namespace std; struct…

javaweb实现分页查询(一)

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;昨天分享了个分页工具类&#xff0c;其实&#xff0c;也是为今天的分享做的铺垫&#xff0c;今天&#xff0c;给大家带来的是javaweb实现分页的全过程&#xff01; 前言&#xff1a;为什么需要分页&#xff1f;假设某大学有…

eclipse搭建多module项目的坑

一、eclipse坑 1、低版本eclipse没有jdk1.8 2、默认使用jre库作为工作空间jdk&#xff0c;项目build path绑定jre&#xff0c;而Maven项目需要jdk 3、Maven项目经常抛错&#xff0c;工作空间和项目缓存了Maven错误信息 二、Maven坑 1、仓库没有包&#xff0c;生成xxx.lastU…

SpringSecurity认证

一、 Spring Security简介 1 概括 Spring Security是一个高度自定义的安全框架。利用Spring IoC/DI和AOP功能&#xff0c;为系统提供了声明式安全访问控制功能&#xff0c;减少了为系统安全而编写大量重复代码的工作。 使用Spring Secruity的原因有很多&#xff0c;但大部分都…

【2018.4.7】模拟赛之一-ssl2382 K好数【数位dp】

正题 大意 如果一个数每一位都小于k那么这个数是好数。给出n和k&#xff0c;求1-n里有多少个好数。 解题思路1 将起改为一个k1进制的数&#xff0c;那么每次加1后这个数都是好数。然后判断一下是否大于n&#xff08;十进制的情况下&#xff09; 解题思路2 数位dp&#xff0…

基于.NET CORE微服务框架 -谈谈surging的服务容错降级

一、前言 对于不久开源的surging受到不少.net同学的青睐&#xff0c;也受到.net core学习小组的关注&#xff0c;邀请加入.NET China Foundation 以方便国内.net core开源项目的推广&#xff0c;我果断接受邀请加入了队伍进行互相交流学习&#xff0c;最近也更新了surging新的…

java中部的分页实现(二)

大家好&#xff0c;欢迎来到雄雄的小课堂&#xff0c;昨天分享了关于分页查询的理论知识&#xff0c;今天我们就来结合代码和案例实际的应用一下&#xff0c;方便大家理解。前言&#xff1a;我们都知道&#xff0c;实现分页需要三个步骤。第一&#xff0c;确定页大小&#xff0…

artTemplate的空白输出坑

一、问题现象 <script type"text/html" id"man_template">{{each list as v i}}<tr><td>{{v.name}}</td><td>{{v.height}}</td><td>{{v.age}}</td></tr>{{/each}} </script> <script>…

SpringSecurity授权(访问控制)

一、 访问控制url匹配 在前面讲解了认证中所有常用配置&#xff0c;主要是对httpSecurity.formLogin()进行操作。而在配置类中httphttpSecurity.authorizeRequests()主要是对url进行控制&#xff0c;也就是我们所说的授权&#xff08;访问控制&#xff09;。httpSecurity.autho…