css - web秀

综合Uni-AppWebpackReactHtmlElectron-VueElectronVue-NuxtTypeScriptNodeJs 展开

5年前

CSS3中Flex弹性布局该如何灵活运用？

CSS3中Flex弹性布局该如何灵活运用？

前言Flex（FlexibleBox），意为”弹性布局”。“弹性”，顾名思义，就是具有弹簧的特性啦，能够自由的伸缩（有点自适应的意思啦）。其实Flex并不是最近才出现的，而是早在十年前它就被提出。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex布局如何使用？任何一个容器都可以指定为Flex布局.box{display:flex;}行内元素也可以使用Flex布局.box{dis

555325 3762 0

4年前

纯CSS实现简单骨骼动画

纯CSS实现简单骨骼动画

背景某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。十分钟后，?不对呀，这个左右摆动好假，不像现实中风吹的效果。注：此处加快了动画的速度和摆动的幅度。.animate-1{animation:swing11sease-in-outinfinite;transform:rotate(-5deg);transform-origin:topcenter;}@keyframesswing1{0%{transform:rotat

555492 3593 0

2年前

27个精美的时间线(含源代码)

27个精美的时间线(含源代码)

有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智。本文GitHubgithub.com/qq449245884…已收录，有一线大厂面试完整考点、资料以及我的系列文章。今天，让我们来学习如何使用HTML、CSS、Javascript为网站开发和设计创建时间线。1.垂直时间线HTMLCSS源码：codepen.io/itbruno/pen…2.垂直时间轴HTML模板源码：codepen.io/P233/pen/nb…3.垂直时间线网站事例地址：codepen.io/z-/pen/bwPB…4

546443 3314 0

2年前

有意思的鼠标指针交互探究

有意思的鼠标指针交互探究

今天，来实现这样一个有意思的交互效果：将原本的鼠标指针样式，修改成自己想要的效果，并且添加上一些特殊的交互效果。修改鼠标样式首先，第一个问题，我们可以看到，上图中，鼠标指针的样式被修改成了一个圆点：正常而言应该是这样：当然，这里比较简单，在CSS中，我们可以通过cursor样式，对鼠标指针形状进行修改。利用cursor修改鼠标样式cursorCSS属性设置鼠标指针的类型，在鼠标指针悬停在元素上时显示相应样式。cursor:auto;cursor:pointer;...cursor:zoom-out;/*使

546287 3204 0

2年前

圆角大杀器，使用滤镜构建圆角及波浪效果！

圆角大杀器，使用滤镜构建圆角及波浪效果！

本文，将另辟蹊径，介绍一种使用滤镜去构建圆角的独特方式。首先，我们来看这样一个图形：一个矩形，没什么特别的，代码如下：div{width:200px;height:40px;background-color:#000;}如果，我们现在需要给这个矩形的两端加上圆角，像是这样，该怎么做呢：Soeasy，不过就是加个border-radius而已：div{width:200px;height:40px;+border-radius:40px;background-color:#000;}好，那如果，不再是直线，

545341 3262 0

5年前

CSS3径向渐变实现优惠券波浪造型

CSS3径向渐变实现优惠券波浪造型

前言“等风来不如追风去，追逐的过程就是人生的意义”。借朋友吉言，“2018在头条，2019成为头条”，这就是我2019的目标，我已经在追风的路上。你呢？不要停下脚步，继续前行吧。今天来个实用的小知识，看下图：很多人看到左右的波浪边框，第一想法，应该是用图片实现。现在我们就打破这一想法，用CSS搞定这个效果。radial-gradient()radial-gradient()函数用径向渐变创建"图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。语法：background:radial-gr

560488 3776 0

6年前

CSS3 filter滤镜详细介绍及示例

CSS3 filter滤镜详细介绍及示例

前言filter是css3的一个属性，大家应该都很少用到，很多人只是知道有这个属性。Webkit率先支持了这几个功能，不过现在大部分浏览器也都做了兼容性，下面大家就一起来学习吧。参数语法现在规范中支持的效果有：参数描述取值grayscale灰度值为0-1之间的小数sepia褐色值为0-1之间的小数saturate饱和度值为numhue-rotate色相旋转值为angleinvert反色值为0-1之间的小数opacity透明度值为0-1之间的小数brightness亮度值为0-1之间的小数...

556917 3763 0

2年前

20+ css高频实用片段，提高幸福感的小技能你可以拥有噢

20+ css高频实用片段，提高幸福感的小技能你可以拥有噢

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。前言修改inputplaceholder样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平垂直居中...多么熟悉的功能呀！前端童鞋几乎每天都会和他们打交道，一起来总结我们的css幸福小片段吧！下次不用百度、不用谷歌，这里就是你的港湾。点击查看源码地址”持续更新中“1.解决图片5px间距你是否经常遇到图片底部莫名其妙多出来5px的间距，不急，这里有4种方式让它消失方案1：给父元素设置font-size:0效果html<d

546318 3353 0

2年前

利用噪声构建美妙的 CSS 图形

利用噪声构建美妙的 CSS 图形

在平时，我非常喜欢利用CSS去构建一些有意思的图形。我们首先来看一个简单的例子。首先，假设我们实现一个10x10的格子：此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机添加不同的颜色：虽然利用了随机，随机填充了每一个格子的颜色，看着有那么点意思，但是这只是一幅杂乱无章的图形，并没有什么艺术感。这是为什么呢？因为这里的随机属于完全随机，属于一种白噪声。什么是白噪声？噪声（Noise）实际上就是一个随机数生成器。那么，什么是白噪声呢？如果从程序员的角度去理解的话，可以理解为我们在JavaScr

545464 3318 0

3年前

CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式

CSS不规则卡片，纯CSS制作优惠券样式，CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》，这次再来温习一遍，并且将更为详细的讲解，从布局到具体样式说明，最后定义CSS变量，自定义主题颜色。布局布局其实是学习前端的重要部分，最常用的方式就是从上而下、从左而右、亦或者两个相结合。看上图，而这里，我们就只是最简单的布局方式，从上而下：1、优惠券金额和过期时间2、优惠券描述3、按钮（其实按钮也可以放到“2”里面去）这样分析，我们就有了html架构了<divclass="coupon"><!--1、优惠券金额和过期时间

546976 3251 0

下拉加载更多

猜你喜欢

换一换

最新文章