码迷,mamicode.com
首页 > 其他好文 > 详细

16-过渡

时间:2019-09-06 18:54:16      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:doctype   style   ati   bsp   html   padding   over   idt   rop   

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition-duration: 2s;
            transition-property: width;
            transition-timing-function: cubic-bezier(.06,1.31,.9,-0.69);
        }
        .box:hover{
            width: 300px;
            background-color: #ff0789;
        }
    </style>
</head>
<body>
<div class="box"></div>
<!--
    transition-duration: 2s;  过度时间
    transition-property: width;  指定过度属性
    transition-timing-function: cubic-bezier();  过渡速度 用一条曲线确定  可以回头
    贝塞尔曲线
    http://cubic-bezier.com

    transition-delay: 4s;  延迟过渡

    复合属性
    transition: transition-property transition-duration transition-delay transition-timing-function

    阴影
    box-shadow: 0 0 20px 0 black inset
    box-shadow: 水平位移 竖直位移 模糊半径 阴影大小 阴影颜色  inset(阴影向内扩散)
-->
</body>
</html>

 

16-过渡

标签:doctype   style   ati   bsp   html   padding   over   idt   rop   

原文地址:https://www.cnblogs.com/zhangyu666/p/11477357.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!