1.盒子边框的线条动画：
  1. <div class="cont">
  2.     <div class="bb"></div>
  3. </div>
  4. .bb{
  5.             position: relative;
  6.             width: 200px;
  7.             height: 200px;
  8.             background: #666666;
  9.             border: 1px solid #5EF75E;
  10.         }
  11.         .bb:before,.bb:after{
  12.             content: " ";
  13.             display: block;
  14.             position: absolute;
  15.             width:220px;
  16.             height:220px;
  17.             top: -10px;
  18.             left: -10px;
  19.             border:2px solid #00FF00;
  20.             z-index:;
  21.             box-sizing: border-box;
  22.             -webkit-animation: clipAni 4s infinite linear;
  23.         }
  24.         .bb:before{
  25.             -webkit-animation-delay: 2s;
  26.         }
  27.         @keyframes  clipAni{
  28.             0%,100%{
  29.                 clip:rect(0px,220px,220px,217px);
  30.             }
  31.             25%{
  32.                 clip:rect(0px,220px,3px,0px);
  33.             }
  34.             50%{
  35.                 clip:rect(0px,3px,220px,0px);
  36.             }
  37.             75%{
  38.                 clip:rect(217px,220px,220px,0px);
  39.             }
  40.         }
用到的知识点：
clip 属性用来设置元素的形状。用来剪裁绝对定位元素。
当一幅图像的尺寸大于包含它的元素时，"clip" 属性允许规定一个元素的可见尺寸，这样此元素就会被修剪并显示在这个元素中。
用这个属性需要注意以下三点：
1.clip属性只能用于绝对定位元素，position:absolute或fixed。
2.clip属性有三种取值：auto  默认的
　　　　　　　　　　  inherit继承父级的
　　　　　　　　　　一个定义好的形状，但现在只能是方形的 rect()
　　clip: { shape | auto | inherit } ;
3.shape   rect(<top>, <right>, <bottom>, <left>)中的四个元素不可省略。
下面看下clip属性的rect()函数
clip: rect(<top>, <right>, <bottom>, <left>);
具体四个数值表示什么呢？看下张图即可理解。
简单的理解就是：图片飞高就是bottom-top,宽就是right-left.当然图片不会是负数。
clip属性对于多数浏览器都可以用，写法会有点不同
  1. .my-element {
  2.     position: absolute;
  3.     clip: rect(10px  350px  170px  0); /* IE4 to IE7 */
  4.     clip: rect(10px, 350px, 170px, 0); /* IE8+ & other browsers */
  5. }
2
用到的知识点：:focus-within
    :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
    元素的子元素或者自身元素的文本框获取焦点后执行的样式
