首页 CSS

CSS 第4页

  • 浅谈css position absolute相对于父元素的设置方式

    浅谈css position absolute相对于父元素的设置方式

    大家知道css的position absolute默认是根据document来设置的,比如position:absolute后设置left:0;top:0这时候元素会显示到页面的左上角。 有时候我们需要在父元素的容器内设置相对的绝对位置 要做到这一点需要把父元素的position属性设置为relative,设置为relative之后不设置left和top属性,这时候父元素虽然是relative的,但是还是在原来位置。 然后把子元素的位置position设置为absolute的,并设置其left,top,righ...

    CSS 2020-03-27 12 0
  • css link与@import区别详解

    css link与@import区别详解

    如何在html中添加css? 在html中设置css共有三种方式,分别是: 行内式 内嵌式 导入式-link 导入式-@import 1.行内式。即在html标签中的style属性中设置css,值得注意的是css代码的名值对儿用冒号:来连接,用分号分离不同的css样式。这种方式虽然便于观看与调试,但是它违背了结构与表现相分离的原则,我们不推荐使用。但是,按照加载速度来说,这是三种方式中最快的一种,不信你可以看下新浪、网易、QQ、搜狐等门户站,内容页大部分都把CSS...

    CSS 2020-03-27 9 0
  • CSS3 实现footer 固定在底部(无论页面多高始终在底部)

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

    前言 把 footer 区固定在底部,无论页面高度多宽,它始终在底部不会变,就像移动端的菜单一样。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>document</title> <!-- css --> <style> #demo{ position: fixed; left:...

    CSS 2020-03-27 10 0
  • 使用CSS3实现SVG路径描边动画效果入门教程

    使用CSS3实现SVG路径描边动画效果入门教程

    不依赖javascript,直接使用纯css实现 svg 的描边绘制动画效果,效果演示动画。 基础知识: SVG中有个比较重要的属性分支 stroke ,中文软件中称为“描边”。和stroke相关的属性还有下面这些: 1、 stroke 表示描边颜色。表示颜色的名字不是stroke-color,只是单纯的stroke。它的值官方称为“paint”,可选值的类型包括 none 、 currentColor 、 <color> 。 no...

    CSS 2020-03-27 11 0
  • CSS实现 Google Material Design 文本输入框风格(推荐)

    CSS实现 Google Material Design 文本输入框风格(推荐)

    大家好,今天想要跟大家分享如何使用纯CSS来实现 Google Material Design 文本输入框的风格。 虽然今天我们有很多框架可以帮我们实现这些风格,不过通过学习在底层是如何使用纯CSS实现的原理,可以加强我们将来需要根据业务需求定制化这些框架组件的能力。 Demo请看这里 :点我看Demo 【CodePen】 最终效果图: 仅在Chrome浏览器上面测试过。如果大家发现其他浏览器有问题,欢迎大家提供修改方法,一起学习进步! 开始动手实现 首先,我们先创建如下的HTML: &l...

    CSS 2020-03-27 9 0
  • 使用CSS实现图片帧动画与曲线运动

    使用CSS实现图片帧动画与曲线运动

    所有动画的基本原理都是:在短时间内连续依次展示对应的图片,这样在视觉上看起来就是'动'的了。 本文主要来说一说第4点和第5点。 图片帧动画 当我们要实现的动画效果比较复杂,而且开发排期比较紧的情况下,用一张gif动图来实现动画是成本最低,效果也不错的一种方案。比如下面这种动画效果: 可是如果我们想让动效在某个时候暂停,隔一段时间后,再从断点开始继续播放动效,用gif图就实现不了了。 gif图的动效是没有办法暂停的 。这个时候,可以考虑采用图片帧动画。 图片帧动画可以看做是:把gif图的原理在前端用代码...

    CSS 2020-03-27 10 0
  • 纯css写一个大太阳的天气图标的方法示例

    纯css写一个大太阳的天气图标的方法示例

    效果 效果图如下 实现思路 div实现太阳的一条矩形光影 before伪元素制作另一条光影矩形,和已有的转变90° after伪元素画个圆实现太阳样式 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写太阳的一条光影矩形的样式。 <div class="container"> <div class="sunny"></div> <...

    CSS 2020-03-27 10 0
  • css3进阶之less实现星空动画的示例代码

    css3进阶之less实现星空动画的示例代码

    本文介绍了css3进阶之less实现星空动画的示例代码,分享给大家,具体如下: 效果动图如下: 预览链接和代码在我的codepen: https://codepen.io/lio-mengxiang/pen/YzKrEde 知识点预览 这篇文章的 less技巧 + css技巧 知识点包括: less如何写循环 less里如何使用js表达式 css3属性: box-shadow如何生成成百上千的星星 css3属性: background: radial-grad...

    CSS 2020-03-27 10 0
  • css3 伪类选择器快速复习小结

    css3 伪类选择器快速复习小结

    前言 如果说 css 作为前端开发的基本功, 那么 "选择器" 就是基础中的基础. 如果你在复写或者学习这些容易令人混淆的选择器, 那么你就来对地方了, 我的老伙计. 本篇文章会直接了当的比较它们的特性, 帮助你快速的掌握它们: first-child last-child first-of-type last-of-type only-child only-of-type nth-child nth-las...

    CSS 2020-03-27 10 0
  • CSS3 @media的基本用法总结

    CSS3 @media的基本用法总结

    //语法: @media mediatype and | not | only (media feature) { css-code; } //也可以针对不同的媒体使用不同的stylesheets: <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css"> 一、首先是<meta>标...

    CSS 2020-03-27 8 0
  • 纯css实现乌云密布的天气图标效果

    纯css实现乌云密布的天气图标效果

    效果 效果如下 ​ 实现思路 使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影 增加动画 dom结构 用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写乌云的样式。 <div class="container"> <div class="cloudy"></div> </...

    CSS 2020-03-27 9 0
  • css简单动画之transition属性详解

    css简单动画之transition属性详解

    一、对transition属性的认识 1、transition 属性是一个简写属性,可用于设置四个过渡属性: transition-property 过渡效果的 CSS 属性的名称(height、width、opacity等)。 transition-duration 完成过渡效果需要时间。 transition-timing-function 规定速度效果的速度曲线。 transition-delay 过渡效果何时开始(延迟时间)。 注:如果 transition-duration属性时长为 0,...

    CSS 2020-03-27 10 0
  • css 不定宽高的元素居中布局解决方案

    css 不定宽高的元素居中布局解决方案

    1. 水平居中 公共代码: html: <div class="parent"> parent <br> <div class="child"> child </div> </div> css: html, body { margin: 0; width: 100%; height: 100%;...

    CSS 2020-03-27 11 0
  • CSS实现雨滴动画效果的实例代码

    CSS实现雨滴动画效果的实例代码

    玻璃窗 今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; background: url("https://cn.bing.com/...

    CSS 2020-03-27 11 0
  • CSS自适应布局实现子元素项目整体居中,内部项目左对齐

    CSS自适应布局实现子元素项目整体居中,内部项目左对齐

    日常工作时,我们可能遇到这样一个布局:一个父元素框框(随着浏览器大小自适应宽度)里面有许多按钮,然后这些按钮(宽度固定)的整体需要在父元素内居中对齐,而按钮整体的内容又是从左往右排列。这里提供一个解决方法,示例如下: 有如下代码: <div class="wrap"> <button class="btn">1</button> <button class="btn">2<...

    CSS 2020-03-27 11 0