box-shadow综合实例

2017-05-26 18:59:28
摘要:过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,比如鼠标称上去执行一个过度,这过度花2S,这样就可

过渡transition,可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果,比如鼠标称上去执行一个过度,这过度花2S,这样就可以形成一个2秒的动画,

过渡transition是一个复合属性,包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果

transition-property: 过渡属性(默认值为all)

transition-duration: 过渡持续时间(默认值为0s)

transiton-timing-function: 过渡函数(默认值为ease函数)

transition-delay: 过渡延迟时间(默认值为0s)

比如:当鼠标移动到a标签上,为他加上阴影,这个动作1s实现(如图)

哪就应该这样写代码:

加阴影

a:hover {

box-shadow: inset 0 -3px 0 #CC3232;

}

这个动作要过渡1秒钟

a {

font-family: sans-serif;

color: #fff;

text-indent: 1rem;

background-color: #ccc;

display: inline-flex;

flex: 1 1 20%;

align-self: stretch;

align-items: center;

justify-content: center;

transition: box-shadow 1s;//代表为文件加阴影用1秒时间过渡

text-decoration: none;

}

a + a {

border-left: 1px solid #aaa;

}
完整代码下载地址:box-shadow例子.zip

相关文章