CSS transition举例
<style>.mama {
margin: 50px auto 0;
width: 300px;
height: 100px;
background: #eee;
border: 1px solid rgba(0,0,0,.6);
font: bold 2em /100px sans-serif;
color: blue;
text-align: center;
text-shadow: 1px 1px 3px rgba(0,0,0,.6);
transition: all 2s ease 0s;
}
.mama:hover {
transform: skew(-15deg);
color: purple;
cursor: pointer;
}
</style>
<p>先看效果：</p>
<div class="mama">花潮论坛欢迎您</div>
<p><br></p><p>以上效果，代码如下：</p><p><br></p>
<pre><style>
<span style="color: red;">.mama </span>{
<span style="color: blue;">margin</span>: 50px auto 0;
<span style="color: blue;">width</span>: 300px;
<span style="color: blue;">height</span>: 100px;
<span style="color: blue;">background</span>: #eee;
<span style="color: blue;">border</span>: 1px solid rgba(0,0,0,.6);
<span style="color: blue;">font</span>: bold 2em /100px sans-serif;
<span style="color: blue;">color</span>: blue;
<span style="color: blue;">text-align</span>: center;
<span style="color: blue;">text-shadow</span>: 1px 1px 3px rgba(0,0,0,.6);
<span style="color: blue;">transition</span>: all 2s ease 0s;
}
<span style="color: red;">.<span style="color: blue;">mama</span>:hover </span>{
<span style="color: blue;">transform</span>: skew(-15deg);
<span style="color: blue;">color</span>: purple;
<span style="color: blue;">cursor</span>: pointer;
}
</style>
<<span style="color:darkred">div</span> <span style="color: red">class</span><span style="color: blue">=</span><span style="color: magenta">"mama"</span>>花潮论坛欢迎您<<span style="color: darkred">/div</span>>
</pre>
<p><br></p><p>transition 要放在原始元素中，可接收四个参数：参数一，动画指向的元素属性值，比如，只规定字体颜色，则本例中的 all 改为 color；参数二，动画时长，例中的 2s；参数三，动画方式，例中的 ease，我们最常用的是linear；最后一个是延时，例中的 0s ，0s 表示马上执行（注意，即使是0，秒的单位 s 也是不可以省略的！）。</p><p><br></p><p>transition 是鼠标滑动交互的一个过渡属性，广泛应用于web页。通过本例，可以较好地理解其用法。</p> 花潮论坛欢迎你{:4_176:} transition 和 transform ，有点傻傻地分不清了{:4_173:} 哦，我说错了，是分不清transition和animation ，两者设置的方法好像差不多啊。{:4_173:} 红影 发表于 2022-7-1 10:43
哦，我说错了，是分不清transition和animation ，两者设置的方法好像差不多啊。
transition 是独立存在的过渡动画，不依赖于 transform 转换动画，也不依赖 animation 来调用。
transition 自身有四个参数，语法结构与 animation 差不多。transition 的第一个参数不是 @keyframes 动画名称，而是元素的某一个属性名称，比如 width、height、color 等等。 樵歌 发表于 2022-7-1 09:47
花潮论坛欢迎你
{:4_191:} 马黑黑 发表于 2022-7-1 12:15
transition 是独立存在的过渡动画，不依赖于 transform 转换动画，也不依赖 animation 来调用。
trans ...
嗯嗯，两者的区别最关键的还是在第一个参数上，而且前者直接设置，不需要调用。 红影 发表于 2022-7-1 16:08
嗯嗯，两者的区别最关键的还是在第一个参数上，而且前者直接设置，不需要调用。
它不调用，没它也行，有它就规范了一下时间啥的 马黑黑 发表于 2022-7-1 12:15
{:4_176:} 樵歌 发表于 2022-7-1 21:38
又喝起 马黑黑 发表于 2022-7-1 18:12
它不调用，没它也行，有它就规范了一下时间啥的
还是有它的好，更可控点。 红影 发表于 2022-7-1 21:42
还是有它的好，更可控点。
当然是这样 马黑黑 发表于 2022-7-1 21:39
又喝起
早上再喝{:4_190:} 樵歌 发表于 2022-7-2 08:31
早上再喝
{:4_180:} 马黑黑 发表于 2022-7-2 08:35
下午喝多了失眠{:4_189:} 樵歌 发表于 2022-7-2 16:48
下午喝多了失眠
那就抿一口 马黑黑 发表于 2022-7-2 17:59
那就抿一口
喝三百杯{:4_189:} 樵歌 发表于 2022-7-3 17:19
喝三百杯
一醉五百年 马黑黑 发表于 2022-7-3 19:32
一醉五百年
向天再借五百年{:4_189:} 樵歌 发表于 2022-7-4 19:12
向天再借五百年
不知道利息高不高
页:
[1]