前言 最近快速上线一个抽奖活动，又不想用canvas做，思考了很久，还是决定使用css3的动画来做，只要小球动得快，就没人发现我这些个小球的运动路径都是一样的了。先上动图wxml文件：<view class="ball-box"><image class="ball ball_1 {{start?weiyi_1:}}" src="https://acceleratepic.miniso.com/miniso/ball1.png"></image><image class="ball ball_2 {{start?weiyi_2:}}" src="https://acceleratepic.miniso.com/miniso/ball1.p...
前言 大家好，今天我要教你如何创建一个有用的悬停式用户界面，使用jQuery，CSS3，HTML5和@ font – face。你可能会问我，为什么是一个基于悬停的用户界面？好吧，由于现在很流行的基础触摸的web站点可以运行在移动设备上，我认为我们可以让那些基于桌面浏览器的人们使用站点更加简单。 什么是悬停界面？ 悬停界面就是只需要做少量的工作就可以浏览更多的内容。比起传统的基于页面的点击，我们需要改变一些想法和设计结构，可以让用...
本文实例讲述了JS+CSS3实现的简易钟表效果。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>www.gxlcms.com js+css3简易钟表</title><style type="text/css">*{margin: 0;padding: 0;}#wrap{width: 300px;height: 300px;background-color: aliceblue;margin: 200px auto;position: relative;box-sizing: border-box;}#wrap > div{position: absolute;top: 50%;left: 50%;}#hour{widt...
本文实例讲述了微信小程序导航栏滑动定位功能。分享给大家供大家参考，具体如下： 实现的效果实现的原理 1. 通过对scroll的监听获取滚动条的scrollTop值; 2. 在导航的class判断scrollTop; 3. 切换position:fixed与position:relative。 WXML <view style="height:100%;position:fixed;width:100%;"><scroll-view scroll-y="false" bindscroll="scroll" style="height:100%;"><view class="page-bottom-content"><text>{{text}}</tex...
实现原理请看以下源代码 <div class="ph-nav" data-pdt-block="pheader-n"><div class="ph-nav_shadow" style="left: 0px; width: 62px;"></div><ul><li class="ph-nav_item ph-nav_item--current"><a href="/" rel="external nofollow" >首页</a></li><li class="ph-nav_item"><a href="/all" rel="external nofollow" >全部</a></li>...</ul> </div>绿色的框对应的代码是class为ph-nav_shadow的div。通过jquery来改变遮罩层（.ph...
写期末项目中，朋友提出的 idea ，当用户登录成功时欢迎用户的特效，即欢迎用户信息从底部上升到页面中，之后再退回底部。 他遇到的问题是：从底部能出来提示信息，但是出来之后就下不去了。 听过后，考虑之，想到用回调函数来解决这个Bug，然后模拟登录成功时进入主页（即刷新页面），弹出欢迎信息并消失，写了一个类似这样的动画效果。仅供参考： 效果图：代码如下： <!DOCTYPE html> <html><head><meta charset="utf-8" /><titl...
我们经常会在游戏里看到一些几张卡牌左右切换的效果，中间的一张最突出醒目，向左或向右滑动可切换到另一张，今天我们就用CSS3来实现下这种效果。 我们先来看个demo，具体的样式各位可以自己调整：（PC下可点击按钮切换，移动端可左右滑动切换）从效果上我们可以看到，这5个div可以左右的切换，每次切换时总会有一个在中间显眼的位置进行展示。在切换时，看起来是div进行了移动，进行了DOM的增删操作。但是如果审查下元素，就能看到...
先上效果图<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#content{width: 500px;height: 300px;margin: 40px auto;position: relative;transform-style: preserve-3d;}#content>div{width: 100%;height: 100%;position: absolute;transform-origin: center bottom;}#content img{width: 100%;height: 100%;}#next{position: absolute;top:190px;left: calc(...
用CSS和jQuery来实现它，尽量看起来和原效果一样。本教程里，我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果，如果你正在阅读，我假设你对上述三种技术都有基本的了解。 废话不多说，开始第一部分。 HTML页面 我们的页面结构像下面这样： <div class="poster"><div class="shine"></div><div class="layer-1"></div><div class="layer-2"></div><div class="layer-3"></div><div class="layer-4"></div><div class="laye...
首先说一下fullpage，它是一个jquery的插件，用来实现鼠标向上向下滑动，就会自动切换到上一屏或者下一屏，对于要做一些高大上的效果确实是一个很好的插件。首先先展示一下基本的效果图。 总共有四屏的内容 当鼠标每次上下滑动时就会一整屏的切换。 第一屏是用一个图片，其他的三屏都是由左侧的三个图片和右侧的两个图片组成的。 这三屏左侧的图片展开方式不同，所以就更有炫酷的效果。 第二屏的三个图片是当页面显示时从下到上依...
效果图：图（1） 初始图图（2） 点击后 代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery+CSS3文章点赞功能代码</title> <style type="text/css"> body{margin:0;padding:0; } .text-content{m...
本文实例为大家分享了css3实现图片拖拽效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{text-align: center;}.container{display: flex;justify-content: center;}.colorBox{width: 100px;height: 100px;border:1px solid gray;margin: 0 20px;}.showBox{width: 100px;height: 100px;border:5px dashed gray;margin: 0 auto;}.colorBox:...
我的前面一张文章实现了用css3制作旋转的效果,现在呢,我换另外一种方法来实现.就是使用js结合css3的方法来实现的.下面我就先上图给大家看看效果吧下面呢我先放上我的css代码,代码很简单: .one{ width:200px; height: 200px; border:1px solid #adadad; transition:all 0.1s; border-radius:50%; background:url(images/1.jpg) no-repeat center center; background-size:cover; margin:50px auto; }上面的代码大家都看得懂,我就不介...
进度条在很多web中都能用的到，本文就是介绍了进度条效果，具体代码如下：一：css2 属性clip实现网页进度条； 在实现之前，我们先来介绍一下clip属性，因为这个属性在css2.1中很少使用到，所以我们有必要来了解一下； 浏览器支持程度：所有主流浏览器都支持 clip 属性。 Clip属性在w3c官网是这样描述的：通过对元素进行裁剪来控制元素的可视区域，默认情况下 元素是不进行任何裁剪的。 Clip裁剪的语法如下： .xx {clip:rect(<top>...
目的： 实现一个响应式导航，当屏幕宽度大于700px时，效果如下：当屏幕宽度小于700px时，导航变成一个小按钮，点击之后有一个菜单慢慢拉下来： 思路： 1.为了之后在菜单上绑定事件，并且不向DOM中添加多余的节点，在大屏幕中出现的导航和小屏幕中的下拉导航必须是一个。 所以我选择了将导航绝对定位。 2.默认导航列表是出现的，当屏幕宽度小于700px时它隐藏，并且设置position，当屏幕宽度大于700px时，它出现。或者，默认导航...