随笔分类 - 06-02. CSS 实现特效，没啥用但很有趣
对 css 各属性的练习。
摘要：<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>hk</title> </head> <style> *{ padding: 0; margin: 0; } </style> <body> <canvas i
阅读全文
摘要：介绍： 这篇文章，并没有完整的实现翻页时钟、日历，只写了如何实现一个可连续翻页的 css 效果。在此基础上实现翻页时钟、日历还不是手到擒来。 Demo： 上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <me
阅读全文
摘要：先看效果： 联想一下：如果A面放一张照片，B面是一段介绍和链接，是不是很有意思？多张照片组成的照片墙，是不是很浪漫(ˉ▽ˉ ) 再上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equi
阅读全文
摘要：效果图 js部分 // 文字动态渲染 import React, { useEffect, useState } from "react"; import styles from './index.less'; import PropTypes from 'prop-types'; const te
阅读全文
摘要：自己写一个纯 css 有意思的边框真的很难，这篇文章的边框，其实我是不满意的，但通过它来学习 css ，还是有一定作用的。 效果图： 特点：支持圆角， 问题： 调整宽窄的时候，都要调整运动函数，比较麻烦。 说真的，不好看，也不酷 html <div className={styles.father_
阅读全文
摘要：SpinKit – CSS loaders 这一系列的 loading 效果，都有个共同的特点，利用好 animation-delay 动画延迟。效果就出来 效果： 查看更多效果，请点击原文链接：https://www.runoob.com/w3cnote/free-html5-css3-loade
阅读全文
摘要：前言 很多开源的 UI 组件库，都有 进度条 ，直接使用就行，学习成本很低。往细了扣，他们能达到的效果和实现方式也各有不同， 比如：Echarts 用 <canvas/> ，ice-Design 用 <svg/>，Ant Design 用 <div/>。 看这篇文章可以干什么： 一. 可以学习，cs
阅读全文
摘要：效果： css部分： .taiji{ position: relative; width: 300px; height: 300px; margin: 100px auto; border-radius: 50%; border-width: 1px; border-style: solid; bo
阅读全文
posted @ 2020-08-03 15:05
真的想不出来
摘要：地址： https://juejin.im/post/5e070cd9f265da33f8653f00
阅读全文
摘要：1 . * 常规写法 <label><span style="color:red;">* </span>用户名 : </label> <input type="text" value=""/> 1.1 . * CSS写法(更简洁方便 , 而且便于统一调整样式) <style> label.xrequ
阅读全文
摘要：轮播效果： DOM部分： <div id="banner"> <ul> <li><img src="./images/banner-1.jpg" alt=""></li> <li><img src="./images/banner-2.jpg" alt=""></li> <li><img src="
阅读全文
浙公网安备 33010602011771号