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

纯CSS3实现鼠标滑过按钮动画第二节_css3_CSS

有了之前的两章,小伙伴们对按钮悬浮动画是否又有了新的认识呢? 前面两章主要是从背景着手,而本章主要是围绕边框动画做效果。并且,本章节(按钮组:有趣的CSS按钮动画,带你进入CSS世界)也就到此结束了,本章结尾会对前3小节进行一定的总结。 下面继续本小节的主题,请先看一下效果示例: ...[2020/7/17]

css3实现小箭头各种图形效果_css3_CSS

c 实现各种图形真是太赞了,再也不用切图了,直接用c 就可以实现。 最常用的就是用c 实现的小三角了 #triangle-up{ display:inline-block; width:0; height:0; border-left:30px solid t...[2020/7/9]

利用div+css3实现一个背景渐变的button按钮的示例代码_HTML/Xhtml

随着目前前端页面的需求不断提升,有些场景需要渐变背景的元素。本文利用div和c 3新属性,实现了一个背景渐变的按钮,具体如下: 1.background: linear-gradient 背景为渐变色属性 2.利用c 3中动画特性animation,实现背景从左至右变化(color_move...[2020/7/8]

CSS3里box-shadow属性的使用方法示例详解_CSS教程_CSS

CSS里面的属性很多,有些属性长时间不用,就容易忘,尤其是那种需要设置多个值的属性。比如:box-shadow,每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用,都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影...[2020/7/6]

基于CSS3的animation属性实现微信拍一拍动画效果_css3_CSS

看到最近流行的微信拍一拍功能,复习下CSS3的animation,所以写下这个盒子晃动的动画,把qq的窗口抖动也加上吧 @-webkit-keyframes shake { 0% { -webkit-transform: translate(2px, 2px...[2020/6/23]

CSS3为背景图设置遮罩并解决遮罩样式继承问题_css3_CSS

CSS3为背景图设置遮罩并解决遮罩样式继承问题_css3_CSS

工作中很多时候需要对图片背景作处理,比如设置通透性,模糊处理等等 但是如果对背景图所在标签直接设置这些效果的话,这些样式会被子标签继承。 例1: 给背景所在标签设置模糊效果,影响到了子标签内的文字 <style> .parent{...[2020/6/22]

CSS3 box-shadow属性实例详解_css3_CSS

CSS3 --添加阴影(盒子阴影的使用) CSS3 - 给div或者文字添加阴影(盒子阴影、文本阴影的使用) CSS3定义了两种阴影:盒子阴影和文本阴影。其中盒子阴影需要IE9及其更新版本,而文本阴影需要IE10及其更新版本。下面分别介绍box-shadow阴影的使用: 1、盒...[2020/6/22]

如何使用css3实现一个类在线直播的队列动画的示例代码_css3_CSS

如何使用css3实现一个类在线直播的队列动画的示例代码_css3_CSS

之前在群里有个朋友问了这样一个问题, 就是如何在 小程序 中实现类似 直播平台 的用户上线时的 队列动画 ? 作为一名前端工程师, 解决方案无非以下2种: 使用 javascript 根据条件来控制元素的样式实现队列动画 用纯 c 3 配合数据驱动模型来实现. 大家...[2020/6/19]

手把手教你20个CSS 快速提升技巧

前言 随着前端开发越来越关注效率:通过选择器的使用和简化代码来快速加载渲染。像Le 、SCSS这样的预处理器在工作的时候,需要绕的路较长,而直接使用c 速度会更快。 这里涵盖了20个c 技巧来帮助你减少重复规则和复写,在布局中标准化样式流程,不仅可以帮助你高效地创建自己的框架,而且可以解决许多常...[2020/6/17]

CSS3中引入多种自定义字体font-face_css3_CSS

今天在HTML中发现了一个问题,提供给我们默认的字体有很多,但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外,其余的都不知道中文字体,如果我们需要用自己喜欢的字体怎么办呢?CSS3中是否可以引入自定义下载的字体呢?如...[2020/6/15]

详解CSS3实现响应式手风琴效果_css3_CSS

最近看了国外大佬用CSS3实现手风琴效果的视频,所以自己学习后写了一下,以博客的形式记录下来,方便自己日后复习,代码结构如下(字体用的是Genericons ): 最终效果如下: 全屏时: 屏幕宽度小于960px时: 下面来看一下页面的基本结构(index.htm...[2020/6/12]

CSS3实现淘宝留白的方法_css3_CSS

CSS3实现淘宝留白的方法_css3_CSS

做一个淘宝的留白: 当你在缩小浏览器页面的时候他的内容区并没有缩小,是留白的变小。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...[2020/6/8]

CSS3实现歌词进度文字颜色填充变化动态效果的思路详解_css3_CSS

播放音乐时,歌词会随歌曲的进度逐渐填充颜色,不是逐字改变颜色,而是从左向右横向逐个像素改变的,也就是说会出现一个字的左右两边是不同颜色的效果。 这个效果通过CSS3可以实现。 实现思路: 1、background填充一个背景颜色,以及要变化的颜色 2、-webkit-back...[2020/6/2]

CSS 3.0 结合video视频实现的创意开幕效果_css3_CSS

CSS 3.0 结合video视频实现的创意开幕效果_css3_CSS

 给大家分享一个用CSS 3.0结合video视频实现的创意开幕,效果如下:  以下是代码实现,欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head&g...[2020/6/2]

利用css3实现进度条效果及动态添加百分比_CSS教程_CSS

项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用c 去实现,优化。 先贴代码: <!DOCTYPE html> <html lang="en"> <...[2020/6/2]

CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解_css3_CSS

windows 下默认的滚动条样式巨丑,项目中又有比较多地方会显示滚动条, 故回头翻了一下CSS3, 还真能不用插件实现自定义滚动条的样式,正合我意 代码如下: /定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸/ ::-webkit-scrollbar { ...[2020/6/1]

css3实现背景模糊的三种方式(小结)_css3_CSS

css3实现背景模糊的三种方式(小结)_css3_CSS

一、普通背景模糊 代码: <Style> html, body { width: 100%; height: 100%; } * { ...[2020/5/18]

css3遮罩层镂空效果的多种实现方法_css3_CSS

本文介绍了的4种实现遮罩层镂空的方法,分享给大家,也给自己留个笔记,具体如下: 先看看效果 【 方法一:截图模拟实现 】 原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上。 优点:原理简单;兼容性好,可以兼容到IE6、IE7;可以同时实现镂空多个。 ...[2020/5/11]

css3的focus-within选择器的使用_css3_CSS

伪元素和伪类 说到这个,我们先回顾一下,伪类选择器和伪元素选择器,老版的浏览器没有严格区分下面 2 种写法。 a:after{} a::after{} 在新的标准中,单冒号(:)用于 CSS3 伪类,双冒号(::)用于 CSS3 伪元素,我们平时开发时可以注意一下,当然大...[2020/5/11]

通过css3的filter滤镜改变png图片的颜色的示例代码_css3_CSS

通过css3的filter滤镜改变png图片的颜色的示例代码_css3_CSS

本方法是通过CSS3滤镜 filter 中的 drop-shadow 将png图片的非透明部分生成任意颜色的投影,然后将原始图片隐藏起来,从而达到改变图片颜色的目的 先看效果图 接下来是代码 <p><strong>原始图标< trong>...[2020/5/7]

CSS3实现渐变背景兼容问题_css3_CSS

我们在做一个渐变背景颜色的时候会用到linear-gradient() 函数用于创建一个线性渐变的 "图像"。它是c 3中的语法,最低兼容IE10 background-image: linear-gradient(to right, #ff9000, #ff500...[2020/5/7]

基于ccs3的timeline时间线实现方法_css3_CSS

在web项目中我们经常要使用时间轴(timeline)控件。本文提供一种基于CSS3的可逐项展开的timeline,在各展开项中可以嵌入文本、图片、视频等元素。运行效果如下: 实现 该控件的实现过程较为简单,主要由test.html文件和timeline.c 文件组成。具体代码如下:...[2020/5/6]

CSS3实现div从下往上滑入滑出效果示例_css3_CSS

CSS3实现div从下往上滑入滑出效果示例_css3_CSS

1,首先需要用的是 CSS3的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素。 2,CSS3 的 transition 动画,这里不做详细介绍 看一下效果图: 点击滑出按钮,元素从底部匀速滑入到页面一定高度;再点击滑入,元素从当前位置匀速滑入期...[2020/4/29]

CSS实现聊天气泡效果_css3_CSS

 一、效果图 京东效果   模拟的效果   二、原理 准备一个高度和宽度为0的盒子 将这个盒子设置一个边框 将边框不需要的地方用 transparent 来代替,需要显示的地方设置对应的颜色 如果需要改变其大小,直接设置边框的宽度...[2020/4/27]

纯CSS3实现移动端展开和收起效果的示例代码_css3_CSS

本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码 <section cla ="block"> <input type="checkbox"&...[2020/4/27]

css3 实现元素弧线运动的示例代码_css3_CSS

如何使用CSS控制元素弧线运动 我们都知道,CSS3的新属性transfrom过渡效果可以实现元素位移、旋转、缩放。结合animation属性,就可以实现元素的动画效果。但是如何通过c 实现元素实现弧线运动呢: 如上图动画效果所示,圆球弧线运动,分析运动: 将小球的运动...[2020/4/24]

CSS3 中filter(滤镜)属性使用详解_css3_CSS

最近在修改内网门户的时候,恰好遇到了需要使用滤镜的地方;刚开始用的是两张图片;鼠标滑过背景变成渐变;图标切换;但是后台配置了图标后;导致鼠标滑过图标不能正常切换;于是就想到了滤镜的效果来处理。所以顺便学习了一下常用的滤镜效果。 使用滤镜: 前言 c 3的滤镜filter属...[2020/4/7]

css3 中translate和transition的使用方法_css3_CSS

translate和transition一直让我觉得,很牛皮很强大,怎么也学不会,其实是自己比较抗拒去了解她,接口看了不到半个小时的文档,大概了解了下,下面是示例,可以下载下来自己运行下试试 <!DOCTYPE html> <html> <head&g...[2020/3/27]

css3媒体查询中device-width和width的区别详解_css3_CSS

1.device-width 定义:定义输出设备的屏幕可见宽度。 不管你的网页是在safari打开还是嵌在某个webview中,device-width都只跟你的设备有关,如果是同一个设备,那么他的值就不会变。 比如iphone6的device-width*device-height为...[2020/3/27]

CSS3 不定高宽垂直水平居中的几种方式_css3_CSS

1、flex布局 .father { display: flex; justify-content: center; align-items: center; } 这种方式兼容性不好 2、position + transform ...[2020/3/27]

浅析CSS3 中的 transition,transform,translate之间区别和作用_css3_CSS

浅析CSS3 中的 transition,transform,translate之间区别和作用_css3_CSS

transform 和 translate transform指变换、变形,是c 3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动...[2020/3/27]

使用 CSS3 中@media 实现网页自适应的示例代码_css3_CSS

如今,电脑显示器的屏幕分辨率向越来越大发展,而手机等移动设备终端的分辨率却不可能大到哪里去。越来越多的网站,开始让自己的页面自适合各种分辨率,在小分辨率下显示基本的内容,在大分辨率下显示全部功能,甚至是分多等级的多版本。 一、CSS2 中的@media c 2里面虽然支持@media属性,...[2020/3/25]

CSS3属性 line-clamp控制文本行数的使用_css3_CSS

说明:限制在一个块元素显示的文本的行数。 -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 为了实现该效果,它需要组合其他外来的WebKit属性。常见结合属性: displ...[2020/3/20]

css3通过scale()、rotate()实现放大、旋转_css3_CSS

一、scale()方法 缩放,指的是“缩小”和“放大”。在CSS3中,我们可以使用scale()方法来将元素根据中心原点进行缩放。 跟translate()方法一样,缩放scale()方法也有3种情况: (1)scaleX(x):元素仅水...[2020/3/20]

div与div之间有空隙的解决方法_心得技巧

当你使用HTML div块与块的中间不能紧密连接 怎么都解决不了时 1、可以在<head></head>中间内容里加一个 * { margin:0; padding:0; } 使所有块与块之间的间距为零 还不与下面的 padding margin ...[2020/3/16]

利用CSS3的3D效果制作正方体_css3_CSS

学会用CSS3的3D效果制作一个正方体,有助于增强我们对3D场景的旋转和位移属性的理解。下面的动态图就是利用3D旋转位移,结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加各种动画效果。 进入主题,以下是使用3D多重变换制作一个正方体的过程。 在此之前需要明...[2020/3/11]

css3 transform导致子元素固定定位变成绝对定位的方法_css3_CSS

 本文介绍了c 3 transform导致子元素固定定位变成绝对定位的方法,分享给大家,也给我自己留个笔记,方便查找。 <!DOCTYPE html> <html> <head> <style> body { ...[2020/3/9]

CSS3颜色值RGBA与渐变色使用介绍_css3_CSS

CSS3之前渐变色图片只能用背景图片 CSS3的渐变色语法可以让我们省去下载图片的开销 并且在改变浏览器分辨率时有更好的效果 颜色值RGBA 我们熟悉的rgb颜色标准,是由r(red)、g(green)、b(blue)三种颜色叠加变化形成各种颜色 取值0~255,或0~100% ...[2020/3/6]

CSS3实现水平居中、垂直居中、水平垂直居中的实例代码_css3_CSS

作为一个前端小猴子,不管是面试的时候还是工作中,我们都会或多或少的遇到“使用c 居中”的效果,今天就写一篇关于c 垂直水平居中的几种方法。 栗子1:从最简单的水平居中开始 margin: 0 auto; 块级元素使用margin: 0 auto;可以在父元素...[2020/2/28]

CSS3实现文字浮雕效果,镂刻效果,火焰文字_CSS教程_CSS

CSS3实现文字浮雕效果,镂刻效果,火焰文字_CSS教程_CSS

要做出这个效果,首先必须知道c 的一个属性: text-shadow:水平位置 垂直距离 模糊距离 阴影颜色; 水平位置和垂直位置的值可以为负值 可以使用两组值来实现凹凸效果,中间用逗号“,”隔开 CSS3实现文字浮雕效果,镂刻效果,火焰文字 &...[2020/2/28]

色彩丰富的界面设计欣赏

我们经常见到一些色彩干净简洁的界面设计,像这种色彩多且丰富的界面却比较少见。不是它不够主流,而是会用好配色的人太少。设计新手在学设计的时候经常会听到“颜色不要超过3种”这样的话。这句话本身是没错的,但对于设计高手来说,尽可以破除这个规则。因为他们善于把颜色玩弄于鼓...[2020/1/6]

看完这些 CSS 的技巧,我才知道什么叫做交互,UED 都自愧不如

看完这些 CSS 的技巧,我才知道什么叫做交互,UED 都自愧不如

前言 本文是笔者写 CSS 时常用的套路。不论效果再怎么华丽,万变不离其宗。 之前发的CSS 技巧[1]大部分都是依照本文的套路来写的 有人问我为什么我能想出这么多的动画?笔者阅番百部,对常用的动画技巧了如指掌,同样那些酷炫的网站只要细心观察,也会给笔者带来很多设计上的灵感。 一言以蔽之:只有多欣赏...[2020/1/3]

一文解读雪碧图 (转) - IT-Evan

前言      做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢?  简介   官方解释:   CSS雪碧图即CSS Sprite(精灵),在国内很多人叫c 精灵,是一种网页图片应用处理方式。它允许...[2019/11/29]

CSS3 新增选择器的实例_css3_CSS

结构(位置)伪类选择器(CSS3) :first-child :选取属于其父元素的首个子元素的指定选择器 :last-child :选取属于其父元素的最后一个子元素的指定选择器 :nth-child(n) : 匹配属于其父元素的第 N 个子元素,不论元素的类型 ...[2019/11/14]

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

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

前言 把 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]

62
2
记录数:119 页数:1/3123下一页尾页
加载更多
 友情链接: NPS  问卷模板