经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
 CSS3

CSS3中的弹性布局em运用入门详解 1em等于多少像素_css3_CSS

使用CSS也好久了,但一直都是在使用“px”来设置Web元素的相关属性,未敢使用“em”。主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中要求使用“em”作为单位设置元素,所以从头对“em&r...[2021/2/18]

css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果_css3_CSS

效果查看地址:游计划(uplanok.com) 代码: img{width: 100%;border-radius: 3px;transition: all 2s;} img:hover{transform: scale(1.2);} img外层标签元素,需要设定o...[2021/2/1]

CSS3选择器新增问题的实现_css3_CSS

基本选择器扩展 1.子元素选择器 :tomato: #wrap > .inner {color: pink;} 也可称为直接后代选择器,此类选择器只能匹配到直接后代,不能匹配到深层次的后代元素 总结:>作用于元素的第一代后代,空格作用于元素的所有后代 2. 相邻兄弟选择器 ...[2021/1/25]

CSS3.0实现霓虹灯按钮动画特效的示例代码_css3_CSS

CSS3.0实现霓虹灯按钮动画特效的示例代码_css3_CSS

今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下: 以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <...[2021/1/18]

CSS3实现苹果手机解锁的字体闪亮效果示例_css3_CSS

0.前言 2016年08月18日 今天看到注意到苹果手机的滑动解锁,提示字上会有一道白光闪过,感觉很炫酷,所以突然就来了兴致想要做一个当鼠标放在字体上(模拟手指)时,白光一闪而过,照亮字体的效果。 1.思路 首先呢,需要做出来一道倾斜的白光,这道白光就是用来实现“照亮字体...[2021/1/11]

css3 实现滚动条美化效果的实例代码_css3_CSS

