css
人间草木96
这个作者很懒,什么都没留下…
展开
-
移动端(H5)手搓弹框
<!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>D.原创 2021-12-03 11:02:29 · 682 阅读 · 0 评论 -
用CSS3实现div内容无限循环的滚动
使用CSS3来实现若要用CSS3的属性实现的话,非animation莫属,因为transition是需要手动的触发,而且不能无限次执行下去,而animation恰好能解决这个问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &原创 2021-11-26 16:38:16 · 6809 阅读 · 1 评论 -
CSS 动画:纯 CSS 实现 loading 效果
效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta ht...原创 2019-12-03 10:05:32 · 381 阅读 · 0 评论 -
CSS居中问题大总结
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equ...原创 2018-12-06 16:34:53 · 449 阅读 · 0 评论 -
多个div如何水平垂直居中
多个div如何水平垂直居中在它们的 父级div 上写入 如下 css -webkit-display: flex; display: flex; -webkit-justify-content: center; justify-content: center; -webkit-align-items: center; align-it...原创 2019-05-22 16:52:12 · 1556 阅读 · 0 评论 -
input组件里面的placeholder在获取焦点时清空
<input type="text" placeholder="请输入" onfocus="this.placeholder=''" onblur="this.placeholder='请输入'">原创 2019-06-03 09:53:09 · 1700 阅读 · 0 评论 -
利用css3修改input[type=radio]样式
<!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...原创 2019-06-03 13:19:40 · 5639 阅读 · 0 评论 -
实现input元素中placeholder属性内容水平居中
input::-ms-input-placeholder { text-align: center; font-size: 30px; } input::-webkit-input-placeholder { text-align: center; font-siz...原创 2019-06-03 14:08:30 · 3582 阅读 · 0 评论 -
一些有趣的CSS布局
前言布局和样式,是每个前端的必修课。在日常的工作中,也会碰到一些特定场景的布局需求,配合上样式,就能实现一些神奇的效果。我搜罗了一些日常开发中遇到的布局,以及浏览各大网站时碰巧发现的神奇特效写法,在此做个分享。由于篇幅原因,会分为 2 篇。今天,会先介绍一些有趣而又实用的布局的写法。之后的一篇,将展现样式的神奇魔法。懒加载占位图自适应在商城中展示商品图片时,如果图片较多,一种比较好...原创 2019-09-23 17:33:53 · 203 阅读 · 0 评论 -
一些有趣的CSS魔法
鼠标悬浮使内容自撑开在以前遇到这个需求的时候,我们可能会想到用 JS 来操作内容的显式与否。现在,CSS3 的transition可以帮我们更简单地实现。<ul> <li style="padding-bottom: 20px;"> <div class="head"> 列表1 <...原创 2019-09-23 17:35:43 · 237 阅读 · 0 评论 -
CSS布局方式
网页布局 流动布局 需了解实现块居中常见的几种方式 浮动布局 当设置float:left或者float:right时, 元素会左移或右移直到触碰到容器位置,仍然处于标准文档流中。当元素没有设置宽度值,而设置了浮动属性,元素的宽度随内容的变化而变化。当元素设置为浮动属性后,会对紧邻之后的元素造成影响,紧邻之后的元素会紧挨着该元素显示。当父元素包含块缩成...原创 2019-09-23 17:46:41 · 241 阅读 · 0 评论 -
CSS3 动画(圆点闪烁动画效果的实现)
代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...原创 2019-11-07 17:13:11 · 12505 阅读 · 2 评论 -
如何使用原生CSS在DIV层中画一条线?
效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta htt...原创 2019-11-28 16:25:59 · 4290 阅读 · 0 评论