js加html实现渐变色调

被迫沉入的李恩恩

已于 2023-07-26 11:02:03 修改

阅读量271

点赞数 1

文章标签： html javascript css

于 2023-07-26 10:37:44 首次发布

本文链接：https://blog.youkuaiyun.com/2301_77033939/article/details/131933816

版权

这篇博客通过css设置初始样式，html构建结构，然后使用javascript实现鼠标拖动改变颜色渐变位置的功能。当鼠标按下并在盒子上移动时，调整线条和背景的位置，从而动态改变颜色渐变的效果，并在界面上显示当前百分比值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

css

*{
        padding: 0;
        margin: 0;
        list-style-type: none;
}
#box{
        width: 190px;
        height: 40px;
        border: 1px solid red;
        margin: 100px auto;
        position: relative;
        overflow: hidden;
}
#bg{
        width: 200%;
        height: inherit;
        background-image: linear-gradient(to right,#1C8463 15%,#9834B9);
      transform: translate3d(0,0,0);
}
#line{
        position: absolute;
        width: 3px;
        height: inherit;
        background-color: #999;
        top: 0;
        left: 0;
        cursor: ew-resize;
        transform: translate3d(10px,0,0);
}
#box:hover>#ll{
        opacity: 1;
}
#ll{
        position: absolute;
        width: inherit;