如何让在只有HTML与CSS的情况下实现动态效果呢?
关于动画,众所周知,JavaScript与Flash是做动画的主流,虽然CSS3的过渡并没有前两个专业,但是正是由于CSS3处理数据较少,其过渡比德芙还要丝滑。
今天让我们来看一下:
一、过渡(transtion)
属性:
1、transition-property
2、transition-duration(默认值为0,此时变化为一瞬间,没有过渡效果)
3、transition-timing-function
4、transition-delay
功能:
1、指定要过渡的CSS属性
2、指定完成过渡需要花费的时间(s)
3、指定过渡函数
其包括liner:匀速
ease-in:减速
ease-out:先加速再减速
4、指定过渡开始进行的延迟时间(s)
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过渡</title>
<style>
#container{
width:100px;
height:100px;
background:blue;
#container:hover{
cursor: pointer;
left: 100px;
border-radius: 50%;
background: red ;
}
}
.box{
position: absolute;
top: 20px;
left:20px;
width:100px;
height:100px;
background:blue;
transition: all 5s ease ;
}
.box:hover{
cursor: pointer;
left: 100px;
border-radius: 50%;
background: deeppink;
/* border-radius: 50%;
transition-property: left;
transition-duration: 10s;
transition-timing-function: ease;
transition-delay: 2s;*/
}
</style>
</head>
<body>
注意:由于过渡需要用户操作才可以实现,所以用:hover,若希望多个元素都具有过渡属性,则用ALL即可。和我们一起所写的background一样,既可以分开来写,也可以写在一起。
二、转换
1、移动
通过使用rotate()实现 单位deg
语法格式: transform:rotate(45deg) 旋转45度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转换之旋转</title>
<style>
.box{
position: absolute;
left:200px;
top:200px;
width:200px;
height:200px;
background-color: deeppink;
transform-origin: 10px 10px;
transform: rotate(45deg) ;
}
</style>
2、旋转
通过使:用transform实现,可实现元素的位移与旋转、缩放
位移:transform:translate()
旋转;transform:rotate()
缩放:transform:scale()
位移需要通过x与y坐标确定移动位置 语法格式:
transform:translate(x,y); transform:translateX(n); transform:translateY(n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>转换之移动</title>
<style>
.box{
width:100px;
height:100px;
border: 1px solid black;
background-color: deeppink;
}
div#div2{
transform: translate(50px,100px) ;
/* transform: translateX(50px);
transform: translateY(100px) ;*/
background-color: blue;
}
</style>
3、缩放
缩放使用transform:scole() 语法格式: transform:scole(1,1)宽和高都放大一倍 transform:scole(2)相当于scole(2,2) 大于1为放大,小于为缩小。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>转换之缩放</title>
<style>
div{
position: absolute;
width:100px;
height:100px;
background-color: deeppink;
}
</style>
三、动画
transition虽然纵享丝滑,但是缺点非常明显:
1、需要用户通过特定的操作进行触发
2、transition是一次性的,并不能重复,除非继续特定出发
3、其只能定义开头与结尾,中间过程无法定义
在这种万般无奈的情况下,animation诞生了!它不仅可以通过每一帧来进行动画效果的展示,并且可以完美调用每一帧。动画是css中的一功能,与过渡最大的区别是:动画可以实现更多变化,更多控制,自动播放等功能 若使用动画,浏览器应该是最高版本 使用动画时,用@keyframes来作为关键帧,通过百分比构建样式规则。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>动画1</title>
<style>
.box{
position: absolute;
left:100px;
top:10px;
width:100px;
height:100px;
background-color: deeppink;
}
.box:hover {
animation: move 2s;
}
/*定义动画*/
@keyframes move {
from{
left :10px;
}
to{
left:100px;
}
}
</style>
属性:
1、animation-name(none为默认值,无动画效果)
2、animation-duration(默认值为0,无动画效果)
3、animation-timing-function(同上)
4、animation-delay
5、animation-iteration-count(1为默认值,infinite为无限次循环)
6、animation-direction(默认值为normal)
7、animation-state(默认running播放,pause暂停)
8、animation-fill-mode(默认值none,forwards回到关键帧,backwards回到第一帧)
功能:
1、指定关键帧动画名字
2、指定动画播放时间
3、设置动画播放方式
4、设置开始时间
5、设置循环次数
6、动画播放方向
7、播放状态,播放或者暂停
8、播放时间外属性
文章浏览阅读1.6k次,点赞12次,收藏7次。大家好!大四的同学们毕业设计即将开始了,你们做好准备了吗?学长给大家精心整理了最新的计算机毕业设计选题,希望能为你们提供帮助。如果在选题过程中有任何疑问,都可以随时问我,我会尽力帮助大家。在选择毕业设计选题时,有几个要点需要考虑。首先,选题应与计算机专业密切相关,并且符合当前行业的发展趋势。选择与专业紧密结合的选题,可以使你们更好地运用所学知识,并为未来的职业发展奠定基础。要考虑选题的实际可行性和创新性。选题应具备一定的实践意义和应用前景,能够解决实际问题或改善现有技术。
文章浏览阅读3.4k次。摘要:随着电信业务的发展和电信企业经营方式的转变,DCN网络的定位发生了重大的演变。本文基于这种变化,重点讨论DCN网络的规划方法和运维管理方法。Digest: With the development oftelecommunication bussiness and the change of management of telecomcarrier , DCN’s role will cha..._电信dcn
文章浏览阅读442次。深度学习一部分矩阵求导知识的搬运总结_向量变元是什么
文章浏览阅读8次。近期,裁员的公司越来越多今天想和大家聊聊职场人的新出路。作为席卷全球的新概念ESG已然成为当前各个行业关注的最热风口目前,国内官方发布了一项ESG新证书含金量五颗星、中文ESG证书、完整ESG考试体系、名师主讲...而ESG又是与人力资源直接相关甚至在行业圈内成为大佬们的热门话题...当前行业下行,裁员的公司也越来越多大家还是冲一冲这个新兴领域01 ESG为什么重要?在双碳的大背景下,ESG已然成...
文章浏览阅读356次。云计算快速渗透到众多的行业,使中小企业受益于技术变革。最近微软SMB的一项研究发现,到今年年底,78%的中小企业将以某种方式使用云。企业希望投入少、收益高,来取得更大的发展机会。云计算将中小企业信息化的成本大幅降低,它们不必再建本地互联网基础设施,节省时间和资金,降低了企业经营风险。科技创新已成时代的潮流,中小企业上云是创新前提。云平台稳定、安全、便捷的IT环境,提升企业经营效率的同时,也为企业..._系统上云的前后对比
文章浏览阅读899次。出现选网卡的时候无法选中,这里应该是一个bug。3.保存退出,重启虚拟机即可。1.先随便选择一个网卡。2.勾先取消再重新勾选。_esxi虚拟机无法联网
文章浏览阅读913次。在LaTeX中,可在.tex文件的同一级目录下创建egbib.bib文件,所有的参考文件信息可以统一写在egbib.bib文件中,然后在.tex文件的\end{document}前加入如下几行代码:{\small\bibliographystyle{IEEEtran}\bibliography{egbib}}即可在文章中用~\cite{}宏命令便捷的插入文内引用,且文章的Reference部分会自动排序、编号。..._egbib
文章浏览阅读950次。目录:Unity Shader - 知识点目录(先占位,后续持续更新)原文:Predefined Shader preprocessor macros版本:2019.1Predefined Shader preprocessor macros着色器预处理宏Unity 编译 shader programs 期间的一些预处理宏。(本篇的宏介绍随便看看就好,要想深入了解,还是直接看Unity...
文章浏览阅读195次。本文目录:一、大数据时代还需要数据治理吗?二、如何面向用户开展大数据治理?三、面向用户的自服务大数据治理架构四、总结一、大数据时代还需要数据治理吗?数据平台发展过程中随处可见的数据问题大数据不是凭空而来,1981年第一个数据仓库诞生,到现在已经有了近40年的历史,相对数据仓库来说我还是个年轻人。而国内企业数据平台的建设大概从90年代末就开始了,从第一代架构出现到..._数据治理从0搭建
文章浏览阅读2.2k次,点赞4次,收藏12次。高手请一笑而过。物理实验课别人已经做过3、4个了,自己一个还没做呢。不是咱不想做,而是咱不想起那么早,并且仅有的一次起得早,但是哈工大的服务器竟然超负荷,不停刷新还是不行,不禁感慨这才是真正的“万马争过独木桥“啊!服务器不给力啊……好了,废话少说。其实,我的想法很简单。写一个三重循环,不停地提交,直到所有的数据都accepted。其中最关键的是提交最后一个页面,因为提交用户名和密码后不需要再访问其..._哈尔滨工业大学抢课脚本
文章浏览阅读4.9k次。一些别人收集的英文站点 http://www.lifeinchina.cn (nice) http://www.huaren.us/ (nice) http://www.hindu.com (okay) http://www.italki.com www.talkdatalk.com (transfer)http://www.en8848.com.cn/yingyu/index._study english html
文章浏览阅读5.5k次,点赞19次,收藏78次。什么是栈?在谈M3堆栈之前我们先回忆一下数据结构中的栈。栈是一种先进后出的数据结构(类似于枪支的弹夹,先放入的子弹最后打出,后放入的子弹先打出)。M3内核的堆栈也不例外,也是先进后出的。栈的作用?局部变量内存的开销,函数的调用都离不开栈。了解了栈的概念和基本作用后我们来看M3的双堆栈栈cortex-M3内核使用了双堆栈,即MSP和PSP,这极大的方便了OS的设计。MSP的含义是Main..._stm32 msp psp