nth-child | 易学教程

CSS3实现一个旋转的花朵

阅读更多关于 CSS3实现一个旋转的花朵

要效果图如下：实现原理：其实很简单，就是中间的圆圈定位在中间，其他的6个圆圈，进行不同的绝对定位，然后进行旋转！代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS实现的旋转的花朵</title> <style> *{ margin: 0; padding: 0; } *,*:before,*:after{ box-sizing: border-box; } html body{ height: 100%; } .container { background: #f39c12; height: 300px; position: relative; } .loader{ position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .loader .spinnerBlock{ -webkit-animation: rotate 1000ms linear infinite; animation: rotate 1000ms linear infinite; -webkit-transform-origin:

web前端入门到实战：CSS3实现3D动画

阅读更多关于 web前端入门到实战：CSS3实现3D动画

本篇文章给大家带来的内容是关于css实现3d动画特效的代码实例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助！一、动画属性 1.transform-style: flat | preserve-3d 动画的形式 flat：默认值平面，也就是没有3d效果 preserve-3d：3d效果展示如果要用3D表现，这个属性是必须启用的，当然注意属性要加各种前缀。（这个属性可以把一个处于2维的div变为3d空间，把这个属性比作一个相机的摄像头,这个div内的内容会以3d的形式通过摄像头的形式反馈给你,他的子元素才会享受3d效果,子元素以下的元素就不会有3d效果。） 2.transform-origin：50% 50%; 旋转移动围绕的轴线,默认是中心,可以设left,right,top,bottom,也可以设值数值，这样可以调整旋转移动所围绕的轴线，完成诸如翻页，开门等动作。 (这就相当于你的眼镜啦,位置不同效果也就不同了) 3.perspective 视角值越小，透视距离越近，效果越明显该属性为定义3D变换的元素与视图的距离，也就是透视距离。这个属性应添加到视图元素(变换元素的父元素)上。这是3d动画必备的属性，如果不添加这个属性，则动画会变成平面效果。一般用在舞台元素也就是容器上，这样会让该容器中所用动画元素使用一个视角，这个属性还可以单独用在每个元素中

js23-css使用flex的一天

阅读更多关于 js23-css使用flex的一天

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width, height=device-height"> <title></title> <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/flex1.css"> </head> <body> <header> <ul> <li> <div></div> </li> <p>扫一扫</p> </ul> <ul> <li></li> <li> <div></div> <input /> <div></div> </li> </ul> <ul> <li> <div></div> </li> <p>消息</p> </ul> </header> <div class=

htm&css 颜色的浮动

阅读更多关于 htm&css 颜色的浮动

目标样式目标分析：　　由图可知，整个色板可以分为三块　　可以理解为一个大的盒子包含了三个小的盒子，定义如下　 LEFT的定义方式 TOP的定义方式 class为bottom的块最为复杂，但分析方法也是异曲同工，因此不要担心太难。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=div, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="../css/color.css"> </head> <body> <div class="all"> <div class="left"> <div></div> <div></div> <div></div> </div> <div class="top"> <div class="top_1"></div> <div class="top_2"> <div></div> <div></div> </div> </div> <div class="bottom"> <div class=

前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

阅读更多关于前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

效果预览按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/zhang-ou/pen/GdpPLE 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/c4vdvcL 源代码下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-effects 代码解读定义 dom，在一个容器中定义按钮的文字，每个字母一个 span，每个 span 有一个 data-text 属性，其值与 span 内的字母相同： <div class="box"> <span data-text="B">B</span> <span data-text="U">U</span> <span data-text="T">T</span> <span data-text="T">T</span> <span data-text="O">O</span> <span data-text="N">N</span> </div> 按钮居中： html,

前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

阅读更多关于前端每日实战：2# 视频演示如何用纯 CSS 创作一个矩形旋转 loader 特效

效果预览按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cJMkwH9 源代码下载请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/002-rectangular-rotating-loader-animation 代码解读定义 dom，一个包含 3 个 span 的容器： <div class="loader"> <span></span> <span></span> <span></span> </div> 居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } 设置容器的尺寸： .loader { width: 150px; height: 150px; position: relative; }

