展开

关键词

HTML5 SVG+CSS3霓虹灯文字画特效

37210

HTML5时钟

HTML5时钟 效果图 ? 这里无法实时显示当前时间,可以看我这篇博客。 原理 先打上html5中的canvas标签,它定义了一块画布,可以用javascript在上前面做效果。 调用浏览器内置对象window的setInterval(animate,delay)方法,可以实现每隔delay时间调用一次自定义的animate方法,从而达到的效果。 这样以后可以通过类似的方法在blog中用js做效果了。

4.9K50
  • 广告
    关闭

    90+款云产品免费体验

    提供包括云服务器,云数据库在内的90+款云计算产品。打造一站式的云产品试用服务,助力开发者和企业零门槛上云。

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    电商放大镜及效果

    本文长度为 2772 字,建议阅读 7 分钟 序   大家在网购的时候一定没少用过此功能吧~某宝某猫某东,在PC端所有商品的展示均是如此:鼠标放在缩略图上,旁便会有细节图展示出来,并随鼠标移展示相应缩略图细节 下面我用js(jq)来展示一下,并且加入一丢丢的效果。 效果 ? 鼠标悬浮,出现 鼠标移除,消失 那么问题来了,细节图怎么随鼠标变化? 以何种形式展现? 实现 由浅入深,我先来实现 1. 效果 ? 思路 看到该效果,一般思路有二: 设置border 周4个div   但是以上两个思路均有问题。 如果设置border,如何使其画?如果周设置4个div,那么不仅是需要js操控,并且无形之中增加了许多复杂度,与编程思想背道而驰。 那么我们还有别的办法来处理使起来吗?

    36920

    前端-10款web画插件

    今天给大家带来了十款web前端画插件,大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛,特别是图片和首页文章的加载。 3.HTML5 Canvas模拟飞机航班线路画 我们在网页中可以通过HTML5的Canvas画板绘制很多图形,甚至做许多画特效,你可以在我们的HTML5 Canvas栏目中找到这些画。 5.jQuery左侧栏多级菜单 适合后台管理页面使用 这是一款基于jQuery的侧栏多级下拉菜单插件,这个菜单的特点是可以固定在左侧栏,当页面滚时整个菜单可以保持一直可见,方便操作。 7.HTML5/CSS3超链接图片弹出画 今天给大家分享一个基于HTML5和CSS3的超链接画,这个HTML5应用还是比较实用的,它可以让你在鼠标滑过超链接时弹出图片,就像弹出tooltip那样的画效果 9.HTML5 Canvas爱心表白画特效 在很久以前,我们给大家分享过一款浪漫程序员 HTML5爱心表白画,很多读者都表示非常震撼。

    1.5K50

    CSS3实现loading图

    HTML5学堂:学习CSS3,重要的并不是那几个命令,而是如何应用CSS3的知识实现网站中的效果,换句话说,“只有想不到,没有做不到”。在这个效果当中,主要用到了圆角画。 效果创造的原作者——黄仕辉 实现的基本思路:利用圆角对loading图的样式控制,让其从方形变化为圆形;之后控制不同的粗细,调整更佳的视觉效果;最后利用CSS3中的画,实现运;在进行布局的时候 ,要考虑移端水平垂直居中的要求以及不同分辨率状下的效果。 ,从而达到居中的状。 关于的设置已经提到了,四个方向采用不同的粗细。 顺便一提,由于使用的是CSS3进行控制,因此,即便是在PC端调整窗口大小,loading图的大小也会随之发生变化。 显示效果 ?

    65440

    scrollLeft等属性介绍

    scrollHeight、scrollWidth:获取对象可滚的总高度/宽度 offsetLeft、offsetTop:获取当前对象与父元素之间的距离(不包含父元素的) offsetWidth、 offsetHeight :获取元素自身的宽度/高度 clientLeft、 clientTop:效果和宽度相同,很少使用 clientWidth、 clientHeight :不含的元素自身的宽度 * 作者:独行冰海 - 刘国利 * 版权:HTML5学堂 http://www.h5course.com/ */ function scroll() { box.scrollTop += 1; // 到达一半位置返回初始状 它们的区别在于,offsetWidth和offsetHeight是包含元素以及内部内容的,而clientWidth和clientHeight是不含元素的,是从元素的padding区域开始计算的 特意这么说,其实是希望各位注意,从开始计算的,也会把滚条的宽度/高度计算到结果之内,谷歌浏览器中,滚条的宽/高度是17px,如果希望能够获取一个元素的padding和内容,需使用clientWidth

    40250

    HTML-CSS基础学习

    表单: :enabled 控制表单控件的可用状 :disabled 控制表单空间的禁用状 :checked 单选或复选被选中 CSS伪元素选择符 使用定义的伪元素设置一些特殊的字体格式 : 下) 取值: -none 无 -hidden 隐藏 -dotted 点线 -dashed 虚线 -solid 实现 -double 双线 -groove 3D凹槽 -ridge auto表自;shape表按照形状定义显示 布局属性 display属性 用来确定页面元素是否显示以及显示方式,不可继承 float属性 用来定义元素是否浮以及浮方式 clear属性 用来定义不允许有浮对象的 overflow-y属性 指明如果溢出元素内容区域的话是否对内容的上下缘进行裁剪 overflow -visible 不裁剪内容,可能会显示这内容外 -hidden 裁剪内容,不提供滚机制 -scoll 裁剪内容,提供滚机制 -auto 如果溢出,则赢提供滚机制 -no-display 如果内容不适合内容,则删除整个内容 -no-content 如果内容不适合内容,则隐藏整个内容

    16430

    重磅来袭!原来阴影可以这样玩?

    当然我们有时候会用盒阴影来代替使用,这是因为盒阴影不占物理空间,而会占据空间,导致了移端设置自适应宽度受到了精准度的影响,那么接下来我们来看看盒阴影是怎么使用的! 2. /html> 3.1 阴影的默认状 较之ps制作出来的图片相比,CSS3的box-shadow可以通过改变其参数得到不同的效果,如:改变阴影偏移量的设置,我们可以使阴影只在对象的上下左右的任一出现, 3.3 盒阴影与的比较 首先来看一个使用盒阴影制作的带有的效果,如下: .wrap div:nth-child(3) { box-shadow: 0 0 0 1px red; } 实际上利用box-shadow来制作,只能说看上去像,但实质其并非,它和border还是有本质上的区别的。 第一个块的阴影被浏览器忽略不计,并不算做内容的大小,但是第二个块的被计算了大小。所以借住这个特点,我们盒阴影所模拟的是可以被自由使用的,但必须要注意其层级关系。 4.

    93050

    传统企业站开发 - 模块开发(二)

    上周我们讲解了页面模块的制作,详情可见:传统企业站开发 - 模块开发,我们到底如何更好的实现模块的制作,小编这继续给大家举一个例子来进行讲解。 倘若这时候我们后台人员不知道我们页面可以展示几条消息(当前页面展示的是6条),而后台数据传了7条过来,我们就会很尴尬的发现,如果是用类名去处理这条的话,我们的第6条底部是消失了,但是第7条仍然会有一条存在 div>

    2019年小白学习web前端路线图及学习攻略

    第二阶段:HTML5和移Web开发 HTML5HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、、阴影、background系列属性改变、Transition、画、景深和深透、3D效果制作、Velocity.js架、元素进场、出场策略、炫酷 面向对象三大特征: 继承性、多性、封装性、接口。 设计模式: 面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。 第五阶段:封装一个属于自己的架封装基础: 事件流、冒泡、捕获、事件对象、事件架、选择架。 架封装中级: 运原理、单物体运架、多物体运架、运架面向对象封装。 HTML5+: HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI架、H5+开发和部署。

    45600

    史上最全的web前端学习教程汇总!

    第二阶段:HTML5和移Web开发 HTML5HTML5新语义标签、html5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3:CSS3新选择器、伪元素、脸色表示法、、阴影、background系列属性改变、Transition、画、景深和深透、3D效果制作、Velocity.js架、元素进场、出场策略、炫酷css3 面向对象三大特征:继承性、多性、封装性、接口。 设计模式:面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。 第五阶段:封装一个属于自己的架封装基础:事件流、冒泡、捕获、事件对象、事件架、选择架。 架封装中级:运原理、单物体运架、多物体运架、运架面向对象封装。 HTML5+:Html5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI架、H5+开发和部署。

    74550

    有史以来最详细的web前端学习攻略,还在等什么,直接收藏吧

    第二阶段:HTML5和移Web开发 HTML5HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、Web Socket、Canvas. CSS3: CSS3新选择器、伪元素、脸色表示法、、阴影、background系列属性改变、Transition、画、景深和深透、3D效果制作、Velocity.js架、元素进场、出场策略、炫酷 面向对象三大特征: 继承性、多性、封装性、接口。 设计模式: 面向对象编程思维、单例模式、工厂模式、策略模式、观察者模式、模板方法模式、代理模式、装饰者模式、适配器模式、面向切面编程。 第五阶段:封装一个属于自己的架封装基础: 事件流、冒泡、捕获、事件对象、事件架、选择架。 架封装中级: 运原理、单物体运架、多物体运架、运架面向对象封装。 HTML5+: HTML5+中国产业联盟、HTML5 Plus Runtime环境、HBuilder开发工具、MUI架、H5+开发和部署。

    34300

    学习总结之HTML5剑指前端

    placeholder是指当文本处于未输入状时显示的输入提示,autofocus属性自获取光标焦点。 填充和绘制,填充为fill,绘制stroke。填充表示填满图形内部,绘制是指只绘制图形的。 设定绘图样式,主要是用于图形的颜色,但不限于图形的颜色。 第二,设定图形的样式,strokeStyle属性,图形的样式,在该属性中填入的颜色值。 指定线宽,使用图形上下文对象的lineWidth属性设置图形的宽度。 指定颜色值,填充颜色和的颜色分别通过fillStyle属性和strokeStyle属性。(rgb(红,绿,蓝)或rgba(红,绿,蓝,通明度))。 绘制矩形,使用fillRect方法和strokeRect方法来填充矩形和绘制矩形

    25710

    通过游戏学javascript系列第一节Canvas游戏开发基础

    JavaScript为我们提供了制作画并绘制到画布上所需的工具。它不仅提供绘图和画系统,还可以处理用户交互。 在本教程中,我们将使用纯JavaScript制作基本的HTML5 Canvas架,该架可用于制作真实的游戏。 在本教程的结尾创建了一个非常简单的游戏,以演示HTML5 Canvas与JavaScript结合的优势。 HTML5 Canvas基本游戏架 让我们围绕canvas元素创建一个基本的游戏架。 *canvas.height) }; } // Call init to start the game init(); }; 上面的代码绘制了一个带有 方块需要移,并且应该检测并解决与标高缘的碰撞。

    9910

    学习总结之HTML5剑指前端(建议收藏,图文并茂)

    placeholder是指当文本处于未输入状时显示的输入提示,autofocus属性自获取光标焦点。 填充和绘制,填充为fill,绘制stroke。填充表示填满图形内部,绘制是指只绘制图形的。 设定绘图样式,主要是用于图形的颜色,但不限于图形的颜色。 第二,设定图形的样式,strokeStyle属性,图形的样式,在该属性中填入的颜色值。 指定线宽,使用图形上下文对象的lineWidth属性设置图形的宽度。 指定颜色值,填充颜色和的颜色分别通过fillStyle属性和strokeStyle属性。(rgb(红,绿,蓝)或rgba(红,绿,蓝,通明度))。 绘制矩形,使用fillRect方法和strokeRect方法来填充矩形和绘制矩形

    10010

    Form表单 问题多多(中)

    先来说第一点:有时,用户会点击表单元素(如:文本)对应的文字,例如,点击“用户名”三个字,此时,出于对用户体验的考虑,可以使“用户名”所对应的表单元素直接获得焦点,让这个表单元素处于聚焦状。 为了处理不同浏览器的不同样式(不同浏览器的input不同,背景也不相同),需要将文本的背景去除掉,并去除它的,将背景设置为图片。 还有一点需要注意的是,假设文本的高度是32像素,为文字设置32像素的行高,在初始状下,IE6的光标位置并没有在文本中垂直居中,因此,通常我们会为父级添加padding,而高度只给文字大小(假设文字大小 14像素,那么height以及line-height均设置为14像素,上下各9像素内距撑开)。 处理方法很简单,textarea{resize: none;}即可使得右下角拖小三角消失掉。 注意,此处如果想取消掉聚焦后的外部,同样可以使用outline:none;的代码进行处理。

    62950

    快速上手小程序云开发

    margin-left 设置元素的左外属性 border 在⼀个声明中设置所有的属性。 ⽐如border:1px solid #ccc; border-top 在⼀个声明中设置所有的上属性。 border-right 在⼀个声明中设置所有的右属性。 border-bottom 在⼀个声明中设置所有的下属性。 border-left 在⼀个声明中设置所有的左属性。 border-width 设置四条的宽度。 border-style 设置四条的样式。 内距属性 border-color 设置四条的颜⾊。 border-radius 简写属性,设置所有四个 border-*-radius 属性。 ); } Web前端开发职业技能标准串讲 初级 1 Web页面制作基础 2 HTML5和CSS3开发基础与应用 3 JavaScript程序设计 4 轻量级架开发应用 Web简介 HTML语法基础

    45750

    相关产品

    • 全站加速网络

      全站加速网络

      全站加速网络(ECDN)为您提供全新高性能的一站式加速服务体验,实现了动静态混合型资源快速稳定的高效传输。将静态边缘缓存与动态回源路径优化相融合,智能调度最优服务节点,自动识别动静态资源,结合腾讯自研最优链路算法及协议层优化技术,一键操作,即刻全站加速!

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券