CSS3--利用transform和transition属性制作扇形导航

最新推荐文章于 2024-05-23 13:03:42 发布

Wendy-lxq

最新推荐文章于 2024-05-23 13:03:42 发布

阅读量5.1k

点赞数 3

分类专栏： CSS & CSS3 文章标签： css3 transform transition

本文链接：https://blog.csdn.net/u010297791/article/details/54377936

版权

在前面，我们已经讲解了transform这个属性以及案例，那么本文会进一步结合transform和transition两个属性，并制作一个简单的案例进行说明。

一、transition属性说明

接下来简单分析一下transition这个属性的定义以及子属性。

1）ansition-property 要运动的样式（all || [attr] || none）
2）transition-duration 运动时间
3）transition-delay 延迟时间
4）transition-timing-function 运动形式
ease：（逐渐变慢）默认值
linear：（匀速）
ease-in：(加速)
ease-out：（减速）
ease-in-out：（先加速后减速）
cubic-bezier 贝塞尔曲线（ x1, y1, x2, y2 ） http://matthewlein.com/ceaser/

[注意]IE9-不支持该属性，safari3.1-6、IOS3.2-6.1、android2.1-4.3需要添加-webkit-前缀；而其余高版本浏览器支持标准写法。

看一个简单的例子：

当鼠标经过div时，实现该div的颜色改变，以及高度和宽度都改变的效果。

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        .box{
            width:100px;
            height:100px;
            background-color: blue;
            transition-duration: 2s;
            /*     以下三值为默认值，稍后会详细介绍 */
            transition-property: all;
            transition-timing-function: ease;
            transition-delay: 0s;
        }
        .box:hover{
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div&

最低0.47元/天解锁文章

Wendy-lxq

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
CSS3--利用transform和transition属性制作扇形导航

在前面，我们已经讲解了transform这个属性以及案例，那么本文会进一步结合transform和transition两个属性，并制作一个简单的案例进行说明。一、transition属性说明接下来简单分析一下transition这个属性的定义以及子属性。 1）ansition-property 要运动的样式（all || [attr] || none） 2）t
复制链接

扫一扫