源码：
  1. <div class="g-container">
  2.     <div class="g-section">
  3.         <input type="button">
  4.         <p>
  5.             :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
  6.         </p>
  7.     </div>
  8.     <div class="g-section">
  9.         <input type="button">
  10.         <p>
  11.             :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
  12.         </p>
  13.     </div>
  14.     <div class="g-section">
  15.         <input type="button">
  16.         <p>
  17.             :focus-within 是一个CSS 伪类 ，表示一个元素获得焦点，或，该元素的后代元素获得焦点。换句话说，元素自身或者它的某个后代匹配:focus伪类。
  18.         </p>
  19.     </div>
  20. </div>
  21. .g-container {
  22.     width: 300px;
  23.     margin: 50px auto;
  24. }
  25. .g-container p {
  26.     line-height: 1.4;
  27.     padding-left: 40px;
  28. }
  29. .g-container input {
  30.     position: absolute;
  31.     border: none;
  32.     outline: none;
  33.     background: none;
  34.     width: 20px;
  35.     height: 20px;
  36.     border-radius: 50%;
  37.     border: 1px solid #aaa;
  38.     box-sizing: border-box;
  39.     top: 50%;
  40.     left: 10px;
  41.     -webkit-transform: translate(0, -50%);
  42.     transform: translate(0, -50%);
  43.     cursor: pointer;
  44. }
  45. .g-container .g-section {
  46.     position: relative;
  47.     padding: 10px;
  48.     box-sizing: border-box;
  49.     border: 1px solid transparent;
  50. }
  51. .g-container .g-section:focus-within {
  52.     background: linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(90deg, #03a9f4 50%, transparent 0) repeat-x, linear-gradient(0deg, #03a9f4 50%, transparent 0)         repeat-y, linear-gradient(0deg, #03a9f4 50%, transparent 0) repeat-y;
  53.     background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  54.     background-position: 0 0, 0 100%, 0 0, 100% 0;
  55.     -webkit-animation: linearGradientMove .5s infinite linear;
  56.     animation: linearGradientMove .5s infinite linear;
  57. }
  58.     .g-container .g-section:focus-within input {
  59.     background: #03a9f4;
  60. }
  61.  
  62. @-webkit-keyframes linearGradientMove {
  63.     100% {
  64.         background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
  65.     }
  66. }
  67.  
  68. @keyframes linearGradientMove {
  69.     100% {
  70.         background-position: 6% 0, -6% 100%, 0 -6%, 100% 6%;
  71.     }
  72. }
仅支持在pc端运行在移动端是不支持的
 
3：focus-within
源码：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. * {
  8. margin: 0 ;
  9. padding:;
  10. }
  11. .container {
  12. width: 300px;
  13. margin: 50px auto;
  14. padding: 10px;
  15. boder: 1px solid #ddd;
  16. }
  17.  
  18. .nav-box {
  19. font-size:;
  20. }
  21.  
  22. button {
  23. width: 150px;
  24. height: 64px;
  25. box-sizing: border-box;
  26. outline: none;
  27. background: #fff;
  28. border: 1px solid #ddd;
  29. font-size: 18px;
  30. cursor: pointer;
  31. }
  32.  
  33. button:focus-within {
  34. color: #fff;
  35. background: #ffcc00;
  36. }
  37.  
  38. .content-box {
  39. font-size: 24px;
  40. border: 1px solid #ddd;
  41. height: 100px;
  42. }
  43. .content-box div {
  44. display: none;
  45. }
  46.  
  47. .nav-box:not(:focus-within) .nav-A {
  48. color: #fff;
  49. background: #ffcc00;
  50. }
  51. .nav-box:not(:focus-within) .content-A {
  52. display: block;
  53. }
  54.  
  55. .nav-A:focus-within ~ .content-box .content-A {
  56. display: block;
  57. }
  58.  
  59. .nav-B:focus-within ~ .content-box .content-B {
  60. display: block;
  61. }
  62. </style>
  63. </head>
  64. <body>
  65. <div class="container">
  66. <div class="nav-box">
  67. <button class="nav-A">Tab-A</button>
  68. <button class="nav-B">Tab-B</button>
  69. <div class="content-box">
  70. <div class="content-A">
  71. content-A
  72. </div>
  73. <div class="content-B">
  74. content-B
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </body>
  80. </html>
 
4.
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. * {
  8. outline: none;
  9. }
  10. strong {
  11. font-weight: 600;
  12. }
  13. .page {
  14. width: 100%;
  15. height: 100vh;
  16. background: #fdfdfd;
  17. font-family: 'Encode Sans Condensed', sans-serif;
  18. font-weight: 600;
  19. letter-spacing: .03em;
  20. color: #212121;
  21. }
  22. header {
  23. display: flex;
  24. position: fixed;
  25. width: 100%;
  26. height: 70px;
  27. background: #212121;
  28. color: #fff;
  29. justify-content: center;
  30. align-items: center;
  31. -webkit-tap-highlight-color: rgba(0,0,0,0);
  32. }
  33. main {
  34. padding: 70px 20px 0;
  35. display: flex;
  36. flex-direction: column;
  37. height: 100%;
  38. }
  39. main > div {
  40. margin: auto;
  41. max-width: 600px;
  42. }
  43. main h2 span {
  44. color: #BF7497;
  45. }
  46. main p {
  47. line-height: 1.5;
  48. font-weight: 200;
  49. margin: 20px 0;
  50. }
  51. main small {
  52. font-weight: 300;
  53. color: #888;
  54. }
  55. #nav-container {
  56. position: fixed;
  57. height: 100vh;
  58. width: 100%;
  59. pointer-events: none;
  60. }
  61. #nav-container .bg {
  62. position: absolute;
  63. top: 70px;
  64. left: 0;
  65. width: 100%;
  66. height: calc(100% - 70px);
  67. visibility: hidden;
  68. opacity: 0;
  69. transition: .3s;
  70. background: #000;
  71. }
  72. #nav-container:focus-within .bg {
  73. visibility: visible;
  74. opacity: .6;
  75. }
  76. #nav-container * {
  77. visibility: visible;
  78. }
  79. .button {
  80. position: relative;
  81. display: flex;
  82. flex-direction: column;
  83. justify-content: center;
  84. z-index: 1;
  85. -webkit-appearance: none;
  86. border: 0;
  87. background: transparent;
  88. border-radius: 0;
  89. height: 70px;
  90. width: 30px;
  91. cursor: pointer;
  92. pointer-events: auto;
  93. margin-left: 25px;
  94. touch-action: manipulation;
  95. -webkit-tap-highlight-color: rgba(0,0,0,0);
  96. }
  97. .icon-bar {
  98. display: block;
  99. width: 100%;
  100. height: 3px;
  101. background: #aaa;
  102. transition: .3s;
  103. }
  104. .icon-bar + .icon-bar {
  105. margin-top: 5px;
  106. }
  107. #nav-container:focus-within .button {
  108. pointer-events: none;
  109. }
  110. #nav-container:focus-within .icon-bar:nth-of-type(1) {
  111. transform: translate3d(0,8px,0) rotate(45deg);
  112. }
  113. #nav-container:focus-within .icon-bar:nth-of-type(2) {
  114. opacity: 0;
  115. }
  116. #nav-container:focus-within .icon-bar:nth-of-type(3) {
  117. transform: translate3d(0,-8px,0) rotate(-45deg);
  118. }
  119. #nav-content {
  120. margin-top: 70px;
  121. padding: 20px;
  122. width: 90%;
  123. max-width: 300px;
  124. position: absolute;
  125. top: 0;
  126. left: 0;
  127. height: calc(100% - 70px);
  128. background: #ececec;
  129. pointer-events: auto;
  130. -webkit-tap-highlight-color: rgba(0,0,0,0);
  131. transform: translateX(-100%);
  132. transition: transform .3s;
  133. will-change: transform;
  134. contain: paint;
  135. }
  136. #nav-content ul {
  137. height: 100%;
  138. display: flex;
  139. flex-direction: column;
  140. }
  141. #nav-content li a {
  142. padding: 10px 5px;
  143. display: block;
  144. text-transform: uppercase;
  145. transition: color .1s;
  146. }
  147. #nav-content li a:hover {
  148. color: #BF7497;
  149. }
  150. #nav-content li:not(.small) + .small {
  151. margin-top: auto;
  152. }
  153. .small {
  154. display: flex;
  155. align-self: center;
  156. }
  157. .small a {
  158. font-size: 12px;
  159. font-weight: 400;
  160. color: #888;
  161. }
  162. .small a + a {
  163. margin-left: 15px;
  164. }
  165. #nav-container:focus-within #nav-content {
  166. transform: none;
  167. }
  168. * {
  169. box-sizing: border-box;
  170. margin: 0;
  171. padding: 0;
  172. }
  173. html, body {
  174. height: 100%;
  175. }
  176. a,a:visited,a:focus,a:active,a:link {
  177. text-decoration: none;
  178. outline: 0;
  179. }
  180. a {
  181. color: currentColor;
  182. transition: .2s ease-in-out;
  183. }
  184. h1, h2, h3, h4 {
  185. margin: 0;
  186. }
  187. ul {
  188. padding: 0;
  189. list-style: none;
  190. }
  191. img {
  192. vertical-align: middle;
  193. height: auto;
  194. width: 100%;
  195. }
  196. </style>
  197. </head>
  198. <body>
  199. <div class="page">
  200. <header tabindex="0">Header</header>
  201. <div id="nav-container">
  202. <div class="bg"></div>
  203. <div class="button" tabindex="0">
  204. <span class="icon-bar"></span>
  205. <span class="icon-bar"></span>
  206. <span class="icon-bar"></span>
  207. </div>
  208. <div id="nav-content" tabindex="0">
  209. <ul>
  210. <li><a href="#0">Home</a></li>
  211. <li><a href="#0">Services</a></li>
  212. <li><a href="#0">Blog</a></li>
  213. <li><a href="#0">About</a></li>
  214. <li><a href="#0">Contact</a></li>
  215. <li class="small"><a href="#0">Facebook</a><a href="#0">Instagram</a></li>
  216. </ul>
  217. </div>
  218. </div>
  219. <main>
  220. <div class="content">
  221. <h2>Off-screen navigation using <span>:focus-within</span></h2>
  222. <p>Adding yet another pure CSS technique to the list of off-screen navigation by "hacking" the :focus-within pseudo-class. Have a look at the code to see how it works.</p>
  223. <small><strong>NB!</strong> Use a browser that supports :focus-within</small>
  224. </div>
  225. </main>
  226. </div>
  227. </body>
  228. </html>
