CSS

我用 CSS3 实现了一个超炫的 3D 加载动画

今天给大家带来一个非常炫酷的CSS3加载Loading动画,它的特别之处在于,整个Loading动画呈现出了3D的视觉效果。这个Loading加载动画由12个3D圆柱体围成一个椭圆形,同时这12个圆柱体依次波浪式地起伏,从而传递给用户“正在加载”的信息。 效果预览 代码实现 HTML代码 HTML代 ... »

Amazing!巧用 CSS 视差实现酷炫交互动效

本文将介绍利用 CSS 实现滚动视差效果的一个小技巧,并且,利用这个技巧来制作一些有意思的交互特效。 关于使用 CSS 实现滚动视差效果,在之前有一篇文章详细描述过具体方案 - CSS 实现视差效果,感兴趣的同学可以先看看这篇文章。 这里,会运用上这样一种纯 CSS 的视差技巧: 使用 transf ... »

纯CSS制作简洁带提示的导航

代码简介:纯CSS制作简洁带提示的导航,很实用,代码也比价少。代码内容:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona »

webdm

SVG 和 CSS3 实现一个超酷爱心 Like 按钮

在现代网页中,我们经常可以在一些文章、视频和图片页面上找到”Like”按钮,并且通过点击该按钮来表示自己对该内容的喜欢或者不喜欢。大部分”Like”按钮是纯文本按钮或者图片按钮,如果你想让它们具有特别的动画特效,那么我们就需要用到CSS3或者JavaScript了。本文给大家带来一个带有爱心散列动画 ... »

2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day03

3D 位移:translate3d(x, y, z),3D 旋转:rotate3d(x, y, z),透视:perspctive,3D呈现 transfrom-style,3D 移动 translate3d,3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向,就是 z 轴方向,transf... ... »

css常见知识点总结

CSS 中可继承与不可继承属性有哪些 可继承: 字体系列 font-family font-weight font-size 文本系列 color text-align line-height 可见系列 如 visibility 由于属性太多,这里只列举常见的可继承的属性 display 的属性值及 ... »

luhu

性能优化之html、css、js三者的加载顺序

前言 我们知道一个页面通常由,html,css,js三部分组成,一般我们会把css文件放在head头部加载,而js文件则放在页面的最底部加载,想要知道为什么大家都会不约而同的按照这个标准进行构建页面,必须先得了解页面的加载过程。(当然以现在的技术你也可以不按这个标准,下面会有讲到js的异步加载问题) ... »

songyao666

css3中-moz、-ms、-webkit,-o分别代表的意思

这种方式在业界上统称:识别码、前缀 //-ms代表【ie】内核识别码 //-moz代表火狐【firefox】内核识别码 //-webkit代表谷歌【chrome】/苹果【safari】内核识别码 // »

fps2tao

如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?

在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景。本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用方法以及代码 具体实现效果展示如下: 1.二栏布局-flex弹性布局 <!-- flex弹性布局 - ... »

zhangzuying css

CSS布局奇淫技巧之-高度自适应 - 无双

何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容。高度自适应不像宽度自适应那样简单,在 »

2050

css padding和overflow

padding:10px 5px 15px 20px; 上右下左 padding:10px 5px 15px; 上 左右 下 padding:10px 5px; 上下 左右 padding:10px; 上下左右 #Css overflow overflow 属性规定当内容溢出元素框时发生的事情。 | ... »

CSS布局奇淫巧计之-强大的负边距

css中的负边距(negative margin)是布局中的一个常用技巧,只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距,所以掌握它的用法对于前端的同学来说,那是必须的。 »

andyZhang0511

html导入css和js

&lt;link rel=&quot;stylesheet&quot; href=&quot;/static/bootstrap/css/bootstrap.min.css&quot;&gt;&lt; »

hyhyhy

一道有意思的 CSS 面试题,FizzBu​​zz ~

FizzBu​​zz 是一道很有意思的题目。我们来看看题目: 如果遇见了 3 的倍数要说 Fizz,5 的倍数就说 Buzz,如果即是 3 的倍数又是 5 的倍数就说 FizzBuzz。 如果是在一些编程语言中,这是一道比较初级的题目,当然,稍微转换一下,我们就可以把它转换成一道有关 CSS 选择器 ... »

css--BFC是什么,有什么用,怎么用?

前言 作为前端开发人员或者学生,你一定知道BFC这个关键词,但是你是否具体了解过什么是BFC?BFC有什么用?BFC怎么用些问题呢?本文就来总结一下相关的知识点,希望对阅读到的小伙伴在面试、学习、开发中有所帮助。 正文 1、什么是BFC 首先来看下下面的代码段1: <style> .wrapDiv ... »

css网站导航-菜单

一个简单的网站导航效果: 效果案例:查看演示 css: body: js: »

hjlost