CSS
  • css如何设置透明度

    在css中,可以使用rgba()函数来设置透明度,该函数使用红(R)、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色,语法格式“color:rgba(R,G,B,A);”或“background:rgba(R,G,B,A);”。本文环境:windows10系统、css3版本,thinkpad t480电脑。css设置透明度的方法:css rgba()设置颜色透明度语法:rgba(R,G,B,A);RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展,带有一个 alpha 通道 - 它规定了对象的不透明度。rgba()里的值的介绍:R:红色值。正

    2021-06-05 0 0 0 0
  • 收藏!各大网站CSS代码初始化集合

    各大网站CSS代码初始化集合css代码之所以初始化,是因为能尽量减少 各浏览器之间的兼容性问题!腾讯QQ官网 样式初始化body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
    body{font:12px宋体,ArialNarrow,HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
    a{color:#2d374b;text-decoration:none}
    a:hover{color:#cd0200;text-decoration:underline}
    em{font-style:normal}
    li{list-style:none}
    img{border:0;vertical-align:middle}
    table{border-collapse:co

    2021-04-20 0 0 0 0
  • 常用选择器有哪些

    常用选择器有:1、标签选择器;2、类选择器;3、ID选择器;4、全局选择器;5、组合选择器;6、继承选择器;7、伪类选择器。本文操作环境:windows10系统、css 3、thinkpad t490电脑。第一种是标签选择器,也成为元素选择器。标签选择器的基本形式如下:tagName{property:value},其中tagName是标签名称,property是css的属性。第二种是类选择器 ,类选择器用来为一系列标签定义相同的呈现方式,常用的语法是 .classValue{property:value}。其中classValue是类选择器的名称,这是由css编写者自己命名。第三种是ID选择器,ID选择器定义的是某

    2021-03-21 0 0 0 0
  • 纯CSS如何实现火焰动画效果?(实例介绍)

    本篇文章给大家介绍一下使用纯CSS实现火焰动画效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。嗯,长什么样子?在 CodePen 上输入关键字CSS Fire,能找到这样的:或者这样的:我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子:如何实现嗯,我们需要使用filter+mix-blend-mode的组合来完成。很多 CSS 华而不实的效果都是filter+mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。如上图,整个蜡烛的骨

    2021-01-19 0 0 0 0
  • css3如何实现进度条动画效果?(代码示例)

    项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。先贴代码:!DOCTYPEhtmlhtmlheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0metahttp-equiv=X-UA-Compatiblecontent=ie=edgetitleDocument/titlestyletype=text/css*{margin:0;padding:0}.box{width:100px;height:10px;border-radius:10px;background:#999;margin:100pxauto;border:1pxsolid#ff6780;}.child{position:relative;height:100%;border-radius:inherit;}

    2021-01-19 0 0 0 0
  • 深入研究CSS :placeholder-shown伪类

    一般我们常见placeholder伪类选择器用来修改默认样式及文案,忽然发现placeholder-shown伪类选择器,比较官方的解释是CSS伪类表示任何显示占位符文本的form元素。简单来说就是当输入框的placeholder内容显示的时候,输入框干嘛干嘛。【相关推荐:css在线手册】兼容性如下,在移动端没什么问题placeholder-show是如何工作的?:placeholder-shownCSS 伪类 在input或textarea元素显示 placeholder text 时生效,简单的说就是 placeholder 有值才生效,如下所示://html
    inputplaceholder=placeholdertext/
    textareaplaceholder=placeholder

    2020-11-22 0 0 0 0
  • 纯CSS如何实现火焰动画效果?(实例介绍)

    本篇文章给大家介绍一下使用纯CSS实现火焰动画效果。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。正文从下面开始。今天的小技巧是使用纯 CSS 生成火焰,逼真一点的火焰。嗯,长什么样子?在 CodePen 上输入关键字CSS Fire,能找到这样的:或者这样的:我们希望,仅仅使用 CSS ,效果能再更进一步吗?能不能是这样子:如何实现嗯,我们需要使用filter+mix-blend-mode的组合来完成。很多 CSS 华而不实的效果都是filter+mix-blend-mode,很有意思,但是业务中根本用不上,当然多了解了解总没坏处。如上图,整个蜡烛的骨

    2020-11-17 0 0 0 0
  • css3如何实现进度条动画效果?(代码示例)

    项目过程中,开始使用了js的requestAnimationFrame方法实现进度条,但是在数据超级多的时候非常影响性能,如此改用css去实现,优化。先贴代码:!DOCTYPEhtmlhtmlheadmetacharset=UTF-8metaname=viewportcontent=width=device-width,initial-scale=1.0metahttp-equiv=X-UA-Compatiblecontent=ie=edgetitleDocument/titlestyletype=text/css*{margin:0;padding:0}.box{width:100px;height:10px;border-radius:10px;background:#999;margin:100pxauto;border:1pxsolid#ff6780;}.child{position:relative;height:100%;border-radius:inherit;}

    2020-11-17 0 0 0 0
  • 优化滚动的小技巧:使用sroll-snap-type!!

    根据CSS Scroll Snap Module Level 1规范,CSS 新增了一批能够控制滚动的属性,让滚动能够在仅仅通过 CSS 的控制下,得到许多原本需要 JS 脚本介入才能实现的美好交互。Tips:本文截的一些 Gif 图涉及容器滚动,效果不是很好,可以点进 Demo 里实际感受下。sroll-snap-type首先看看sroll-snap-type可能算得上是新的滚动规范里面最核心的一个属性样式。scroll-snap-type:属性定义在滚动容器中的一个临时点(snap point)如何被严格的执行。光看定义有点难理解,简单而言,这个属性规定了一个容器是否对内部滚动动作进行捕捉,并且规定了如

    2020-11-16 0 0 0 0
  • CSS如何实现酷炫的充电动画效果?(代码示例)

    本篇文章给大家介绍一下巧用 CSS 实现酷炫充电动画效果的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。循序渐进,看看只使用 CSS ,可以鼓捣出什么样的充电动画效果。画个电池当然,电池充电,首先得用 CSS 画一个电池,这个不难,随便整一个:欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。方法很多,代码也很简单,直接看效果:有内味了,如果要求不高,这个勉强也就能够交差了。通过蓝色渐变表示电量,通过色块的位移动画实现充电的动画。但是总感

    2020-11-15 0 0 0 0
共有10页首页上一页123456789下一页尾页
ots网络logo

OTS网络安全门户主要提供网络信息安全教程、文章、工具,让更多的小伙伴加入我们的社区一起学习。

技术支持: 建站ABC | 管理登录