组件源码
Rocke369
这个作者很懒,什么都没留下…
展开
-
按钮
鼠标移入逐渐改变按钮背景颜色和边框颜色1) Add HTML<div class="button-wrap"> <div class="button">按钮</div></div>2) Add CSS /* 效果背景 */ body{ background-image:...原创 2018-07-23 15:31:21 · 97 阅读 · 0 评论 -
置顶按钮
Add HTML<main class="placeholder"></main><div id="topping"> 顶</div>Add CSS body { margin: 0; } .placeholder { wid...原创 2018-08-28 22:50:57 · 954 阅读 · 0 评论 -
动态页面
Add HTML<div class="box1"> <div class="text1">会动的</div></div><div class="box2"> <div class="text2">静止的</div&原创 2018-08-28 22:44:29 · 1236 阅读 · 0 评论 -
原生轮播图
原生js轮播图Add html<div id="slider-bar"> <div id="imgs-box"> <ul id="imgs-ul"> <li style="background-image:url(https://i.imgur.com/ndsCDtv.jpg) &原创 2018-08-28 22:30:32 · 161 阅读 · 0 评论 -
Model 蒙版
蒙版Add HTML<div class="container"> <button onclick="showModel()">弹出蒙板</button> <div id="myModel" onclick="closeModel()"> <div class=转载 2018-08-11 15:10:57 · 114 阅读 · 0 评论 -
轮播图
1) Add HTML<div id="slider-bar"> <div id="imgs-box"> <ul> <li><img src="https://i.imgur.com/4Fk8z2L.jpg" alt=""><原创 2018-07-21 15:35:08 · 137 阅读 · 0 评论 -
菜单按钮
菜单按钮点击菜单图标改变它的形状为"X"1) Add HTML<div class="container"> <div class="bar1"></div> <div class="bar2"></div> <div class=&q原创 2018-07-21 13:37:36 · 558 阅读 · 0 评论 -
鼠标滚动条触发动画
鼠标滚动到指定动画元素的相对位置时触发CSS动画Add HTML <div class="div1-wrap"> <div class="div1">触发动画</div> </div> <div class="div2-wrap"> <div class="di原创 2018-08-05 21:32:59 · 1549 阅读 · 0 评论 -
按钮
鼠标移入边框作动画Add HTML<a href="#" class="box">下载APP</a>Add CSS body{ background-color: silver; } a{ text-decoration: none; ...原创 2018-08-04 16:52:01 · 113 阅读 · 0 评论 -
搜索框
鼠标移入放大镜图标,逐渐显示搜索框1) Add HTML<!--使用Bootstrap字体图标--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFe...原创 2018-07-22 23:55:44 · 232 阅读 · 0 评论 -
搜索框
鼠标点击搜索输入框,搜索框左侧拉伸73个像素1) Add HTML<!--使用Bootstrap字体图标--><link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIF...原创 2018-07-22 22:49:14 · 208 阅读 · 0 评论 -
响应图片
响应图片,鼠标移入,图片逐渐放大10%1) Add HTML<div class="img-responsive"> <div class="img-frame"> <img style="background-image: url(https://i.imgur.com/vHlJFwT.jpg)"/> <原创 2018-07-23 19:31:05 · 237 阅读 · 0 评论 -
固定顶部和固定底部
Add HTML<nav id="nav-box"></nav><section class="placeholder"></section><section class="placeholder2"></section><footer id="f原创 2018-08-28 23:00:48 · 589 阅读 · 0 评论