5.
源码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <style>
  7. .g-wrap {
  8. position: fixed;
  9. top: 0;
  10. left: 0;
  11. bottom: 0;
  12. right: 0;
  13. background: rgba(0, 0, 0, 0.3);
  14. }
  15. .g-container {
  16. position: relative;
  17. width: 318px;
  18. margin: 100px auto;
  19. height: 370px;
  20. padding: 20px;
  21. box-sizing: border-box;
  22. background: #fff;
  23. z-index: 10;
  24. }
  25. .g-container h2 {
  26. font-size: 20px;
  27. font-weight: bold;
  28. margin-bottom: 30px;
  29. }
  30. .g-container input {
  31. outline: none;
  32. padding: 10px;
  33. width: 100%;
  34. border: 1px solid #e9e9e9;
  35. border-radius: 2px;
  36. outline: none;
  37. box-sizing: border-box;
  38. font-size: 16px;
  39. }
  40. img {
  41. position: absolute;
  42. top: -20%;
  43. left: 50%;
  44. width: 120px;
  45. height: 95px;
  46. -webkit-transform: translate(-50%, 0);
  47. transform: translate(-50%, 0);
  48. }
  49. .g-username {
  50. margin-bottom: 10px;
  51. }
  52. .g-username img {
  53. display: none;
  54. width: 120px;
  55. height: 113px;
  56. }
  57. .g-username:focus-within ~ img {
  58. display: none;
  59. }
  60. .g-username:focus-within input {
  61. border-color: #007fff;
  62. }
  63. .g-username:focus-within img {
  64. display: block;
  65. }
  66. .g-password {
  67. margin-bottom: 10px;
  68. }
  69. .g-password img {
  70. display: none;
  71. width: 103px;
  72. height: 84px;
  73. top: -15%;
  74. }
  75. .g-password:focus-within ~ img {
  76. display: none;
  77. }
  78. .g-password:focus-within input {
  79. border-color: #007fff;
  80. }
  81. .g-password:focus-within img {
  82. display: block;
  83. }
  84. </style>
  85. </head>
  86. <body>
  87. <div class="g-wrap"></div>
  88. <div class="g-container">
  89. <h2>登录</h2>
  90. <div class="g-username">
  91. <input name="loginPhoneOrEmail" maxlength="64" placeholder="请输入手机号或邮箱" class="input">
  92. <img src="https://b-gold-cdn.xitu.io/v3/static/img/greeting.1415c1c.png" class="g-username">
  93. </div>
  94. <div class="g-password">
  95. <input name="loginPassword" type="password" maxlength="64" placeholder="请输入密码" class="input">
  96. <img src="https://b-gold-cdn.xitu.io/v3/static/img/blindfold.58ce423.png" class="g-password">
  97. </div>
  98. <img src="https://b-gold-cdn.xitu.io/v3/static/img/normal.0447fe9.png" class="g-normal">
  99. </div>
  100. </body>
  101. </html>
 
 

