码云笔记提示:你现在浏览的网站是镜像网站

请访问原网站:www.mybj123.com
声明:码云笔记唯一指定网址为:mybj123 .com,其他网址均为冒充,望周知!!!前端技术交流群:565733884

标签:css3

HTML/CSS

深入剖析object-fit与object-position属性的用法

深入剖析object-fit与object-position属性的用法
图片居中大家再熟悉不过了,老生常谈的问题,之前虽然有总结过N种方法解决居中问题,最近在学习中发现css3有两个更好的属性方法,即object-fit和object-position两个CSS属性,他们可以让我们操作img或video中的内容,类似于我们可以用background...

6天前 21℃ 15喜欢

HTML/CSS

css3中box-shadow的奇特用法

css3中box-shadow的奇特用法
box-shadow属性是css3中的一个属性,几乎可以在人和元素上添加阴影效果,通过它我们可以做出很多非常酷的东西。接下来我将为大家讲解box-shadow属性的奇特使用方法。 兼容性 语法 box-shadow: h-shadow v-shadow blur spread ...

4个月前 (12-12) 330℃ 3喜欢

HTML/CSS

关于css3中maxmin-content及fit-content等width值的理解

关于css3中maxmin-content及fit-content等width值的理解
最近在学习css3的时候发现了一些好玩的属性,在css3的家族中,width属性新添加了几个关键字成员,分别是fill-available,max-content,min-content,fit-content。不仅仅是我没接触过,我相信很多小伙伴都没见过,更别说在项目中应用了。...

5个月前 (11-14) 216℃ 2喜欢

CSS3教程

css3介绍

css3介绍
什么是CSS3 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了,IE10以后也开始全面支持CSS3了。 在编写CSS3样式...

7个月前 (09-17) 235℃ 1喜欢

CSS3教程

css3背景相关样式属性

css3背景相关样式属性
background-origin background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示: border-box 表示背景...

7个月前 (09-12) 155℃ 1喜欢

HTML/CSS

css3实现好看的气泡按钮动画特效

css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和互动性。接下来我就用css3的一些属性来完成点击按钮气泡动画特效。 先看gif效...

9个月前 (08-01) 390℃ 3喜欢

资源共享

分享20种交互式按钮的代码片段

分享20种交互式按钮的代码片段
你能想象一个没有按钮的网站吗?我打赌你不能。这并不奇怪,因为这些小的,大部分是矩形形状的对象,就像导航或者版权信息一样,是任何UI的基本细节之一。它们不仅使链接看起来更有份量、更吸引人、更有冲劲,而且还有助于提高转化率,使用户体验更便捷、更直观。这些CTAs(又称“aka Ca...

9个月前 (07-25) 901℃ 4喜欢

JavaScript

anime.js使得CSS和SVG动画变得更简单

anime.js使得CSS和SVG动画变得更简单
anime.js是一个强大的用来制作动画的javascript库,与其他框架相比,它足够轻便,gzip压缩完只有9kb左右,麻雀虽小,却五脏俱全。anime.js不仅允许通过CSS属性的动画,还可以改变SVG动画的HTML属性。像现代网页设计无SVG格式是很难的。 如果我们实现...

9个月前 (07-16) 468℃ 1喜欢

HTML/CSS

巧用before和after伪元素制作动画特效

巧用before和after伪元素制作动画特效
为什么要整理这篇文章,是因为最近我的一个项目用到了:before和:after这两个伪元素,结合css3的transform相关属性实现鼠标悬停在图片上出现边框线条动画特效。在CSS 中:before 和 :after这两个伪类元素说不上常用 ,只是偶尔会被人用来添加些自定义格式...

9个月前 (07-11) 278℃ 3喜欢

HTML/CSS

纯css实现半透明的登录页效果

纯css实现半透明的登录页效果
纯css实现半透明的登录页效果,时间匆匆,有很多地方还需要完善,该登入界面只涉及HTML和CSS,暂时不涉及javascript;下来看一下效果图 HTML代码 <div class="bg-div"></div> <div class="sig...

9个月前 (07-11) 241℃ 3喜欢

HTML/CSS

视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解

视口百分比长度vh、vw、vi、vb、vmin、vmax单位的了解
今天,我将要向你介绍一些你以前可能不知道的CSS工具。这些工具都是计量单位,就像像素或者相对单位,但是很可能你从来没听说过它们! vh单位 等于初始包含块的高度的1%。 vi单位 等于根元素的内联轴方向上的初始包含块的大小的1%。 vb单位 等于初始包含块在根元素的块轴方向上的大...

9个月前 (07-10) 179℃ 3喜欢

前端技术

纯css创建网页加载动画

纯css创建网页加载动画
有时候我们网页由于数据量大或者是网络速度原因导致请求速度慢,会出现一些空白的页面,使得用户体验不是很好,所以网站都会设置一个预加载效果,即加载之前先让他加载一个动画,二后台继续加载未加载出来的内容,当页面加载完数据后动画消失内容显示,这样就是的我们用户体验很好。 接下来给大家分享...

10个月前 (06-20) 148℃ 1喜欢

HTML/CSS

Css3 @font-face在实际项目中如何使用

Css3 @font-face在实际项目中如何使用
@font-face是css3中的一部分内容,它有什么作用呢?主要是用来自定义一些web字体用来嵌入到你的网页中,就比如说牛人博客四个字就是我通过@font-face来自定义的。可以说通过css3出来这一属性后,我们再也不用担心只能使用web安全字体了,你可以根据自己的需要来设定...

10个月前 (06-20) 263℃ 1喜欢

前端技术

canvas实现烟花爆竹特效

canvas实现烟花爆竹特效
这个canvas实现的烟花爆竹特效例子死我在网上收集的,效果很high,关键是我想通过笨栗子来提高自己的canvas,好了不多说了,基本的canvas语法就不和大家说了,我想看到这篇文章的人,基础已经学过了,所以直接上代码,看人家的思路就可以了。 CSS代码: body { ...

10个月前 (06-19) 313℃ 1喜欢

HTML/CSS

如何去除span之间的间隙bug

如何去除span之间的间隙bug
不知道大家有没有这样的经历,我们把2个span写在一起的时候,在页面上会发现他们之间有一段间隙,这是什么原因呢?先不要着急往下看我的解决方法,自己先想一下,也许你想到的比我的方法会更好。 先上一张效果图: HTML代码: <div class="wrap">   ...

10个月前 (06-19) 188℃ 1喜欢