- 小技巧,css实现页面中弧度 11-25
- css阴影效果收集 11-25
- Sublime Text 的插件推荐 11-25
- jQuery炫酷特效之遮罩移动效果 11-25
- 做网站开发之前,你需要知道这些 11-25
- CSS实现全景图移动效果! 11-25
- css 中 supports 检测浏览器是否支持某项 11-25
- 多重背景CSS动画 11-25
- 原生css,js实现图片切片旋转 11-25
- CSS font-size 属性 11-25
小技巧,css实现页面中弧度
发布者: superzhang | 发布时间:2017-11-25弧度图形在一些网页中会用到,实现方法有很多。可以通过加载背景图或者放img图片来实现,下面说说用css的圆角来实现有弧度的图形!
具体效果图:
实现代码:
通过伪类追加一个半圆效果拼装成一个有弧度的图形
css阴影效果收集
发布者: superzhang | 发布时间:2017-11-25本例就css实现的阴影效果进行整合,主要运用到css3的box-shadow属性进行设置实现不同的效果
实现代码如下:
html:
css:
Sublime Text 的插件推荐
发布者: superzhang | 发布时间:2017-11-25Sublime Text 是一个代码编辑器(Sublime Text 2是收费软件,但可以无限期试用),也是HTML和散文先进的文本编辑器。Sublime Text是由程序员Jon Skinner于2008年1月份所开发出来,它最初被设计为一个具有丰富扩展功能的Vim。
Sublime Text具有漂亮的用户界面和强大的功能,例如代码缩略图,Python的插件,代码段等。还可自定义键绑定,菜单和工具栏。Sublime Text 的主要功能包括:拼写检查,书签,完整的 Python API , Goto 功能,即时项目切换,多选择,多窗口等等。Sublime Text 是一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。
1 Emmet
功能:编码快捷键,前端必备
简介:Emmet作为zen coding的升级版,对于前端来说,可是必备插件,如果你对它还不太熟悉,可以在其官网上看下具体的演示视频。
使用教程: http:
jQuery炫酷特效之遮罩移动效果
发布者: superzhang | 发布时间:2017-11-25今天带领大家实现一个非常炫酷的遮罩效果。遮罩跟随鼠标的移入点移入区块中(鼠标从区块左侧移入则遮罩也从左侧移入,鼠标从左侧移出遮罩也会左侧移出,其它方向同理),可以将这样一个效果应用到自己到网页中:
炫酷遮罩层
一、准备工作
先想一想这样到一个效果该如何实现呢?HTML结构该怎么搭建?
......
来看看基本到HTML结构是如何到:
HTML结构
CSS:
二、程序方面:
1.编程语言
首先是HTML,这是最基础的。
等学会了HTML跟CSS语言之后,下面就得选
CSS实现全景图移动效果!
发布者: superzhang | 发布时间:2017-11-25鼠标放在图片上时,图片自动移动,到尽头后,反向移动
首先我们给的图片尺寸:3320*1352
先将图片放在一个300*200的div盒子中
HTML结构:
先将图片作为背景图:
定义一个动画,设置动画效果:
使用动画效果,设置动画状态为暂停:
代码
html+css:
属性定义及使用说明
font-size属性设置字体大小。
默认值:medium继承:yes版本:CSS1JavaScript 语法:object.style.fontSize="larger"浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
属性font-size1.05.51.01.07.0