伪元素:focus-within的更多相关文章

  1. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

  2. ::before和::after伪元素的用法

    一.介绍 css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类——:hover,:link,:active,:target,:not(),:focus. 常见伪元素——::first-let ...

  3. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  4. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  5. 后端码农谈前端（CSS篇）第四课：选择器补充（伪类与伪元素）

    一.伪类: 属性 描述 :active 向被激活的元素添加样式. :focus 向拥有键盘输入焦点的元素添加样式. :hover 当鼠标悬浮在元素上方时,向元素添加样式. :link 向未被访问的链接 ...

  6. CSS 伪元素&伪类

    单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素 伪元素 属性 描述 CSS :first-letter 向文本的第一个字母添加特殊样式 1 :first-line 向文本的首行添加特殊 ...

  7. CSS3伪类和伪元素的特性和区别

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

  8. CSS 属性 - 伪类和伪元素的区别

    伪类和伪元素皆独立于文档结构.它们获取元素的途径也不是基于id.class.属性这些基础的元素特征,而是在处于特殊状态的元素(伪类),或者是元素中特别的内容(伪元素).区别总结如下: ①写法不一样: ...

  9. CSS_03_04_CSS伪元素选择器

    第01步:编写css代码:wei.css @charset "utf-8"; /* 伪元素选择器 :状态 效果顺序:L V H A */ a:link.lin_01{/*超链接,未 ...

  10. CSS 高级：尺寸、分类、伪类、伪元素

    CSS 尺寸:允许你控制元素的高度和宽度.同样,还允许你增加行间距. CSS 分类:允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的 ...

随机推荐

  1. PL/SQL编程—游标

    一.游标的相关概念: 定义: 游标它是一个服务器端的存储区,这个区域提供给用户使用,在这个区域里 存储的是用户通过一个查询语句得到的结果集,用户通过控制这个游标区域当中 的指针 来提取游标中的数据,然 ...

  2. SetWindowText与SetWindowTextW

    SetWindowTextW用于宽字符SetWindowText  根据定义的宏使用宽字符或者ansi 注意: _T 是自动进行 unicode/ansi版本匹配. 如 _T("aa&quo ...

  3. 优秀 H5 案例收集 vol.3（不定期更新）

    上期浏览:Vol.1   Vol.2 爱的不同定义,五笔连成爱http://news.163.com/special/fdh5_valentines/ 世界华语悬疑文学大赛—下一位悬疑大师,就是你!h ...

  4. 关于comparable接口

    参考博客: https://blog.csdn.net/nvd11/article/details/27393445 第一个例子 @Test public void fun1(){ List list ...

  5. 【JavaScript】满天星

    参考: 1.http://www.w3school.com.cn/tags/canvas_filltext.asp 2.产生随机数:http://www.cnblogs.com/banbu/archi ...

  6. jenkins添加GIT repository报错

    添加了ssh互信,但一直提示如下错误. Failed to connect to repository : Command "git ls-remote -h git@git.xxx.cn: ...

  7. kali 源设置sources.list

    由于阿里源有些问题,可能我设置的问题,所以就去掉了,163的很快 # deb cdrom:[Debian GNU/Linux 2016.1 _Kali-rolling_ - Official Snap ...

  8. Android 6.0中在/dev下添加新设备驱动下Selinux相关设置【转】

    本文转载自:https://blog.csdn.net/fantasy_wxe/article/details/52013922 错误1: 07-23 13:06:57.617   117   117 ...

  9. AppLocker Pro FAQ

    How to use AppLocker Pro: 1. Start AppLocker Pro, create a password.2. In the main console, click &q ...

  10. C# 打开电子邮件软件

    使用客户端打开指定的URL 使用Process.Start方法可以在浏览器打开指定的URL.代码如下所示. [C#] //使用客户端打开“http://www.baidu.com” System.Di ...