css过度效果

最新推荐文章于 2024-03-18 21:52:36 发布

zhanghongbin01

最新推荐文章于 2024-03-18 21:52:36 发布

阅读量1.6k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/github_20066005/article/details/50437952

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

语法

transition：[,]*
= [ none | ] || || ||
默认值：看每个独立属性
适用于：所有元素，包含伪对象:after和:before
继承性：无
动画性：否
计算值：看每个独立属性
媒体：交互

取值

<’ transition-property ‘>：
检索或设置对象中的参与过渡的属性
<’ transition-duration ‘>：
检索或设置对象过渡的持续时间
<’ transition-timing-function ‘>：
检索或设置对象中过渡的动画类型
<’ transition-delay ‘>：
检索或设置对象延迟过渡的时间

缩写方式

transition:
        border-color .5s ease-in .1s,
        background-color .5s ease-in .1s,
        color .5s ease-in .1s;

拆分方式

transition-property: border-color, background-color, color;
transition-duration: .5s, .5s, .5s;
transition-timing-function: ease-in, ease-in, ease-in;
transition-delay: .1s, .1s, .1s;

案例演示

<!doctype html>
<html>
    <head>
        <title>test transtion</title>
        <style>
          ul{list-style: none;list-style-position: horizontal;}
          ul li{width:100px;height:50px;float:left;background-color:#eee;padding:10px;margin-left:10px;
                -webkit-transition:background-color .5s ease-in;
                -moz-transition:background-color .5s ease-in;
                transition:background-color .5s ease-in;
          }
          ul li:nth-child(1):hover{background-color:red;}
          ul li:nth-child(2):hover{background-color:green;}
          ul li:nth-child(3):hover{background-color:#90FF90;}
          ul li:nth-child(4):hover{background-color:#2DA2C9;}
        </style>
    </head>
    <body>
        <ul>
            <li>box1</li>
            <li>box2</li>
            <li>box3</li>
            <li>box4</li>
        </ul>
    </body>
</html>

transition-property 定义参与过渡效果的元素

取值

none：
不指定过渡的css属性
all：所有可以进行过渡的css属性
：指定要进行过渡的css属性

有过渡效果的属性

属性名称	类型
background-color	color
background-image	only gradients
background-position	percentage, length
border-bottom-color	color
border-bottom-width	length
border-color	color
border-left-color	color
border-left-width	length
border-right-color	color
border-right-width	length
border-spacing	length
border-top-color	color
border-top-width	length
border-width	length
bottom	length, percentage
color	color
crop	rectangle
font-size	length, percentage
font-weight	number
grid-*	various
height	length, percentage
left	length, percentage
letter-spacing	length
line-height	number, length, percentage
margin-bottom	length
margin-left	length
margin-right	length
margin-top	length
max-height	length, percentage
max-width	length, percentage
min-height	length, percentage
min-width	length, percentage
opacity	number
outline-color	color
outline-offset	integer
outline-width	length
padding-bottom	length
padding-left	length
padding-right	length
padding-top	length
right	length, percentage
text-indent	length, percentage
text-shadow	shadow
top length,	percentage
vertical-align	keywords, length, percentage
visibility	visibility
width	length, percentage
word-spacing	length, percentage
z-index	integer
zoom	number

zhanghongbin01

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css过度效果

语法transition：[,]* = [ none | ] || || || 默认值：看每个独立属性适用于：所有元素，包含伪对象:after和:before 继承性：无动画性：否计算值：看每个独立属性媒体：交互取值<’ transition-property ‘>：检索或设置对象中的参与过渡的属性 <’ transition-duration ‘>：检索或
复制链接

扫一扫