Maison > interface Web > tutoriel HTML > 问一下这个效果要如何实现?_html/css_WEB-ITnose

问一下这个效果要如何实现?_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-21 09:39:22
original
1075 Les gens l'ont consulté

就是透视的圆随着鼠标移动可以看下黑色遮罩下面的东西
CSS3如何实现这个 ?

回复讨论(解决方案)

曾经做过类似的,不过具体怎么实现的,不太清楚了,当时是在google上找到的灵感

估计得用js吧
等高手讲解

一起学习学习

不用css3 比较麻烦  css3 只要用 mask 就可以了

准备 黑色矩形 4个(大小可以拉伸)
准备 黑色矩形中间在透明圆圈的 图片一张

以上5个单位 popsition:absolute  zindex-max

测试  4个 矩形 和 黑色图形  拼成一个 铺满全屏的 大矩形(图片在中间) 不许有破绽
(基本就是  上 中(左 图片 右)下))

实际  使用  鼠标的 坐标 定位 图片的坐标 剩余就是调整 另外4个矩形的大小和坐标

不用css3 比较麻烦  css3 只要用 mask 就可以了

准备 黑色矩形 4个(大小可以拉伸)
准备 黑色矩形中间在透明圆圈的 图片一张

以上5个单位 popsition:absolute  zindex-max

测试  4个 矩形 和 黑色图形  拼成一个 铺满全屏的 大矩形(图片在中间) 不许有破绽
(基本就是  上 中(左 图片 右)下)…… - -那用张中间有个透明圈的大图也可以吧

不用css3 比较麻烦  css3 只要用 mask 就可以了

准备 黑色矩形 4个(大小可以拉伸)
准备 黑色矩形中间在透明圆圈的 图片一张

以上5个单位 popsition:absolute  zindex-max

测试  4个 矩形 和 黑色图形  拼成一个 铺满全屏的 大矩形(图片在中间) 不许有破绽
(基本就是  上 中(左 图片 右)下)……

嗯……昨晚也想到了这种方法,而且又可以兼容该死的IE。
不过要是CSS3的话能做到这种效果吗?
想要知道如何做。。。

css3 有遮罩样式(类似flash的遮罩层) 
你搜索下 就可以知道

不过 兼容度不是好 所以使用价值不大

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal