找回密码
当前位置：前端开发者 > 教程 > 正文

前端clip+transition实现过渡效果

2018-10-03 分类：教程 阅读(737) 评论(0)

webh5前端开发框架  前端开发框架选择 前端开发三大框架对比

前面的话 >>

clip似乎是一个很少使用的属性，但最近在学习的时候我发现，它竟是一个很有趣的属性。这让才接触css不就得我对它越发的感兴趣了。
在学习的过程中，我也遇到了几点麻烦。

先是发现当鼠标hover的部分被clip处理后，竟然不能继续clip下去——html模型的构建，像这样：

起初——直接对两个盒子进行clip导致被clip后鼠标无法对消失的部分hover[/color]
[code]<div id=”div1″>
<div id=”div2″></div>
</div>[/code]

改进——用一个不会被变化的div包裹住两个span标签，只对span进行clip

[code]<a>
<div id=”div1″>
<span id=”one”></span>
<span id=”two”></span>
</div>
</a>[/code]

后来以为只能对鼠标hover的内容进行属性处理——没有掌握selector的使用，像这样：[/color]
起初
[code]#div1:hover{property:value;}[/code]

改进——可以在父元素hover后面 选择子元素设置样式

[code]#div1:hover #two{property:value;}[/code]

最后发现，可以在一个选择器内对同一元素的多个属性进行处理，像这样：[/color]
改进——之前我一次只用一个属性过度的，这个不管，直接跳到CSS3学习这个了（我怎么这么不安分！快滚回去学css先-_-#）
[code]

div2{property:value;transition:All 1s ease-in-out;}

div1:hover #two{property:value;property:value;property:value;}

[/code]
[code]<html>
<body>
<a><div id=”div1″><span id=”one”></span><div><span id=”two”></span></div></div></a>
</body>
</html>[/code]
####在这里可以看到左边和右边这两个过渡是不一样的（显然左边那个就没这么酷了）
代码片段 1

<head>
    <style type=”text/css”>
        #div2 {
            width: 150px;
            height: 150px;
            border-radius: 75px;
            background-color: orange;
            position: absolute;
            top: 200px;
            left: 440px;
            clip: rect(0px, 150px, 150px, 0px);
            transition: All 1s;
            -o-transition: All 1s;
            -webkit-transition: All 1s;
            -moz-transition: All 1s;
        }
        #div3 {
            width: 136px;
            height: 136px;
            border-radius: 68px;
            position: absolute;
            top: 7px;
            left: 7px;
            background-color: white;
        }
        #div2:hover {
            clip: rect(75px, 150px, 75px, 0px)
        }
        /***************************************/
        #div1 {
            width: 150px;
            height: 150px;
            border-radius: 75px;
            position: absolute;
            top: 200px;
            left: 730px;
        }
        #one {
            display: block;
            width: 150px;
            height: 150px;
            border-radius: 75px;
            background-color: orange;
            position: absolute;
            clip: rect(0px, 150px, 150px, 0px)
        }
        #two {
            display: block;
            width: 136px;
            height: 136px;
            border-radius: 68px;
            background-color: white;
            position: absolute;
            top: 7px;
            left: 7px;
        }
        #div1:hover #one {
            clip: rect(75px, 150px, 75px, 0px)
        }
        #one {
            transition: All 1s;
            -o-transition: All 1s;
            -webkit-transition: All 1s;
            -moz-transition: All 1s;
        }
    </style>
</head>
<body>
    <a href=”#”>
        <div id=”div1″>
            <span id=”one”></span>
            <span id=”two”></span>
        </div>
    </a>
    <a href=”#”>
        <div id=”div2″>
            <div id=”div3″></div>
        </div>
    </a>
</body>
</html>

java开发前端的框架 混合应用开发框架与前端技术 混合应用开发框架与前端技术

赞(0)
前端开发者 » 前端clip+transition实现过渡效果
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论