css

  • CSS 新特性 contain控制页面的重绘与重排问题

    在介绍新的 CSS 属性 contain 之前,需要读者已经知道什么是页面的重绘与重排。 发现之前已经描述过很多次了,可以看看这个提高 CSS 动画性能的正确姿势[1]。 OK,下面进入本文正题, contain 为何? contain 属性允许我们指定特定的 DOM 元素和它的子元素,让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排,而不必每次都针对整个页面。 The contain property allows an author to indicate that an element and its contents are, as much…

    2021年6月18日
    0 1 0
  • Css预编语言及区别详解

    一、是什么 Css 作为一门标记性语言,语法相对简单,对使用者的要求较低,但同时也带来一些问题 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 Css 编写经验而很难写出组织良好且易于维护的 Css 代码 Css 预处理器便是针对上述问题的解决方案 预处理语言 扩充了 Css 语言,增加了诸如变量、混合(mixin)、函数等功能,让 Css 更易维护、方便 本质上,预处理是 Css 的超集 包含一套自定义的语法及一个解析器,根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 Css 文件 二、有哪些 Css 预编…

    2021年6月16日
    0 1 0
  • 5分钟实现Canvas鼠标跟随动画背景

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,会让整个网站变得与众不同! 下面我会直击重点,用最短的时间,使用 Canvas 制作 鼠标跟随动画 如何制作动画 常用的绘图动画的方式有以下几种: CSS3 SVG Canvas WebGL 让我们先分析分析这些方法的优劣性 CSS3 通过css3的关键帧等方式实现动画效果,看起来好像挺实用,但这样增加了一个没有意义的DOM节点,不符合语义化编程规范 SVG、…

    HTML5 2021年5月27日
    0 4 0
  • 详解三种方式实现平滑滚动页面到顶部的功能

    背景 最近开发公司的公众号H5,做了一个点击icon滚动到顶部的功能。实现功能比较简单,直接调用window.scrollTo(0, 0),一行代码完成。但是作为一个攻城狮,怎么可能对自己要求这么低,所以我给自己加了个需求,实现 平滑滚动页面到顶部 的功能。经过调研和查看文档,有了以下三种方案。 1.使用CSS 完成功能的最高境界,只用CSS就搞定。代码如下: html { scroll-behavior: smooth; } 该样式的作用是为有滚动条的元素指定一个滚动的行为,但是只有在当用户手动导航或者 CSSOM scrolling API触发滚动的时候生效,不影响用户行为产生的滚动。就在…

    HTML5 2021年5月24日
    0 2 0
  • 记住!不要移除WordPress的dashicons.min.css文件

    下面由WordPress教程栏目给大家介绍不要移除WordPress的dashicons.min.css文件,希望对需要的朋友有所帮助! 不要移除WordPress的dashicons.min.css文件 类似于代码重构,不要轻易移除看似“没用”的代码。轻易更改不熟悉的东西,可能会引入更多的问题,从而更加折腾。本人前几天便趟了一个大坑,折腾一圈才发现眼前看到的“没用”不是真正的没用。 前几天用PageSpeed Insights测试了一下站点的加载速度。根据测试结果,除了移除没用的dashicons.min.css,暂无其他可优化的空间。 为了评分更高,用户的加载速度更快,决定把这个“没用”的…

    2021年5月22日
    0 5 0
  • html5+css如何实现中间大两头小的轮播效果

    国际惯例,先上效果 好了,话不多说,上去就是一顿撸。 css: <style> *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; overflow: hidden; /* height: 400px; */ background: red; position: relative; } .box{width: 125%; height: auto; display: flex; align-items: center; position: relative; left: 0; } .box li{ width: 20%…

    HTML5 2021年5月21日
    0 4 0
  • HTML5实现签到 功能

    Introduce(介绍) 用户签到的H5例子(css+jquery,无图片),由于网上找的的用户签到例子都不好,要不就是好多图片组成的,要不就大量冗余代码,所以特意做了个签到界面(移动端)。 User sign sample page for mobile using h5 which only use css + jquery + html. Demo https://fallstar0.github.io/SignSample/ Shot(截图) 一些关键的地方 这个功能的编写思路是,先构建日期和签到相关数据,然后从服务端获取数据,并对原有数据进行更改,最后进行渲染。 这样子很好的摆脱了…

    HTML5 2021年5月21日
    0 4 0
  • HTML5实现签到 功能

    Introduce(介绍) 用户签到的H5例子(css+jquery,无图片),由于网上找的的用户签到例子都不好,要不就是好多图片组成的,要不就大量冗余代码,所以特意做了个签到界面(移动端)。 User sign sample page for mobile using h5 which only use css + jquery + html. Demo https://fallstar0.github.io/SignSample/ Shot(截图) 一些关键的地方 这个功能的编写思路是,先构建日期和签到相关数据,然后从服务端获取数据,并对原有数据进行更改,最后进行渲染。 这样子很好的摆脱了…

    HTML5 2021年5月20日
    0 5 0
  • 详解HTML5将footer置于页面最底部的方法(CSS+JS)

    本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS),分享给大家,具体如下: JavaScript: <script type="text/javascript"> $(function(){ function footerPosition(){ $("footer").removeClass("fixed-bottom"); //网页正文全文高度 var contentHeight = document.body.scrollHeight, //可视窗口高度,不包括浏览器顶部工具栏 winHeigh…

    HTML5 2021年5月20日
    0 22 0
  • 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    之前在一个移动端的抽奖页面中,在抽奖结果的展示窗口需要弹幕轮播显示,之前踩过一些小坑,现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canvas实现弹幕 canva弹幕的扩展功能 1. css3实现乞丐版的弹幕 (1)如何通过css3实现弹幕 首先来看如何通过css的方法实现一个最简单的弹幕: 首先在html中定义一条弹幕的dom结构: <div class="block">我是弹幕</div> 弹幕的移动可以通过移动这个block来实现,以从右向左移动的弹幕为例,弹幕的初始位置在容器的最左侧且贴边隐藏(弹幕的…

    HTML5 2021年5月19日
    0 4 0
  • 基于HTML5+CSS3实现简单的时钟效果

    目的: 利用html5,css实现钟摆效果 知识点: 1) 利用position/left/top和calc()实现元素的水平和垂直居中; 2) 利用CSS3的animation/transform/transform-origin属性定义动画; 3) 利用transform-origin实现旋转原点的圆心调整 废话不多说了,直接看代码吧,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <…

    HTML5 2021年5月12日
    0 5 0
  • html5教你做炫酷的碎片式图片切换 (canvas)

    前言 老规矩,先上源码。图片区域是可以点击的,动画会从点击的位置开始发生。 本来这个效果是我3年前做的,只是当是是用无数个 div 标签完成的,性能比较成问题,在移动端完全跑不动。最近心血来潮想学习一个做 CSS 效果很厉害的大神用纯 CSS 实现,无奈功力不够只能放弃,最终选择用 canvas 来完成了。 准备工作 1. 首先准备相同尺寸的图片若干张,本例中图片尺寸均为 1920 * 1080(注意:这里的尺寸是原始图片的尺寸,不是通过 css 显示在页面上的尺寸)。为方便之后的使用,将这些图片加入 HTML 中一隐藏元素里备用。 <div class=’hide’> <…

    HTML5 2021年5月12日
    0 5 0
  • HTML5+css3:3D旋转木马效果相册

    这篇博客的目的是因为上篇HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果图:嘿嘿,我把大学毕业时的一些照片,做成旋转木马,绕着我大文理旋转,不忘母校的培育之恩~ 1、perspective perspective属性包括两个属性:none和具有单位的长度值。 其中perspective属性的默认值为none,表示无限的角度来看3D物体,但看上去是平的。另一个值<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>…

    HTML5 2021年5月9日
    0 4 0
  • HTML5+CSS3:3D展示商品信息示例

    强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~ 首先,先教大家利用CSS3制作一个正方体: 在木有CSS前,这样的立方体,应该很难制作吧~嗯,我觉得很难~ html: <body> <div class="wapper"> <div class="cube">…

    HTML5 2021年5月8日
    0 3 0
  • HTML5+CSS3:3D展示商品信息示例

    强化下perspective和transform:translateZ的用法。传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一下:这个创意不是我想的,哈~模仿别人的,创意应该是w3cplus上的。当然了,重点是教大家如何做,就当高仿了~ 首先,先教大家利用CSS3制作一个正方体: 在木有CSS前,这样的立方体,应该很难制作吧~嗯,我觉得很难~ html: <body> <div class="wapper"> <div class="cube">…

    HTML5 2021年5月8日
    0 5 0