![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 64
勤学daydayup
good good study, day day up
展开
-
SVG动画的简单应用
本文主要介绍利用stroke-dasharray和stroke-dashoffset实现svg动画对svg基础不熟悉的同学可以先看这里https://juejin.cn/post/6844903589807128590svg动画基础stroke-dasharray这个属性是用来定义点划线(虚线)先来看下效果 <svg width="100" height="100"> <path d="M2 2 L98 2" stroke="pink" stroke-widt原创 2021-07-25 15:30:37 · 257 阅读 · 0 评论 -
CSS小技巧---线性渐变linear-gradient/径向渐变radial-gradient
本文主要介绍linear-gradient一些不太一样的玩法普通渐变-最常见的用法是从字面意思理解,实现一个渐变背景,如下图效果background: linear-gradient(to right, #30e8bf, #ff8235);无渐变,突变效果调整色标位置,实现两个非渐变效果background: linear-gradient(to right, #30e8bf 50%, #ff8235 50%);参数解释,颜色后面跟一个百分比,表示当前颜色的过渡位置,如果前后两个颜色的过.原创 2021-07-18 16:27:30 · 21679 阅读 · 0 评论 -
CSS小技巧---box-shadow
本文介绍使用box-shadow实现一下几种效果实现一个边框多重投影模拟多层边框首先回顾一下box-shadow语法box-shadow: h-shadow v-shadow blur spread color inset;属性说明h-shadow必需的。水平阴影的位置。允许负值v-shadow必需的。垂直阴影的位置。允许负值blur可选。模糊距离spread可选。阴影的大小,扩张半径color可选。阴影的颜色。inset可选。.原创 2021-07-18 11:56:40 · 208 阅读 · 0 评论 -
CSS小技巧---半透明边框
问:如何制作一个半透明的边框,显示父级元素的背景?答:其关键时使用background-clip属性background-clip默认为border-box,即元素背景会延伸到边框下,此时设置半透明边框,显示的是元素自身的背景将其设置为padding-box或者content-box后,元素自身的背景不会延伸到边框下,此时半透明边框显示的是父级元素的背景看下面动图效果,一目了然<!DOCTYPE html><html lang="en"> <head>.原创 2021-07-18 11:09:32 · 794 阅读 · 0 评论 -
CSS小技巧---display显隐动画效果
今天记录一个css小技巧既不用setTimeout也不用监听transitioned事件实现display:block/none的显示隐藏动画准备工作dom元素和css准备,先实现一个简单的弹窗样式和一个控制按钮,觉得繁琐的直接跳到第1步看核心代码,不心急吃热豆腐的可以跟着我一起回顾弹窗的垂直居中css实现方式 <style> .content { /* 四行css实现垂直居中 */ position: relative; top:.原创 2021-07-16 23:28:47 · 8743 阅读 · 1 评论 -
元素始终保持水平和垂直居中
实现此功能非常简单,只需要分两步走父元素display:table-cell;,同时设置vertical-algin:middle;子元素设置margin:0 auto; <!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="t原创 2016-11-21 21:30:36 · 782 阅读 · 0 评论