css
菜鸟级码农小林
这个作者很懒,什么都没留下…
展开
-
flex布局 多种方法让两个盒子分布在左右两边
一个父盒子里面包含了两个子盒子的,可以用justify-content:space-between属性。原创 2022-11-30 11:50:22 · 13832 阅读 · 3 评论 -
网页轮播图
lunbo.css<style> body { margin: 0 auto; width: 800px; } .box { width: 600px; height: 420px; position: relative; overflow: hidden; } .leftBox { display: none; position: absolute;.原创 2022-05-17 14:14:59 · 616 阅读 · 0 评论 -
变速的动画效果
先封装一个动画函数animate.jsfunction animate(obj,target,callBack){ clearInterval(obj.timer) obj.timer = setInterval(function(){ var step = (target - obj.offsetLeft) / 10 // 取整数 step = step > 0 ? Math.ceil(step) : Math.floor(step) if原创 2022-05-09 10:41:48 · 151 阅读 · 0 评论 -
简单动画原理
动画的原理: 就是利用定时器不断重复这个操作,停止动画则利用清除定时器来完成。<style> div{ position: absolute; left: 0; width: 200px; height: 200px; background-color: pink; }</style><html> <div></div></html><script> var ...原创 2022-05-07 15:45:12 · 144 阅读 · 0 评论 -
到指定位置固定侧边栏
<style> body{ margin:0 auto; width: 800px; } .goBack{ display: none; } .aside{ background-color: pink; width: 50px; height: 200px; position: absolute; top: 400px; left: 1400px; } .header{ background-color: red; width: 80.原创 2022-05-07 14:03:09 · 364 阅读 · 0 评论 -
图片放大镜效果
<style> .content{ position: relative; border: 1px solid #ccc; height: 400px; width: 400px; text-align: center; } .eyeImg{ width: 300px; height: 300px; margin: 50px; } .mask{ position: absolute; top: 0; left: 0; width: 20.原创 2022-05-06 15:32:40 · 91 阅读 · 0 评论 -
倒计时页面效果
<style> span { background-color: #333; color: #fff; }</style><html> <span class="hour">1</span> : <span class="minute">2</span> : <span class="second">3</span><.原创 2022-05-02 18:51:16 · 183 阅读 · 0 评论 -
模拟京东快递单号查询框
<html> <div class="con"></div> <input type="text" placeholder="请输入内容"></html><style> .con { display: none; background-color: #fff; height: 50px; line-height: 50px; f.原创 2022-05-02 17:32:57 · 264 阅读 · 0 评论