TAG标签 - 原生 / 共有 79 篇与“原生”相关的内容!

懒人原生css3网页加载后图片翻转效果

效果描述:一个很简单,但是效果很好的图片翻转效果主要使用css3属性:变形(transform)以及动画(animation)当网页加载完毕后,指定的图片会进行一个角度的切换,继而实现一个动画的连串动作注意:因为是文档加载完毕后动画就立即执行,这个时候图片或许还没有加载出来,所以可能会出现无法看到动画效果的情况所以建议将图片先下载到本地浏览,这样效果比较明显使用方法:1、将css样式引入到你的网页

懒人原生css3 加载loading 动画效果

效果描述:之前看到网上很多css3 实现的loading动画加载效果今天懒人站长特意写了一个效果供给大家使用原理其实是很简单的,大家简单看看即可看懂特点:无图片、无js,加载速度快缺点:不支持低版本浏览器使用方法:1、将head中的css样式引入到你的页面中2、将body中的代码部分拷贝过去即可

懒人原生css3样式控制table表格隔行高亮显示

效果描述:你是否还在为你的网页中复杂而又丑陋的表格而烦恼?往往很多默认的表格都不好看,而样式又比较难以控制今天懒人站长特意整理了一份css3样式控制的表格界面看起来简洁方便控制,也容易使用注意:低版本浏览器下效果较差,因为其中一部分采用了css3样式使用方法:1、head中的css样式复制到你的样式表中即可实现漂亮的table效果

懒人原生移动端(高版本浏览器)上下左右居中模块

效果描述:之前给大家介绍过一个上下左右垂直居中的效果相关链接如下:纯css实现div容器内图片上下左右居中效果今天再给大家介绍一个部分基于css3的上下左右垂直居中效果大家都知道给一个div设置相对定位,左侧、顶部的高度分别设置50%剩下的靠margin解决,而margin只接受具体的数值,那么问题来了当我们的div高度宽度在未知的情况下是无法使用margin的那么这个时候可以用css3代码弥补这

懒人原生css3鼠标悬停图片放大动画效果

效果描述:默认九张图片组成列表当鼠标悬停上后图片逐渐放大,鼠标移走后,图片逐渐恢复当登录天猫首页的时候,banner大图就会有这种逐渐变化的效果今天特意写了一个供给懒人们使用注意:css3属性,不支持低版本浏览器使用方法:1、将head中的css样式引入到你的网页中2、将body里的代码复制到你需要的地方即可(注意保持图片路径正确)

懒人原生鼠标悬停图片放大动画特效

效果描述:默认两张图片,定位方式不一样当鼠标悬停后,背景图片位置移动同时加上css3 的 transition 属性,给移动加上一个小小的动画,这个时候就会出现类似jQuery的图片翻滚效果了使用方法:1、将head中的css样式引入到你的网页中2、将body里的代码复制到你需要的地方即可(注意保持图片路径正确)

懒人原生css3实现图片由模糊到清晰逐渐加载过程

效果描述:在手机移动客户端,我们经常看到图片由模糊到清晰的加载过程如果抛给你这样一个问题,你会怎么去实现呢而且是在不用js的基础上实现今天懒人站长写了这样一个效果,供给大家参考使用其原理就是采用两张图片,一个模糊,一个清晰,用两个div叠加起来后清晰的图片从完全透明变成全部显示出来,另外一个方向相反,默认加载时间为5秒两者叠加起来就组成了这样一个动画过程,原理其实很简单使用方法:1、将lanren

懒人原生css3可控旋转音乐播放按钮

效果描述:一个css3旋转音乐符号,默认图标呈顺时针方向转动,同时音乐开始播放当鼠标点击的时候,图标更换,同时转动停止,音乐暂停播放使用方法:1、将css样式引入到你的页面中2、将body中的代码部分放到你需要的地方即可(可以修改样式为你想要的)(主意保持两个图片路径正确)

一个复杂的懒人原生css3动画效果

效果描述:之前给大家介绍过好多种简单的css3原生动画前几天正好看到手机APP上有这样一个闹钟提醒的动画效果很不错就试着用css3模拟出来看似比较难,只要耐心分析,将七八个动画叠加起来后就可以看到复杂的效果使用方法:1、将head中的css样式拷贝到你的样式表中2、将body中的代码部分复制过去即可(注意保持图片路径正确)

canvas+原生js实现立体式文字变换特效

效果描述:好久之前就有了的一个css3动画今天无意间看到,感觉写的还是挺不错的供给懒人们欣赏欣赏使用方法就不多谈啦

懒人原生iscroll下拉或上滑加载更多内容分页效果

