CSS3动画与过渡效果-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43024812/article/details/87200216

利用css3制作网页动画
css变形

 transform:[transfrom-function] *;

translate():平移函数 transfrom( tx,ty) 单位为px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
        background: rgba(242,123,5,0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li:hover{

            transform: translate(8px,8px);
            -moz-transform: translate(8px,8px);
            -o-transform: translate(8px,8px);
            -webkit-transform: translate(8px,8px);
        }
        li a{
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
            background: rgba(242,88,6.0.87);
            border-radius: 6px;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a> </li>
    <li><a href="#">美妆馆</a> </li>
    <li><a href="#">超市</a> </li>
    <li><a href="#">全球购</a> </li>
    <li><a href="#">闪购</a> </li>
    <li><a href="#">团购</a> </li>
    <li><a href="#">拍卖</a> </li>
    <li><a href="#">金融</a> </li>
</ul>
</body>
</html>

scale(): 缩放函数 scale(sx,sy)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242,123,5,0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li:hover{
            transform: scale(1.5);
            -moz-transform: scale(6);
        }
        li a{
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
            background: rgba(242,88,6.0.87);
            border-radius: 6px;

        }
        </style>
</head>
<body>

<ul>
    <li><a href="#">服装城</a> </li>
    <li><a href="#">美妆馆</a> </li>
    <li><a href="#">超市</a> </li>
    <li><a href="#">全球购</a> </li>
    <li><a href="#">闪购</a> </li>
    <li><a href="#">团购</a> </li>
    <li><a href="#">拍卖</a> </li>
    <li><a href="#">金融</a> </li>
</ul>
</body>
</html>

rotate():旋转函数 totate(-deg)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            margin: 40px auto;
            text-align: center;
        }
        img:hover{
            transform: rotate(90deg) scale(5);
        }
    </style>
</head>
<body>
<div>
<img src="xiu/tx.jpg" alt="img">
</div>
</body>
</html>

skew():倾斜函数 skew(ax,ay) 单位为deg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
            float: left;
            width: 80px;
            line-height: 40px;
            background: rgba(242,123,5,0.61);
            border-radius: 6px;
            font-size: 16px;
            margin-left: 3px;
        }
        li:hover{
            transform: skew(40deg,-20deg);
            -moz-transform: skew(40deg,-20deg);
        }
        li a{
            text-decoration: none;
            color: #fff;
            display: block;
            text-align: center;
            height: 40px;

        }
        li a:hover{
            background: rgba(242,88,6.0.87);
            border-radius: 6px;

        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">服装城</a> </li>
    <li><a href="#">美妆馆</a> </li>
    <li><a href="#">超市</a> </li>
    <li><a href="#">全球购</a> </li>
    <li><a href="#">闪购</a> </li>
    <li><a href="#">团购</a> </li>
    <li><a href="#">拍卖</a> </li>
    <li><a href="#">金融</a> </li>
</ul>
</body>
</html>

过渡属性的使用
transition:[transition-property transition-duration transition-timing-finction transition-delay] *

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            transition: background-color 2s ease-in-out;
            -moz-transition: background-color 2s ease-in-out;
        }
        div:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

transition-property ; 指定过渡或动态模拟的css属性
transition-duration ；指定完成过渡所需要的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            transition: background-color 2s;
            -moz-transition: background-color 2s;
        }
        div:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

transition-timing-finction ；指定过渡函数

transition-delay ；指定过渡开始出现的延迟时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: red;
            width: 200px;
            height: 200px;
            transition: background-color 2s;
            -moz-transition: background-color 2s;
        }
        div:hover{
            background-color: yellow;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

15