CSS
关注
分享
扫一扫
xiaoma121212
这个作者很懒，什么都没留下…
展开
-
7款漂亮的纯css字体样式
转载于：https://blog.youkuaiyun.com/aa19891204/article/details/81021591<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="vintage1">转载 2020-11-10 13:32:27 · 4289 阅读 · 0 评论 -
position:sticky；制作导航吸顶效果
<!DOCTYPE html><html style="height: 100%"> <head> <meta charset="utf-8"> <title>固定头部的导航</title> <style> .item1{ height: 200px; border: 1px solid red; } .item2{ height转载 2020-07-15 10:41:56 · 314 阅读 · 0 评论 -
CSS实现圆环百分比进度效果
原文链接：https://blog.youkuaiyun.com/wanglei1991gao/article/details/80009252 原理：红色背景圆为主题，在其上覆盖左右两个灰色半圆，然后在最上面放上用于显示百分比的黑色圆，通过交替旋转两个灰色半圆露出下面的红色背景，在视觉上实现百分比进度效果。一、效果图 二、代码：https://codepen.io/wlei/pen/RyNPKE ...转载 2020-05-26 16:29:55 · 2092 阅读 · 0 评论 -
两面翻转----背面隐藏（backface-visibility:hidden）
原文链接：https://blog.youkuaiyun.com/xiaomohhh/article/details/98633260 实现图片的两面翻转,效果如下图主要是使用背面隐藏(backface-visibility: hidden;) 实现图片的两面翻转首先在body中一个 div 中放置两个图片 img<div> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" al转载 2020-05-13 15:23:43 · 1604 阅读 · 5 评论 -
CSS实现文本超过部分，超出两行，超出部分省略号显示
文字超过部分显示为省略号<style>.p{ width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}</style><body> <p class="p"> 我是一个文本我是一个文本我...转载 2020-04-15 09:20:54 · 2349 阅读 · 0 评论 -
如何用一行代码实现网页变灰效果？
html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Microsoft.BasicI...原创 2020-04-06 16:02:03 · 126 阅读 · 0 评论 -
更改单选多选默认样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>更改默认的单选和多选框样式</title> <style> /*单选框*/ input[type="radio"]{ width: 16px; hei...原创 2019-09-24 19:56:08 · 172 阅读 · 0 评论 -
垂直居中的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box1{ width: 300...原创 2019-09-24 19:49:49 · 197 阅读 · 0 评论 -
bfc 6种方法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...原创 2019-09-24 18:57:07 · 499 阅读 · 0 评论