web前端零基础练习特效，鼠标移入移出效果

来源：互联网发布：湖南中原数据研究中心编辑：程序博客网时间：2024/05/16 17:40

今天写了一个适用于零基础小白的一个效果，是前端零基础的伙伴可以练习下。

知识点：html标签，css样式（企业样式的活用），html加css布局思维，代码优化。特效原理（class类名活用）。

<!doctype html><!--网页文档的声明--><html><head><!--网页的头部--><meta charset="UTF-8"><!--网页三要素--><meta name="Keywords" content="关键词"><meta name="Description" content="关键词描述"><title>鼠标滑过图文特效-future老师</title><!--标题--><style>/*CSS层叠样式表 化妆师*/        *{margin:0;/*外边距*/padding:0;/*内边距*/}/* *通用选择器 所有元素 */        #container{/* #+ID选择器名字 */            width:1315px;/*px 像素单位 百分比%*/            height:350px;            /*border:1px solid red;边框 : 大小 实线*/            margin:150pxauto;/*auto默认居中*/        }        #container .box1{ /* .+类选择器名字*/            width:250px;            height:350px;            float: left;             margin-right: 20px;                    }        #container .box2{            width:250px;            height:350px;            float: left;            margin-right: 20px;/*右边 外边距*/        }        #container .box3{            width:490px;            height:350px;            float:left;            margin-right: 20px;        }        #container .box4{            width:250px;            height:350px;            float:left;        }        #container .text{ position:relative;/*相对定位*/overflow:hidden;}        #container .text p{            height:30px;            width:100%;            background:rgba(0,0,0,0.5);/*0*/            line-height:30px;/*行高*/            text-indent:40px;/*字符缩进*/            color:#fff;/*字体颜色*/            position:absolute;/*绝对定位*/            left:0;/*距离左边多少*/            bottom:-30px;/*底部对齐多少*/        }        #container .con .pictxtop{            width:250px;            height:165px;                }        #container .con .pictxtbotom{            width:250px;            height:165px;            margin-top:20px;        }</style></head><body><!--网页的主体-->    <!--        添加 一个DIV盒子 层 id="自定义名称" 唯一性 宽高 权重 id>class                             class="自定义名称" 身份证名字 重名        div 块级 独占一行    -->    <divid="container">        <divclass="box1 text">            <imgsrc="images/1.jpg"width="250"height="350"alt="1.jpg"/><!--四要素 src="图片储存位置" width="宽度" height="高度" alt="描述"-->            <p>心形</p>        </div>        <divclass="box2 con">            <divclass="pictxtop text">                <imgsrc="images/2.jpg"width="250"height="165"alt="" />                <p>草原</p>            </div>            <divclass="pictxtbotom text">                <imgsrc="images/3.jpg"width="250"height="165"alt="" />                <p>荷花</p>            </div>        </div>        <divclass="box3 text">            <imgsrc="images/4.jpg"width="490"height="350"alt="" />            <p>猫头鹰</p>        </div>        <divclass="box4 con">            <divclass="pictxtop text">                <imgsrc="images/5.png"width="250"height="165"alt="" />                <p>草原</p>            </div>            <divclass="pictxtbotom text">                <imgsrc="images/6.jpg"width="250"height="165"alt="" />                <p>荷花</p>            </div>        </div>    </div>    <!--引入JS文件 --><scripttype="text/javascript"src="js/jquery-1.11.1.min.js"></script><!--使用调用方法--><script>        //找元素 $("")        $("#container .text").hover(function(){            $(this).find("p").animate({bottom:"0px"})        },function(){            $(this).find("p").animate({bottom:"-30px"})        });</script></body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0