CSS伸缩布局

阅读更多关于 CSS伸缩布局

1. 伸缩布局应用: 伸缩布局应用主轴： Flex容器的主轴用来配置Flex项目，默认是水平方向侧轴：与主轴垂直的轴称为侧轴，默认还是垂直方向方向：默认是主轴从左向右，侧轴默认是从上到下主轴和侧轴并不是固定不变的通过flex-direction可以互换 min-width 设置px 到达设置的这个值就不在缩放了 max-width 跟上面这个相反 flex 可以放在每个盒子里面自由调整需要给盒子添加display: flex; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> section { width: 80%; height: 200px; border: 1px solid pink; margin: 100px auto; /*给父级盒子添加flex*/ display: flex; /*伸缩布局模式*/ } section div { height: 100%; flex: 1; /*每个子盒子占的份数*/ } section div:nth-child(1) { background-color: pink; } section div:nth-child(2) { background-color:

Selenium(五)：CSS选择器(二)

阅读更多关于 Selenium(五)：CSS选择器(二)

1. CSS选择器 1.1 选择语法联合使用 CSS selector的另一个强大之处在于：选择语法可以联合使用。 html代码： <div id='bottom'> <div class='footer1'> <span class='copyright'>版权</span> <span class='date'>发布日期：2019-11-26</span> </div> <div class='footer2'> <span>主页 <a href="https://www.cnblogs.com/liuhui0308/">爱编程的小灰灰</a> </span> </div> </div> 比如，我们要选择网页html中的元素 <span class='copyright'>版权</span> CSS selector表达式可以这样写： div.footer1 > span.copyright 就是选择一个class属性值为copyright的span节点，并且要求其必须是class属性值为footer1的div节点的子节点。也可以更简单： .footer1 > .copyright 就是选择一个class属性值为copyright的节点（不限类型），并且要求其必须是class属性值为footer1的节点的子节点。当然这样也是可以的： .footer1 .copyright

CSS3选择器归类整理

阅读更多关于 CSS3选择器归类整理

CSS3选择器归类整理（附CSS优先级要点） CSS是用于网页设计可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面，而不用改变页面的标签。在深入研究CSS选择器之前，我们应该先搞懂CSS优先级是如何工作的。比如给一个p标签增加一个类（class），可是执行后该class中的有些属性并没有起作用。通过Firebug查看，发现没有起作用的属性被覆盖了。这个时候CSS选择器优先级的问题了。当我们写CSS的时候需要注意有些选择器在级联(cascade)上会高于其它选择器，我们写在最后面的选择器将不一定会覆盖前面我们写在同一个元素的样式。那么你如何计算指定选择器的优先级？如果你考虑到将优先级表示为用逗号隔开的四个数字就会相当简单，比如：1, 1, 1, 1 或0, 2, 0, 1 第一个数字(a)通常就是0，除非在标签上使用style属性；第二个数字(b)是该选择器上的id的数量的总和；第三个数字(c)是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；第四个数字(d)计算元素(就像table、p、div等等)和伪元素(就像:first-line等)；通用选择器(*)是0优先级；如果两个选择器有同样的优先级，在样式表中后面的那个起作用。让我们看几个例子，这样或许比较容易理解些：

CSS3 双层立方体正方体

阅读更多关于 CSS3 双层立方体正方体

这个东东，虽然好像找不到应用场景，但是好喜欢的说 HTML代码： 1  2 <div class="box_case"> 3  4 <div class="small_box"><img src="./IMG/1A.png" ></div> 5 <div class="small_box"><img src="./IMG/1B.png" ></div> 6 <div class="small_box"><img src="./IMG/1L.png" ></div> 7 <div class="small_box"><img src="./IMG/1O.png" ></div> 8 <div class="small_box"><img src="./IMG/1V.png" ></div> 9 <div class="small_box"><img src="./IMG/1E.png" ></div> 10 11  12 <div class="big_box"><img src="./IMG/2A.png" ></div> 13 <div class="big_box"><img src="./IMG/21.png" ></div> 14 <div class="big_box"><img src=".

订阅 nth-child