css——层叠样式表,简单理解就是用来装饰网页的样子,比如颜色,大小,位置等等。总之,你现在能看到美轮美奂的网页就是css的功劳。
今天介绍一下css中伪元素before、after的妙用小技巧。
首先纠正下写法:
- 伪类用一个冒号表示 :hover
- 伪元素则使用两个冒号表示 ::before
小例子一 导航鼠标悬停特效
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45
| <html> <style> ul { padding: 0; margin: 0; font-size: 12px; } li { font-size: 20px; padding: 5px 15px 5px 15px; display: inline-block; position: relative; cursor: pointer; transition: all 0.5s; } /*默认设置left=100%表示在最右边*/ li::before { content: ''; display: block; position: absolute; width: 0%; bottom: 0; left: 100%; border-bottom: 2px solid #999; /*all 0.5秒 表示所有类型的过渡动画都在0.5秒内完成*/ transition: all 0.5s; } /*鼠标hover上去的时候width从0变化至100*/ li:hover::before { left:0; width:100%; } /*表示设置位于hover之后的li的before的left为0。实现向右移动的时候下面的线条从左往右出现*/ li:hover ~ li::before { left:0; } </style> <ul> <li>第一栏</li> <li>第二栏</li> <li>第三栏</li> <li>第四栏</li> <li>第五栏</li> </ul> </html>
|
小例子二:手机滑盖效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| <style type="text/css"> div#phone li:before{ content: url(./img/wangwang.jpg); position: relative; display: block; transition: transform 1s; } div#phone li:after{ content: url(./img/bujibuji.jpg); position: relative; top: -750px; display: block; transition: transform 1s; } div#phone li:hover:before{ transform: translate(-40%,0); }
div#phone li:hover:after{ transform: translate(40%,0); }
li{ list-style-type: none; width: 500px; margin: 20px auto; } </style> <div id="phone"> <li></li> </div>
|
小例子三 翻转效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
| <html> <style> *, *::after, *::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
nav a { position: relative; display: inline-block; margin: 15px 25px; outline: none; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-weight: 400; text-shadow: 0 0 1px rgba(255,255,255,0.3); font-size: 1.35em; }
nav a:hover, nav a:focus { outline: none; } .cl-effect-2 a { line-height: 44px; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; }
.cl-effect-2 a span { position: relative; display: inline-block; padding: 0 14px; background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; text-align: center; }
.cl-effect-2 a span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; text-align: center; }
.cl-effect-2 a:hover span, .cl-effect-2 a:focus span { -webkit-transform: rotateX(90deg) translateY(-22px); -moz-transform: rotateX(90deg) translateY(-22px); transform: rotateX(90deg) translateY(-22px); }
.cl-effect-2 a:hover span::before, .cl-effect-2 a:focus span::before { background: #28a2ee; } .cl-effect-19 a { line-height: 2em; -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; }
.cl-effect-19 a span { position: relative; display: inline-block; width: 100%; padding: 0 14px; background: #e35041; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -60px; -moz-transform-origin: 50% 50% -60px; transform-origin: 50% 50% -60px; text-align: center; }
.cl-effect-19 a span::before { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #b53a2d; content: attr(data-hover); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0 50%; -moz-transform-origin: 0 50%; transform-origin: 0 50%; pointer-events: none; text-align: center; }
.cl-effect-19 a:hover span, .cl-effect-19 a:focus span { background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); }
.cl-effect-19 a:hover span::before, .cl-effect-19 a:focus span::before { background: #ef5e50; } </style> <section class="color-4"> <nav class="cl-effect-2" id="cl-effect-2"> <a href="#cl-effect-2"><span data-hover="上下翻转">上下翻转</span></a> </nav> <nav class="cl-effect-19" id="cl-effect-19"> <a href="#cl-effect-19"><span data-hover="左右翻转">左右翻转</span></a> </nav> </section> </html>
|
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