CSS
文章平均质量分 58
CSS相关文章
酸霉汤
一只菜鸟
展开
-
环形进度条-圆锥渐变
关键:圆锥渐变window.getComputedStyle()cssObj.getPropertyValue(“key”)dom.style.setProperty(“key”,value)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.原创 2021-09-27 19:48:36 · 85 阅读 · 0 评论 -
CSS鼠标悬浮盒子边框加载效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>边框原创 2021-07-22 18:51:08 · 768 阅读 · 0 评论 -
CSS实现图片翻转效果
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片翻转测试</title> <link rel="stylesheet" href="css/main.css"></head&...原创 2020-02-16 17:36:50 · 861 阅读 · 1 评论 -
只使用HTML和CSS实现点亮五角星效果
1.点击一个亮一个思路:使用链接标签a包裹li,设置li的ID属性,让父级a标签的href属性值为l子级li的ID(锚点),点击父级a标签触发子级li标签的锚点,再结合:target伪类进行背景图片替换即可实现效果。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>点击亮星星</title> <style type="text/css"&原创 2021-07-07 09:50:01 · 1220 阅读 · 0 评论 -
Flex弹性盒子布局
1. 父容器相关属性flex-direction 属性定义父容器主轴方向(即子项目的排列方向)。有四个可能的取值:• row(默认值):主轴为水平方向,起点在左端。• row-reverse:主轴为水平方向,起点在右端。• column:主轴为垂直方向,起点在上沿。• column-reverse:主轴为垂直方向,起点在下沿。flex-wrap 属性默认情况下,项目都排在一条线(又...原创 2020-02-23 20:12:09 · 132 阅读 · 0 评论 -
分享一个网页跳转过渡特效
说明过渡动画截图源码<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,height=dev...原创 2020-04-03 00:22:48 · 1617 阅读 · 0 评论