具体代码如下所示: /*滚动条的宽度*/ ::-webkit-scrollbar { width:9px; height:9px; } /*外层轨道。可以用display:none让其不显示,也可以添加背景图片,颜色改变...[2021/1/11]

CSS3实现红包抖动效果_css3_CSS

有个需求是要实现红包的抖动效果,之前没做过,记录一下嘻嘻~~ 这里用到了transform: rotate()属性,加上animation实现动画效果,不多说上代码 .red_packet { width: 180rpx; height: 220rpx; posit...[2020/12/28]

使用CSS3制作版头动画效果_css3_CSS

使用CSS3制作版头动画效果_css3_CSS

网易看游戏官网(http: kanyouxi.163.com/)(已下架),是我以前(2014年)做的一个项目,也是我们首个放弃Flash,采用HTML5与制作动画的网站,当时业内为数不多的采用CSS3用于主动画实际生产的网站,当然现在已经很广泛使用了,特别是在移动端,CSS3是性能的保障。...[2020/12/28]

html5+css3之制作header实例与更新_css3_CSS

上次,我们形成了两种header的布局,一种flexbox,一种float,最后与身边做重构的同事交流下来,选择了float的布局。 事实上布局的选型不需要我关注,我的参与或者一些意见多数是自我提升,但要说html结构完全控制于c er的话就不一定了 在整个header组件的代码过程中,我...[2020/12/21]

html5+CSS3的编码规范_Web标准教程_CSS

黄金定律 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的。 语法 1.用两个空格来代替制表符(tab) – 这是唯一能保证在所有环境下获得一致展现的方法。 2.嵌套元素应当缩进一次(即两个空格)。 3.对于属性的定义,确保全部使用双引号,绝不要使用单...[2020/12/21]

Html5+CSS3+EL表达式问题小结

最近一直做关于装修的一个项目,后台功能实现很快,但是前台界面展示确实遇到不少的问题。  问题1、下拉框选择不管用,选中之后没有变。如图 当我选择其他的选项时,不发生任何变化。虽然不是大问题,但是也得找办法解决啊。  解决办法,加上如下代码,解决。 问...[2020/12/21]

CSS3中animation实现流光按钮效果_css3_CSS

在学习c 3的过程中,发现很多看着炫酷的效果,利用c 3的属性能很简单的实现,animation是c 3动画效果中常见的属性。下面让我们了解一下如何利用这个属性做出以下鼠标停在按钮上有流光按钮效果~ 在此之前简单介绍一下animation属性的用法。 animation:[ anima...[2020/12/21]

CSS3 实现的缩略图悬停效果_css3_CSS

CSS3 实现的缩略图悬停效果_css3_CSS

实现效果 实现代码 html <header> <h1>Thumbnail Hover Effect with <em>CSS3</em></h1> </header> <div cl...[2020/12/14]

CSS3简易切割轮播图的实现代码_CSS教程_CSS

实现思路 首先创建一个父容器,用两个无序列表通过弹性布局将父容器分为两栏。 在li里面存放图片通过给左边的li {background: url(''图片地址'') no-repeat; background-size: 200% 100%;}给右边的li{backgrou...[2020/12/14]

html+css3实现的登录界面_css3_CSS

实现效果 先用html搭建个基本框架 <body> <div cla ="container"> <section id="content"> <form action="...[2020/12/14]

详解CSS3+JS完美实现放大镜模式_css3_CSS

大概一年多之前写过一篇文章:仿放大镜效果的几种方式原理解析,当时觉得自己技术可以了、飘了,于是就起了这样牛气哄哄的标题,其实也只算是介绍了c 里的transform和animation两种动画方式 —— 当然,实现的效果也是巨简单的那种…惭愧。 虽然后来随...[2020/12/8]

CSS3实现的渐变幻灯片效果_css3_CSS

实现效果 代码 html <div cla ="c -slideshow"> <figure> <img src="http: themarklee.com/wp-content/upload 2013...[2020/12/8]

CSS3 实现的加载动画_css3_CSS

实现效果 实现代码 <h1>w3xue</h1> <h3>JB51.net</h3> <div cla =''loader loader1''> <div> <div>...[2020/12/8]

CSS3 实现的火焰动画_css3_CSS

实现效果 实现代码 html <div cla ="container"> <div cla ="red flame"></div> <div cla ="orange...[2020/12/8]

CSS3 实现时间轴动画_css3_CSS

实现效果 html <h2>CSS3 Timeline</h2> <p>Please set the $vertical variable to false to see the horizontal version.</p>...[2020/11/23]

CSS3贝塞尔曲线示例:创建链接悬停动画效果_css3_CSS

我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。 我们还将看一下CSS3 Cubic-Bezier(贝塞尔)曲线,它是 CSS 过渡,为弹出框提供了更加流畅的运动,而不是僵化的机械运动。 这是我们最后的效果: 让我们开始...[2020/11/23]

HTML+CSS3+JS 实现的下拉菜单_css3_CSS

HTML+CSS3+JS 实现的下拉菜单_css3_CSS

实现效果 html <div cla ="container"> <h1 cla ="title">Dropdown Menu</h1> <ul> <li cl...[2020/11/23]

纯CSS3实现的井字棋游戏_css3_CSS

运行效果: html .tic-tac-toe - for (var turn = 1; turn <= 9; turn++) - for (var row = 1; row <= 3; row++) - for (var colum...[2020/11/23]

CSS3 实现倒计时效果_css3_CSS

实现效果 html %div.wrapper %div.time-part-wrapper %div.time-part.minutes.tens %div.digit-wrapper %span.digit 0 ...[2020/11/23]

CSS3制作轮播图的一种方法_css3_CSS

轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种 下面是style部分: 这几行都能明白吧 <style> *{margin:0;padding:0;} a{text-decoration:none} li{li...[2019/11/12]

CSS3 边框效果_css3_CSS

什么是CSS# CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或“级联样式表”,简称样式表。 CSS的主要作用# 它主要是用来给HTML网页来设置外观或样式。外观或样式:HTML网页中的文字的大小、颜色...[2019/11/4]

Github上流行的CSS3动画效果库 animate.css

Github上流行的CSS3动画效果库 animate.css

介绍 animate.c 是一堆很酷,有趣且跨浏览器的动画,供你在项目中使用。非常适合强调,主页,滑块和一般的加水效果。 animate.c v4正在进行许多改进和重大更改,包括CSS自定义属性支持(又称CSS变量)和类前缀,以确保安全使用。感兴趣的小伙伴可以上github关注进展以及提供反馈!...[2019/11/4]

CSS3 实现footer 固定在底部(无论页面多高始终在底部)_css3_CSS

CSS3 实现footer 固定在底部(无论页面多高始终在底部)_css3_CSS

前言 把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" />...[2019/10/16]

常用到用css3实现的转换,过渡和动画

为什么要用c 动画替换js动画 导致JavaScript效率低的两大原因:操作DOM和使用页面动画。通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏览器中,因为浏览器可用的内...[2019/10/12]

用css3实现转换过渡和动画效果_css3_CSS

为什么要用c 动画替换js动画   导致JavaScript效率低的两大原因:操作DOM和使用页面动画。 通常我们会通过频繁的操作 DOM的CSS来实现视觉上的动画效果,导致js效率低的两个因素都包括在内了在频繁的操作DOM和CSS时,浏览器会不停的执行重排和重绘,在PC版本的浏...[2019/10/12]

css3 响应式媒体查询的示例代码_css3_CSS

让我们看一下使用媒体查询的更多示例。媒体查询是一种流行的技术,用于向不同的设备提供定制的样式表。为了演示一个简单的示例,我们可以更改不同设备的背景颜色 /* 将body的背景颜色设置为tan */ body { background-color: tan; } /* 在99...[2019/9/26]

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

通过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

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

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

详解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]

62
2
记录数:99 页数:1/212下一页尾页
加载更多
 友情链接: NPS