时间:2021-05-08
一、平移动画有关的CSS3属性以及相关的属性描述
1、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。
2、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。
3、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。
4、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。
先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片:
二、效果图
图片左侧的文字还没有进入
图片上的四行文字正在逐条进入
图片上四行文字完成动画效果
三、示例代码
HTML5全部代码:
复制代码代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<figure class="test1">
<img src="img/dengfuru3.jpg" class="test1-img">
<figcaption>
<h2><font color="white">邓福如</font></h2>
<p>《如果有如果》</p>
<p>《前面路口停》</p>
<p>《邓大福是一只猫》</p>
<p>《Nothing On You》</p>
</figcaption>
</figure>
</body>
</html>
CSS3样式代码:
复制代码代码如下:
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}</p><p>
.test1-img{
width: 50%;
height:10%;
overflow: hidden;
margin-left:250px;
}</p><p>figure{
position: relative;
overflow: hidden;
width: 100%;
float: left;
}</p><p>figcaption{
position: absolute;
top:0;
left: 0;
}</p><p>.test1{
background-color: #2F0000;
}</p><p>.test1 figcaption {
margin: 20px;
}</p><p>
.test1 figcaption p{
background-color: #FFF;
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}</p><p>
figure figcaption p{
transition: transform 0.35s;
}</p><p>
.test1 figcaption p{
transform: translate(-400px,0px);
}</p><p>
.test1:hover figcaption p{
transform: translate(0px,0px);
}</p><p>
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.05s;
}</p><p>
.test1 figcaption p:nth-of-type(2){
transition-delay: 0.10s;
}</p><p>
.test1 figcaption p:nth-of-type(3){
transition-delay: 0.15s;
}</p><p>
.test1 figcaption p:nth-of-type(4){
transition-delay: 0.2s;
}
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本篇文章主要介绍了css3实现文字扫光渐变动画效果的示例,分享给大家,具体如下:利用css3这个属性(背景剪裁):background-clip:border-
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3transform属性的rotate旋转,translate移动
先来看看效果图CSS3伪类target利用target的特性,可以实现纯css的tab效果切换示例代码如下复制代码代码如下:.tabmenu{position:
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图:实现的代码。html代码:复制代码代码如下:Wind
今天给大家分享一款纯css3实现的win8加载动画。在这款实例中动画效果完全由css3实现。一起看下效果图: 实现的代码。 html代码:XML/HTM