transition实现的鼠标悬停淡入淡出的效果

最新推荐文章于 2024-01-11 20:05:40 发布

澄大橙

最新推荐文章于 2024-01-11 20:05:40 发布

阅读量1.1k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/weixin_44509862/article/details/105410700

版权

本文介绍了如何利用CSS的transition属性创建鼠标悬停时的淡入淡出效果。通过设置transition-property、transition-duration、transition-timing-function和transition-delay这四个属性，可以实现元素在1秒内的平滑透明度和旋转变化，从而达到渐隐渐现的动画视觉体验。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>transition实现的鼠标悬停淡入淡出的效果</title>
        <style type="text/css">
            div.wrap>div.box i{
                width: 50px;
                height: 50px;
                background: #333;
                /* display: inline-block; */
                float: left;
                margin: 5px;
                cursor: pointer;
                opacity: 0;
                transition: opacity 2s;
            }
            .wrap{
                border: 1px solid #ccc;
                /* overflow: hidden; */
                float: left;
            }
            div.wrap>div.box i:hover{
                opacity: 1;
                transition-duration: 0s;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">

最低0.47元/天解锁文章

澄大橙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
transition实现的鼠标悬停淡入淡出的效果

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>transition实现的鼠标悬停淡入淡出的效果</title> <style type="text/css"> d...
复制链接

扫一扫