经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS3
css3 给背景设置渐变色的方法_css3_CSS

css3 给背景设置渐变色的方法_css3_CSS

c 给网页中的背景设置渐变色,c 的渐变颜色可以指定固定的两个颜色之前的线性过度,这个c 3属性只支持高版本的浏览器。 浏览器前缀 background: linear-gradient(red, blue); background: -webkit-linear-gradie...[2019/9/17]

CSS3 @media的基本用法总结_css3_CSS

语法: @media mediatype and | not | only (media feature) { c -code; } 也可以针对不同的媒体使用不同的stylesheets: <link rel="stylesheet" media=&q...[2019/9/11]

CSS中这个函数你会用吗?垂直居中都可以设置

今天给大家分享一个CSS函数(calc)从认识到如何实现元素居中的事。 没错,今天要说的就是calc函数的功能,先来简单认识一下。一、认识一下calc函数 这个函数出自于CSS3的功能,可以用来动态计算长度值。不要想太复杂,更不需要说的太多,只需要记住下面几点,就足够了熟悉它了: 第一,可以组合使...[2019/8/23]

通过css3动画和opacity透明度实现呼吸灯效果_css3_CSS

本文介绍了通过c 3动画和opacity透明度实现呼吸灯效果的方法,分享给大家,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...[2019/8/12]

详解css position 5种不同的值的用法 _css3_CSS

position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性)。 有五种不同的值:   •static •relative •fixed •absolute •sticky 然...[2019/7/31]

这应该是最详细的响应式系统讲解了

这应该是最详细的响应式系统讲解了

前言 本文从一个简单的双向绑定开始,逐步升级到由defineProperty和Proxy分别实现的响应式系统,注重入手思路,抓住关键细节,希望能对你有所帮助。 一、极简双向绑定 首先从最简单的双向绑定入手: html <input type="text"...[2019/7/23]

使用CSS3实现input多选框自定义样式的方法示例_css3_CSS

原理:首先把input元素隐藏掉,然后用CSS设置label元素(其他元素也可以)的样式,选中时的样式使用input:check+label选中label,无须使用图片和JS 效果预览 html代码 <div cla ="radio"> ...[2019/7/22]

移动端吸顶fixbar的解决方案详解

需求背景 经常会有这样的需求,当页面滚动到某一个位置时,需要某个页面元素固定在屏幕顶部,并且有时需要连续滚动吸顶。在PC端主要的实现是通过 CSS 的 position: fixed 属性,但是在移动端,尤其是在安卓端,存在诸多的兼容性问题。 问题 position:fixed...[2019/7/17]

移动端开发1px线的理解与解决办法

1px线变粗的原因 在做移动端项目时,常常是根据设计图设置元素节点的大小和样式,但是有时候根据设计图写出来的样式还是不如人意,虽然表面上看起来和设计稿是一样的,可是就是没设计稿那种感觉,而且莫名还有一种山寨的气息,UI审查的时候也常常会觉得分割线或则边框线太粗了,要更细一点,但是一看代码,已经...[2019/7/12]

详解css3中 text-fill-color属性 _css3_CSS

详解css3中 text-fill-color属性 _css3_CSS

text-fill-color是什么意思呢?单单从字面上来看就是“文本填充颜色”,不过它实际也是设置对象中文字的填充颜色,和color的效果很相似。如果同时设置text-fill-color和color两个属性,则text-fill-color会覆盖掉color的值。 ...[2019/7/8]

解决margin 外边距合并问题 _css3_CSS

一、兄弟元素的外边距合并 效果图如下:(二者之间的间距为100px,不是150px) 二、嵌套元素的外边距合并 对于两个嵌套关系的元素,如果父元素中没有内容或者内容在子元素的后面并且没有上内边距及边框,则父元素的上边距会与子元素的上外边距发生合并,且值为最大的那个上外边距,...[2019/7/4]

Vue+CSS3实现转盘抽奖的示例代码_CSS教程_CSS

