会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132440个问题
JAVA 全系列/第十三阶段:分布式文件存储与数据缓存/MongoDB 10006楼
JAVA 全系列/(旧的隐藏)第十五阶段:百战商城项目(Spring Cloud最新架构)/百战商城项目 10009楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 10010楼
Python 全系列/第十九阶段:数据分析-数据管理/Pandas基本使用 10011楼
Python 全系列/第二十七阶段:Hadoop 分布式文件系统:HDFS(扩展)/Hadoop 高可用集群及java API 10012楼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            justify-content: left;
            align-items: center;
            width: 100%;
            height: 100vh;
            background-image: linear-gradient(135deg, #99ccff, #9999ff, #cc66ff);
            position: relative;   /*子元素都将相对于body定位*/
        }

        .box {
            width: 50px;
            height: 300px;
            background-image: linear-gradient(135deg, #66ffff, #66ccff, #6699ff);
            border-radius: 0 30px 30px 0;
            opacity: 0.4;
            transition: all 0.6s ease; /*侧边栏由透明变成有色并且伸展的效果动画时间*/
            position: absolute; 
            left: 200px   /*侧边栏将相对于body进行一个相对定位,据左边200px*/
        }

        ul {
            display: flex;
            height: 300px; /*给ul设定一个高度与容器高度一样,才可设置上下居中*/
            flex-direction: column;
            align-items: left;
            justify-content: center;
            padding-left: 25px;
            list-style: none;
            position: absolute; /*子元素都将相对于body定位*/
            left:200px ;  /*无序列表ul每个元素都将相对于body进行一个相对定位,据左边200px*/
            opacity: 0;
            transition: all 0.6s ease 0.6s;
        }

        ul li {
            margin: 12px 1px;
            
            /* display: none; */
            
        }

        ul li a{
            text-decoration: none ;
            color: white;
            text-shadow: -5px 5px 15px #bd4be3;
            font-size: 20px;
            font-weight: 700;
            
        }

        .t-box{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-image: linear-gradient(135deg, #66ffff, #66ccff, #6699ff);
            margin-top: 20px;
            position: absolute;
            top: 160px;
            left: 200px;
        }

        .t-box:hover+.box{
            opacity: 1;
            width: 100px;
            height: 300px;
        }

        /* 在鼠标接触到的时候t-box的时候使其相邻兄弟元素box拉伸 */

       .t-box:hover~ul{
            
            opacity: 1;
       }

       
        
    </style>
</head>

<body>
    <div class="t-box"></div>
    <div class="box"></div>
    <ul>
        <li><a href="#">Play</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Map</a></li>
        <li><a href="#">Chart</a></li>
        <li><a href="#">Art</a></li>

    </ul>

   
</body>

</html>

如上做了一个丝滑的伸缩侧边栏,字体动画在栏伸展开之后才显示。问题是放开鼠标之后栏缩回去的时候,字体没有立刻消失,而是过了一会儿才消失。怎样设置才能让字体消失的时候也和菜单栏一起同一时间小时呢?

WEB前端全系列/第一阶段:HTML5+CSS3模块/CSS3新特性 10013楼
Python 全系列/下架-第十二阶段:Python_大型电商项目(5天后下架)/Django项目阶段-电商项目(旧) 10014楼

问题截图.png

老师,为什么参数为中文时,查询不到数据;而英文可以

JAVA 全系列/第六阶段:项目管理与SSM框架/Mybatis 10015楼
Python 全系列/第二十一阶段:Python数据分析项目/旅游景点票价预测 10016楼
Python 全系列/第十阶段:Flask百战电商后台项目/Flask百战电商后台项目 10019楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 10020楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637