【css3 制作一个遮罩】的更多相关文章

css3 制作一个遮罩

思路:1.显示两块图片,2.图片区域(初始隐藏),3.鼠标移入,遮罩显示,此时遮住图片,4.鼠标移出,遮罩恢复初始状态 用到两个css3 属性:transtion ,transform 用法: 1. transition:property duration timing-function delay; property:变化的属性 duration:属性变化持续的时间 time-function:变化的效果 delay:延迟时间 <!DOCTYPE html> <html lang=&q…

使用CSS3 制作一个material-design 风格登录界面

心血来潮,想学学 material design 的设计风格,就尝试完成了一个登录页面制作. 这是整体效果. 感觉还不错吧,结尾会附上代码 在编写的过程中,没有使用任何图片或者字体图标,全部使用css3完成,还是遇到一些难点和bug,所以想笔记下来,以后方便查阅. 响应式设计 在这个页面中,使用下面3点来完成响应式设计 最大宽度 .设定了一个 max-width 的最大宽度,以便在大屏幕时兼容. margin : 20px auto; 使其保持时刻居中 组件使用像素 关于响应式的设计要点还有很多…

CSS3 制作一个边框向周围散开的按钮效果

我们将要达到的是如下的效果(若效果未出现请刷新): 分析 主要还是运用CSS3的transition, animation, transform还有渐变背景等特性. 由于按钮在鼠标进入时有不同的样式,所以要对其:hover状态运用另外的背景样式 通过对按钮的:after状态添加一个内容为空的元素,并给其一个边框,这样在鼠标进入后我们让这个隐藏的空元素变大直到淡出,就得到我们看到的效果了 构建基本按钮样式 做为例子,我们的页面会很简单,就放一个a标签作为按钮,然后对其写样式让它看起来更像一个按钮.…

css3制作一个漂亮的按钮

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFMAAAA4CAIAAAAO41POAAAGWklEQVRogeWabWwTdRzH/8EwMb6Q69…

移动端纯CSS3制作圆形进度条所遇到的问题

近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高相等的子盒子,左侧的子盒子左上角和左下角以及右侧子盒子的右上角和右下角利用border-radius:半径,这样两个矩形便组成了一个完整的圆形. 我们让左侧的子盒子绕着右边的中点旋转180°,这样左侧的半圆就隐藏了,右侧半圆同理.这个地方设置旋转中心是用的transform-origin属性,第一个…

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: .circleprogress{        width: 160px;        height: 160px;        border:20px solid red;        border-radius: 50…

css3制作旋转动画

现在的css3真是强大,之前很多动画都是用jq来实现,但是css3制作的动画要比jq实现起来简单很多,今天呢,我自己也写了一个css旋转动画和大家分享.效果如下面的图片 思路:1.制作之前呢,我们先来整理一下思路,这个圆轴轨迹上一共有八个圆. 仔细看的话,你会发现一个规律,那就是一个月是360度的,里面放了八个圆,也就是每个圆都是占了45度,然后平均的在圆轴上面分布开来.有了这个发现之后,我们就开始想想该怎么布局好啦.下面是我的布局方式,可以给大家参考一下: 我是每两个垂直对应的圆就放在同一个d…

详解用CSS3制作圆形滚动进度条动画效果

主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢,那篇博客只是制作出来效果而已,并没有动画效果,因为当时正期末复习期间,所以就省了制作动画的时间成本.所以,今天就一起把各种效果都实现吧! 内  容 先看一下效果图,会提升我们的学习兴趣哟: 好的,我将按照此图从上到下的顺序讲解,由于第一和第二种效果之气那篇博客<CSS实现进度条和订单进度条>已经介…

CSS3制作心形头像

1.功能需求: 最近有一个基于微信开发的Mobile Web项目,是一个活动页面.功能需求:用户使用微信扫描二维码,然后授权使用微信登录,然后读取用户的昵称和头像,然后显示在一个饼图上面.头像需要有一个心形套住,大家看到很多页面,都是使用圆形套住,比如新版的手机QQ联系人,截图如下:   微信登录如图,拿的微信开放平台的美丽说的截图: 2.实现代码 <!DOCTYPE html><html> <head> <title>css3制作心形头像</titl…

使用 jQuery & CSS3 制作美丽的照片画廊

在本教程中,我们将创建一个很好看的照片画廊效果.我们的想法是,以显示专辑作为一个滑块,而当这张专辑被选中,我们将使用一个美丽的照片堆栈展示专辑的图像.在照片堆栈视图,我们可以通过将最上面的图像移动到所有照片后面的方式浏览. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型…