关键字:no-repeat
  • 原生写一个渐隐渐显版的轮播图
    轮播图是项目中非常常见的一个效果,平时我们可能都会用别人写好的插件,但是必要的时候也需要自己手写,尤其是需要掌握下其中的实现原理。 一、需求 1.实现渐隐渐显自动轮播效果 2.鼠标移入:显示左右切换箭头,停止自动轮播 3.鼠标离开:隐藏左右 ...
  • vue+swiper实现背景跟随轮播图切换
    一. 图片变量设置 1.Less: ...
  • web前端入门到实战:宣传页项目实战
    编辑器:sublime text3 标注工具:PxCook 切图工具:PS 开发前准备:设计图标注 PxCook 空格键可以上下拖动 大致标注图纸:(可惜不能文字标注和拉参考线) 开发前准备:PS切图 在指定图层上新建一个图层,使用ctr ...
  • JavaScript 实现九宫格抽奖
    九格宫抽奖相信大家都玩过,今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦! 1.预览效果 image 效果图为屏幕录制软件生成,以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果 2.完整代码 代码可直接复制运行查 ...
  • web前端入门到实战:CSS实现自适应分隔线的 8 种方法
    1.伪元素+transform:translateX(-100%); 主要原理是设置文本居中text-align: center;,然后给定两个伪元素,分别绝对定位,那么此时伪元素也是跟随着水平居中的,设置足够的宽度,然后把左边的往左位移1 ...
  • 前端特效的似是而非
    让用户看起来是这样,而非实现起来一定是这样。 写特效时经常被逻辑思维所牵绊,A元素B元素分的太清了,反而麻烦。 最近在网上找了一些自己喜欢例子。 1. effect.gif html结构 ...
  • css3 让width随方向变化
    GIF.gif 利用这种特性可以做出下面这个动画 GIF.gif 源码 <meta name=" ...
  • Flex布局(1)
    .user { width: 500px; height: 500px; ...
  • web前端入门到实战:关于CSS过渡(transition),你需要知道的事
    CSS3的过渡属性,给web应用带来了简单优雅的动画,但是比起初次相见,他(transition)有许多细则。 在这片文章中,我将会专研CSS3的过渡(transition)中更加复杂的部分,从链式和事件到硬件加速和动画函数。 让浏览器控制 ...
  • web前端入门到实战:CSS中的背景属性background简述
    我之前提到的那样,文档树中的每个元素只是一个矩形盒子。这些盒子都有一个背景层,背景层可以是完全透明或者其它颜色,也可以是一张图片。此背景层由8个CSS属性(加上1个简写的属性)控制。 background-color background- ...

暂无数据