css
AdleyTales
这个作者很懒,什么都没留下…
展开
-
css设置图片body全铺满,整个背景都是一张图片的完美写法
body { background-image: url('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); background-repeat: no-repeat; background-posit...原创 2021-01-12 19:00:24 · 3967 阅读 · 0 评论 -
css使用自定义字体
1 下载tff格式的字体2 assets中新建文件夹fonts,把tff字体文件放在fonts,并在assets/css中新建font.css@font-face { font-family: "Acy"; src: url('../fonts/Acy.ttf') format('truetype'); font-weight: normal; font-style: normal;}3、在mian.js中引用font.css#import './assets/c原创 2021-01-12 17:35:55 · 518 阅读 · 0 评论 -
css 元素隐藏的几种方式
visibility: hidden; 这个属性只是简单的隐藏某个元素,但是元素占用的空间任然存在;opacity: 0;``CSS3属性,设置0可以使一个元素完全透明;position: absolute; 设置一个很大的 left 负值定位,使元素定位在可见区域之外;display: none; 元素会变得不可见,并且不会再占用文档的空间;transform: scale(0); 将一个元素设置为缩放无限小,元素将不可见,元素原来所在的位置将被保留;<div hidden="hidden原创 2021-01-12 16:29:49 · 135 阅读 · 0 评论 -
css平滑滚动 scroll-behavior: smooth;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>锚点平滑跳转</title> <style> * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } nav {原创 2021-01-12 15:43:00 · 2941 阅读 · 0 评论 -
css 文本超出省略号,单行省略号和多行省略号
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { margin原创 2021-01-12 13:46:11 · 262 阅读 · 0 评论 -
css画loading
效果图源代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>css loading</title> <style> .原创 2020-09-28 11:03:41 · 186 阅读 · 0 评论 -
CSS实现带阴影效果的三角形
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS实现带阴影效果的三角形</title> <style> ...原创 2020-02-12 09:50:55 · 684 阅读 · 0 评论 -
让你的滚动scroll更加顺滑流畅
https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6%BB%9A%E5%8A%A8/原创 2019-12-12 15:45:58 · 1751 阅读 · 0 评论