最近有个转盘抽奖的需求,搜了一下现有的轮子,有的是用jQuery的动画函数实现的,有的是用canvas绘图然后再用高频率的setTimeout调用旋转方法,前者太老了没法简单移植到vue项目,后者感觉性能表现可能不会太好。也有一些用CSS动画的方案,设计了加速-匀速-减速三个动画,再计算偏转角度让...[2019/6/26]

em与rem有什么区别?移动设备中的适配方案

em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE html> <html lang="...[2019/6/26]

css3实现蒙版弹幕功能_css3_CSS

最近在b站上看到一种弹幕效果叫做智能防挡弹幕,也就是传说中的蒙版弹幕, 打开之后效果大概是这样的 再也不用担心男神女神的绝世容颜被花里胡哨的弹幕挡住啦,是不是感觉很神奇。 实现原理其实就是类似于ps的蒙版,也就是说将图像的一部分 “隐藏”。这里我们需要用到的是...[2019/6/19]

CSS3中媒体查询结合rem布局适配手机屏幕_css3_CSS

CSS3中媒体查询结合rem布局适配手机屏幕_css3_CSS

c 3语法: (750px设计图的1rem = 100px) @media only screen and (min-width: 320px) and (max-width: 479px){ html { font-size: 42.67px !impor...[2019/6/11]

详解CSS3 弹性布局快速入门_css3_CSS

前言 弹性布局是新一代的布局方式,传统布局中使用浮动布局会给我们带来不少弊端,如CSS代码高度依赖于HTML代码结构等等,下面我将用几个例子让大家快速学会弹性布局。 PS:弹性布局适用于较简单的场景,过于复杂的场景可以尝试着使用CSS3的Grid布局,弹性布局在PC端中还存在兼容性问题,移...[2019/6/10]

纯CSS3制作页面切换效果的实例代码_css3_CSS

此前写的那个太复杂了,来点简单的核心 <html> <head> <title></title> <style type="text/c "> * { marg...[2019/5/31]

CSS3 分类菜单效果_css3_CSS

CSS3 分类菜单效果如下所述: HTML <html> <head> <title></title> <style type="text/c "> #bg...[2019/5/28]

CSS3实现炫酷的切片式图片轮播效果_CSS教程_CSS

今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素(label)来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。 我们要实现的最终效果是这样的: 轮播的构成 HTML由三个主要部分组成:单选按钮和...[2019/5/27]

css3实现六边形边框的实例代码_css3_CSS

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置 visibility: hidden ; 而第3层div是放图片的,需要显示...[2019/5/27]

css和css3弹性盒模型实现元素宽度(高度)自适应_css3_CSS

一、c 实现左侧宽度固定右侧宽度自适应 1、定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...[2019/5/16]

使用 css3 transform 属性来变换背景图的方法_css3_CSS

使用 c 3 transform 属性可以轻易的旋转,倾斜,缩放任何元素。目前即使没有任何前缀也可以在绝大部分浏览器上很好的使用。 #myelement { -webkit-transform: rotate(30deg); transform: rotate(30deg); }...[2019/5/8]

css3实现可拖动的魔方3d效果 _css3_CSS

css3实现可拖动的魔方3d效果 _css3_CSS

主要用到知识点: •c 3 3d转换 •原生js鼠标拖动事件 •display:grid 布局 实现的功能 •3d魔方 可点击,可拖动 •直接看效果 html:   <div cla =&q...[2019/5/7]

怎样实现H5+CSS3手指滑动切换图片的示例代码

怎样实现H5+CSS3手指滑动切换图片的示例代码

包含3个文件:html、slider-H5.js、jquery.js。在html中可配置滑动参数。具体代码如下: HTML代码: <!DOCTYPE HTML> <html> <head> <met...[2019/5/6]

CSS3 实现童年的纸飞机 _css3_CSS

今天我们来折纸飞机(可以飞出去的那种哦) 基本全用c 来实现,只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 写之前再补充个知识点: 我们颜色的设置不用rgba, 用hsl...[2019/5/6]

使用CSS变量实现炫酷惊人的悬浮效果_css3_CSS

最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像...[2019/4/28]

css3 中实现炫酷的loading效果 _css3_CSS

•今天实现了一个炫酷的loading效果,基本全用c 来实现,主要练习一下c 3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: <div cla ="box"> ...[2019/4/28]

css3中用animation的steps属性制作帧动画 _css3_CSS

  昨天火急火燎地接到一个任务,说是要做一个掷骰子的游戏,关于掷骰子期间的过渡动画,我本来是想用c 3d制作一个立体的骰子,然后叫UI给6张平面图贴上去。再用translate3d来操作。然而UI考虑得十分周到,直接就给了我一个雪碧图,并告诉我在photoshop中可以用帧动画来播放几张图片,达...[2019/4/26]

CSS3 之 童年的纸飞机

今天我们来折纸飞机(可以飞出去的那种哦) 基本全用c 来实现,只有一小部分的js 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三角形由border画出来的再经过各种平移翻转变成上图 写之前再补充个知识点: 我们颜色的设置不用rgba, 用hsl...[2019/4/25]

详解CSS3中的box-sizing(content-box与border-box)_css3_CSS

CSS3中的box-sizing(content-box与border-box) CSS3中的box-sizing 属性允许以特定的方式来指定盒模型,有两种方式: content-box:标准盒模型,又叫做 W3C盒模型,一般在现代浏览器中使用的都是这个盒模型 border-box:怪...[2019/4/22]

用css画一个哆啦A梦

原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! <!DOCTYPE html> <html> <head>     <title></t...[2019/4/17]

CSS3实现王者荣耀匹配人员加载页面的方法_css3_CSS

CSS3实现王者荣耀匹配人员加载页面的方法_css3_CSS

玩过王者的应该都熟悉,这个页面的效果。为什么要实现这个效果了? 第一:王者这么火,电竞这么火。 第二:主要还是来学习 CSS3 的线性、径向渐变、旋转、缩放以及动画。 图形解析 1、背景(径向渐变) 2、玩家(player)加载动画(线性渐变) 3、背景镂空旋转正方形...[2019/4/17]

CSS3 transforms应用于背景图像的解决方法_css3_CSS

CSS3 transforms应用于背景图像的解决方法_css3_CSS

CSS transformations虽然很酷,但还没有应用于背景图像。这篇文章提供了一个很好的解决方法,当您确实想要旋转背景图像时,或者在容器元素旋转时保持背景图像不变。 使用c 3转换属性可以缩放、倾斜和旋转任何元素。它在所有没有厂商前缀的现代浏览器中都得到支持。(我已经添加了-webki...[2019/4/17]

CSS3实现王者匹配时的粒子动画效果_css3_CSS

在码代码的时候会发现,很多东西都是殊途同归的,方法千千万,能解决问题的都是好办法,不一定非要把代码写的特别高深,这样反而后来的人看不懂,维护根据头疼。 所以用最简单通俗的代码,更能利于后期的维护开发。 先来看看背景粒子动画效果预览图:   按钮点击粒子动画 &...[2019/4/15]

CSS3解析抖音LOGO制作的方法步骤_css3_CSS

“抖音”,人气也是非常高,据说拥有7亿用户。 今天我们就来研究研究抖音的logo,蹭蹭热度。 效果预览: 主要用c 3新增属性 mix-blend-mode ,”组成,然后有3种颜色,白色、红色、和天蓝色。 ok,我们先来完成一个&ldqu...[2019/4/12]

浅谈CSS3 box-sizing 属性 有趣的盒模型 _css3_CSS

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin. 盒模型是有两种标准的,一个是标准模型,一个是IE模型。 从上面两图不难看出在标准模型中,盒模型的宽高只是内容(content)的宽高, 而在IE模型中盒模型的宽高是内容(cont...[2019/4/3]

CSS3 3D酷炫立方体变换动画的实现_css3_CSS

CSS3 3D酷炫立方体变换动画的实现_css3_CSS

我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象。 先给大家看看完成的效果,代码也不是很难,每行代码都给到了详细注释,纯CSS,没有用到JS,CSS3不错。 效...[2019/3/27]

使用CSS3的clip-path实现剪贴区域的显示

使用CSS3的clip-path实现剪贴区域的显示

clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的: clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪...[2019/3/19]

CSS3之2D与3D变换的实现方法_css3_CSS

c 3实现了对元素执行2D平面变换,以及视觉上的3D空间变换,2D变换平时可能用的较多,3D效果也能锦上添花; 关于坐标轴 初中数学的几何学里我们便开始接触坐标轴,最基本的是平面直角坐标系 XoY ,然后延伸出空间直角坐标系 XYZ ,现在我们来说一下c 中的坐标系; c 甚至一下设备...[2019/1/31]

CSS3移动端vw+rem不依赖JS实现响应式布局的方法_css3_CSS

1、前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是c 3出现的一个新单位,它是“view width”缩写,定义为把当前屏幕分成一百份,1vw即为屏幕的1%,与之对应的是vh,把高分成一百份,1vh即为屏幕高的1%...[2019/1/25]

css 中的 display:flex 属性

一:display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写,意为"弹性布局&q...[2019/1/22]

css3实现3D文本悬停改变效果的示例代码_css3_CSS

本文介绍了c 3实现3D文本悬停改变效果的示例代码,分享给大家,具体如下: html <h1 cla ="hover-text-3d" data-text="w3cbest.com">W3CBEST.COM</h1> ...[2019/1/18]

简单几步用纯CSS3实现3D翻转效果_css3_CSS

作为前端开发人员的必修课,CSS3能带我们完成许多基本动效,本期我们将用CSS3实现hover翻转效果~ 第一步非常简单,我们简单画1个演示方块,为其 添加transition和transform属性 : 本示例均使用Sa 语法 .block { width: 200p...[2019/1/18]

用CSS3和table标签实现一个圆形轨迹的动画的示例代码_css3_CSS

html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边框设置圆形弧度的。 <div cla ="animation_div&...[2019/1/18]

css3实现元素环绕中心点布局的方法示例_css3_CSS

本文介绍了c 3实现元素环绕中心点布局的方法示例,分享给大家,具体如下: 效果如图:   代码实现: <style> *{ margin: 0; padding: 0; box-siz...[2019/1/16]

偏门却又实用的 CSS 样式

::-Webkit-Input-Placeholder input 的 H5 placeholder 属性,很好用,但不能直接改这个文字颜色,所以目前的解决方法就是用::input-placeholder属性来改。 配合 opacity 属性使用效果更好 <!DOCTYPE...[2019/1/10]

浅谈CSS3 动画卡顿解决方案_css3_CSS

为什么会卡顿? 有一个前提必须要提,前端开发者们都知道,浏览器是单线程运行的。但是我们要明确以下几个概念:单线程,主线程和合成线程。 虽然说浏览器执行js是单线程执行(注意,是执行,并不是说浏览器只有1个线程,而是运行时,runing),但实际上浏览器的2个重要的执行线程,这 2 个线程协...[2019/1/7]

CSS3动画效果transition

CSS3动画效果transition

1.transition的浏览器支持情况 IE10+支持,IE6\7\8\9都不支持!目前,其他浏览器最新版本都支持,不需要再加前缀 -webkit- 之类的了2. 还是一步一步说说怎么用transition吧 页面只有一个div,其c 如下:  1  &nb...[2019/1/2]

纯CSS3实现漂亮的input输入框动画样式库(Text input love)_css3_CSS

分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:https: codepen.io/MichaelArestad...[2019/1/2]

CSS3动画之DIY Loading动画

首先要知道什么是CSS3动画?然后才能做出自己想要的动画效果。下面会通过3个简单的Loading动画效果来对CSS3 animation动画做一个简单介绍,希望对你有用。 动画是使元素从一种样式逐渐变化为另一种样式的效果。 您可以改变任意多的样式任意多的次数。 使用百分比来规定变化发生的时间,或用...[2018/12/29]

62
2
记录数:68 页数:1/212下一页尾页
加载更多