前端HTML5CSS动画变形动画之过渡

最新推荐文章于 2022-06-23 20:24:14 发布

天主极乐大帝

最新推荐文章于 2022-06-23 20:24:14 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/weixin_42218868/article/details/88804146

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
            /*脱标  left top*/
           /* position: absolute;
            left:0;
            top:0;*/
            /* transition 	简写属性，用于在一个属性中设置四个过渡属性。 	3
transition-property 	规定应用过渡的 CSS 属性的名称。 	3
transition-duration 	定义过渡效果花费的时间。默认是 0。 	3
transition-timing-function 	规定过渡效果的时间曲线。默认是 "ease"。 linear线性 	3
transition-delay 	规定过渡效果何时开始。默认是 0。*/
            transition:all 5s linear 2s ;
            /*transition:all 5s ease 2s;!*ease缓和，linear线型*!*/
            /*过渡在鼠标悬浮时触发，如果没有某属性transition鼠标悬浮时就会触发该属性
            如果有该属性那么鼠标悬浮时该属性会过渡  过渡只有鼠标悬浮时才有用*/
            /*transition:all 过渡时间  linear 等待时间；*/
            /*linear线型linear  linear线型linear  linear线型linear*/
            /*transtion过渡transtion  transtion过渡transtion  transtion过渡 transtion*/
        }
        .fa {
            width: 1000px;
            height: 400px;
            border: 1px solid #ccc;
        }
        .fa:hover  .box {
           border-radius: 50%;
            border-radius:50%;/*边界半径用于时方块产生圆角*/
            opacity: 1;/*鼠标悬浮时逐渐过渡到不透明*/
            /*opacity背景和内容都透明*/
            /*width:1000px;*/
        }/*鼠标悬浮触发一旦鼠标离开触发就会停止或返回*/
    </style>
</head>
<body>
<!--c3
动画
过渡：从一个状态到另一个状态(时间 )
transtion:
动画：多个状态的变换
先定义后使用
-->
<div class="fa">
    <div class="box"></div>
</div>
</body>
</html>

天主极乐大帝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端HTML5CSS动画变形动画之过渡

$美少女战士$ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>$美少女战士$</title> <style> .box { ...
复制链接

扫一扫