奇思妙想 - web秀

#奇思妙想#

共找到奇思妙想相关内容 8 条

2年前

CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能

本文将介绍一个非常有意思的功能，使用纯CSS利用resize实现强大的图片切换预览功能。类似于这样：思路首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。将两张图片叠加在一起改变上层图片的宽度，或者使用mask，改变mask的透明度区间变化两种方式都简单示意一下。假设我们的结构如下，分别使用background展示两张图片：<divclass="g-outer"><divclass="g-inner"></div></div>复制代码方法一，改

545206 3301 0

2年前

奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？

本文将从比较多的方面详细阐述如何利用CSS3D的特性，实现各类有趣、酷炫的动画效果。认真读完，你将会收获到：了解CSS3D的各种用途激发你新的灵感，感受动画之美对于提升CSS动画制作水平会有所帮助CSS3D基础知识本文默认读者掌握一定的CSS3D知识，能够绘制初步的3D动画效果。当然这里会再简单过一下CSS3D的基础知识。使用transform-style启用3D模式要利用CSS3实现3D的效果，最主要的就是借助transform-style属性。transform-style只有两个值可以选择：//语法

545695 3315 0

2年前

CSS 奇思妙想 | 全兼容的毛玻璃效果

CSS 奇思妙想 | 全兼容的毛玻璃效果

通过本文，你能了解到最基本的使用CSSbackdrop-filter实现磨砂玻璃(毛玻璃)的效果在至今不兼容backdrop-filter的firefox浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中什么是backdrop-filterbackdrop-filterCSS属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。backdrop-filter与filter非常类似

546396 3283 0

2年前

CSS 奇思妙想 | Single Div 绘图技巧

CSS 奇思妙想 | Single Div 绘图技巧

经常能看到有关CSS绘图的文章，譬如使用纯HTML+CSS绘制一幅哆啦A梦图画。实现的方式就是通过堆叠div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。基于CSS绘图的这个需求，逐渐又有了新的一个流派，单标签实现图形，也就是说，一个复杂的图形只借由一个标签完成，这个相对于能够无限使用标签，不断堆叠div来说，无疑难度上升了很多，也要求对CSS有着更深刻的理解。譬如下面这个图形，就是由一个div元素完成，源自于ASingle

546030 3261 0

2年前

CSS奇思妙想 -- 使用 CSS 创造艺术

CSS奇思妙想 -- 使用 CSS 创造艺术

本文属于CSS绘图技巧其中一篇。之前有过一篇：在CSS中使用三角函数绘制曲线图形及展示动画想写一篇关于CSS创造艺术的文章已久，本文主要介绍如何借助CSS-doodle，利用CSS快速创造美妙的CSS图形。中心布局本文的所有技巧都会围绕这个布局展开，属于一类技巧。首先，我们需要这样一种中心布局。简单的HTML结构如下：<divclass="g-container"><divclass="g-box"></div><divclass="g-box"></

546713 3308 0

2年前

CSS奇思妙想 -- 使用 background 创造各种美妙的背景

CSS奇思妙想 -- 使用 background 创造各种美妙的背景

本文属于CSS绘图技巧其中一篇，系列文章：在CSS中使用三角函数绘制曲线图形及展示动画CSS奇思妙想--使用CSS创造艺术将介绍一些利用CSS中的background、mix-blend-mode、mask及一些相关属性，制作一些稍微复杂、酷炫的背景。通过本文，你将会了解到CSSbackground中更为强大的一些用法，并且学会利用background相关的一些属性，采用不同的方式，去创造更复杂的背景图案。在这个过程中，你会更好的掌握不同的渐变技巧，更深层次的理解各种不同的渐变。同时，借助强大的CSS-D

545710 3291 0

2年前

奇思妙想 CSS 文字动画

奇思妙想 CSS 文字动画

之前有些过两篇关于字体的文章，是关于如何定义字体的：你该知道的字体font-familyWeb字体font-family再探秘本文将会和这篇--CSS奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。GoogleFont在写各种DEMO的时候，有的时候一些特殊的字体能更好的体现动画的效果。这里讲一个快速引入不同格式字体的小技巧。就是GoogleFont这个网站，上面有非常多的不同的开源字体：当我们相中了一个我们喜欢的字体，它也提供了非常快速的便捷的引入方式。选中对应的字体，

545426 3253 0

2年前

CSS 奇思妙想边框动画

CSS 奇思妙想边框动画

今天逛博客网站--shoptalkshow，看到这样一个界面，非常有意思：觉得它的风格很独特，尤其是其中一些边框。嘿嘿，所以来一篇边框特辑，看看运用CSS，可以在边框上整些什么花样。 border属性谈到边框，首先会想到 border，我们最常用的莫过于 solid，dashed，上图中便出现了 dashed。除了最常见的 solid，dashed，CSSborder还支持 none，hidden， dotted， doubl

544758 3224 0

下拉加载更多