效果描述:我们在浏览网页或者app新闻列表的时候,经常碰到那种下拉或者向上滑动显示更多新闻内容的效果是不是觉得很高大上,很难做的样子?其实很简单,一个简单的iscroll插件即可搞定详细使用方法见页面,一个下拉内容,一个上滑显示更多内容由于涉及到跨域请求的问题和保护第三方json数据的原因,请求url地址已经被去掉所以预览可能会报错使用方法:1、将head中的样式引入到你的样式表中2、将body中

懒人原生H5页面模拟APP侧滑删除效果

效果描述:我们在很多APP里,特别是苹果手机下的APP都能看到,当要编辑或者删除列表某条信息的时候常常是按住当前列表,然后向右滑动,即可显示出来“删除”按钮向左滑动则隐藏今天懒人站长特意写了这样一个效果供给大家使用(注意请在chrome浏览器下手机模拟窗口查看,或者用手机浏览器浏览,默认PC浏览器效果不佳)使用方法:1、将head中的样式引入到你的网页中2、将body里的代

懒人原生适用于移动端alert弹窗选择确认效果

效果描述:移动客户端弹窗,然后让用户选择的效果其中一个确认,一个取消,各自之后都有自己的方法回调使用方法:1、将head中的样式引入到你的网页中2、将body里的代码部分拷贝到你需要的地方即可

懒人原生修改懒加载图片(等比例缩放,适用于图

效果描述:现在图片懒加载已经不是什么问题的,关键是碰到各种不规则的图片后如何处理这样很容易出现变形最好的解决办法是用背景图片,但这样如何继续让图片带有懒加载功能呢?今天懒人站长特意整理了一下,默认让图片指向1px大小的图片,真正的图片不在当前窗口内的不加载当图片出现在当前窗口内,真正的图片加载成背景图片,同时按照比例缩放,直至100%实用本图片,上下左右保持居中显示缺点:使用此插件,必须事先指定图

懒人原生手机网页右上角点击下拉导航按钮

效果描述:我们常见移动端网页右上角有一个点击下拉的导航效果同时当前按钮做一个旋转的效果,底部导航下拉显示再次点击后导航上拉隐藏,按钮反方向旋转回去使用方法:1、将head中的样式引入到你的网页中2、将body里的代码部分拷贝到你需要的地方即可(注意保持图片路径正确)

懒人原生纯css3单色渐变至透明效果

效果描述:在我们的网页里,经常碰到这样的情况:宽度不固定,但是我们又需要渐变的颜色来显示,通常是用一个背景图片重复,缺点就是无法控制宽度问题,作为一个不喜欢用图片的人来说,简直无法忍受啊。现在好了,完全可以使用css3的代码来实现渐变,左侧定义一个颜色,右侧也设置一个颜色,并分别设置不同的透明度即可使用方法:关键在css样式中:10-13行

懒人原生touch事件,计算滑动距离

效果描述:在做移动手机网页的时候,相信很多懒友都碰到过这样的问题:如何得到手机在屏幕上滑动的距离,其实很简单每次的滑动包含触摸、滑动、结束,这主要三个过程得到触摸以及结束两处的坐标,再计算即可使用方法:1、将head中的css样式引入到你的网页中(在head里)2、将body中的代码部分拷贝到你需要的地方即可

懒人原生移动网页侧滑栏滑动效果

效果描述:闲来无事,给大家写了一个首页网页常见的侧栏滑动效果点击左上角按钮,侧栏可以显示或者隐藏本效果主要采用CSS3中的transform预计translate属性实现,点击按钮分别给侧栏增加或者删除对应的class名称,然后移动body的位置,看起来是不是很简单?另外,在这里跟大伙儿声明下,以后懒人原创的移动效果,将逐步屏蔽掉jQuery插件,因为这家伙太影响移动网页性能了。本效果亦是采用原生

懒人原生HTML5波浪滚动动画

效果描述:现在移动HTML5动画效果越来越多,也越来越牛叉已经几乎可以代替flash曾经在网页的各种动画效果了今天用HTML5的canvas给大家制作了一个波浪加载百分比,并滚动的动画效果使用方法:1、将style.css中的样式复制到你的样式表中2、将body中的代码部分拷贝到你需要的地方即可

懒人原生纯CSS3实现chrome浏览器logo效果

效果描述:之前给大家推荐了一个用CSS3实现的太极旋转的团效果,今天再给大家推荐一个用CSS3实现的谷歌chrome标志的效果。同时,也可以实现自我旋转效果全程没有使用一点js或者图片,纯html+css代码实现的效果使用方法:1、将lanren.css中的样式复制到你的样式表中2、将body中的代码部分拷贝到你需要的地方即可

上一页 1234 下一页