请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
先看效果:
花潮论坛欢迎您
以上效果,代码如下:
<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>
<div class="mama">花潮论坛欢迎您</div>
transition 要放在原始元素中,可接收四个参数:参数一,动画指向的元素属性值,比如,只规定字体颜色,则本例中的 all 改为 color;参数二,动画时长,例中的 2s;参数三,动画方式,例中的 ease,我们最常用的是linear;最后一个是延时,例中的 0s ,0s 表示马上执行(注意,即使是0,秒的单位 s 也是不可以省略的!)。
transition 是鼠标滑动交互的一个过渡属性,广泛应用于web页。通过本例,可以较好地理解其用法。 |