css3中的动画 @keyframes animation
2024-08-30 11:28:27
动画的运用比较重要。接下来我希望针对我自己学习遇到的问题,再总结一下这个属性的使用方法。
创建一个动画:
@keyframes 动画名 {样式}
引用自己创建的动画:
animation:动画名 时长(执行多长时间) 效果 开始时间(多久之后开始);
其中 效果 开始时间是可以省略的。
举个栗子:div获得鼠标焦点时会改变宽度
<div class="dh1"></div> <style>
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*创建一个动画myDongHua1 内容是在不同时间段改变div的宽度*/
@keyframes myDongHua1 {
0%{width: 300px;}
50%{width: 200px;}
100%{width: 600px;}
}
/*调用动画效果 animation: 动画名 执行时间长度;*/
.dh1:hover{
animation:myDongHua1 1s;
}
</style>
再举个栗子:当div获得鼠标焦点时 颜色会从yellow变成blue
<div class="dh2"></div> <style>
div{
border: 1px solid black;
width: 100px;
height: 100px;
}
/*创建一个动画myDongHua2 内容是分阶段改变div颜色*/
@keyframes myDongHua2{
from{background:yellow;}
to{background:blue;}
}
/*调用动画效果 animation: 动画名 执行时间长度;*/
.dh2:hover{
animation:myDongHua2 3s;
}
</style>
再再举个栗子:当div获得鼠标焦点会出发 CD的旋转动画效果
<div class="CDtum">
<img src="img/cd.png" alt=""/> <!--此处引入一个CD的圆形图片-->
</div> <style> /*cd旋转实例*/
.CDtum{
width: 200px;
height: 200px;
}
.CDtum img{
width: 200px;
height: 200px;
border-radius: 100%;
}
/*设置动画从0度旋转到360度*/
@keyframes CDtum{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
/*调用动画 3秒内完成 linear:匀速 3表示只进行三次动画 可以用infinite 来无限执行*/
.CDtum img:hover{
animation:CDtum 3s linear 3 ;
}
</style>
最新文章
- 总结项目开发中用到的一些css\html技巧
- C++和C中的函数如何相互调用
- 微信html5开发选哪一个
- smartgit document merge
- hdu 2087-剪花布条(KMP)
- SQL SERVER 设置自动备份和删除旧的数据库文件
- 提高 Discuz 门户文章被百度收录的方法
- BZOJ 1612: [Usaco2008 Jan]Cow Contest奶牛的比赛( floyd )
- BZOJ 1726: [Usaco2006 Nov]Roadblocks第二短路
- window.location.href 和 document.location.href
- Get the Job You Want(大学英语综合教程4课文)
- Qualcomm平台camera调试移植入门
- MQ知识点汇总
- 基于CBOW网络手动实现面向中文语料的word2vec
- c++中结构体sort()排序
- json and pickle 序列化
- 2018面向对象程序设计(Java)第7周学习指导及要求
- debian7(wheezy)升级安装mercurial hg最新版2.8-RC,解决tortoisehg2.9.2不能使用。
- ubuntu安装mysql-python
- Flex 布局浅析