Css3如何实现鼠标移上变长特效？（图文+视频）-css知识-PHP中文网

Css3如何实现鼠标移上变长特效？（图文+视频）

藏色散人

发布： 2018-10-19 16:00:13

原创

6937人浏览过

本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法。

在前端页面设计中，css的功能是异常强大的，只要运用好它，你能实现很多网站各种精彩的动态效果。那么在之前的文章中也给大家分享介绍了一些用css实现动画效果的方法，比如【Css3动画如何实现旋转移动特效？】【css3怎么实现鼠标悬停图片时缓慢变大效果?】等等知识点介绍，需要的朋友可以选择参考。

下面我们再结合简单的代码示例，为大家介绍css3实现鼠标移入div时，div变长的效果方法。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
    <style>
.hover{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: red;
    margin-top: 100px;
    margin-left: 100px;
    transition: width 2s;
}
        .hover:hover{
            background: blue;
            width: 500px;
        }
 </style>
</head>
<body>

<div class="hover">
    hover
</div>
</body>
</html>

登录后复制

其实这种效果是非常基础简单的。主要掌握 :hover 选择器和transition的使用。

:hover 选择器是用于选择鼠标指针浮动在上面的元素。

立即学习“前端免费学习笔记（深入）”；

过渡transition是一个复合属性，包括transition-property、transition-duration、transition-timing-function、transition-delay这四个子属性。通过这四个子属性的配合来完成一个完整的过渡效果