用伪类添加翘边阴影：：before和：：after

最新推荐文章于 2021-05-31 10:08:26 发布
最新推荐文章于 2021-05-31 10:08:26 发布
阅读量346 收藏
点赞数
原文链接：http://www.cnblogs.com/yimei/p/7691765.html
版权

授人以鱼，考人以鱽鱾鲀鱿鲃鲂鲉鲌鲄鲆鲅鲇鲏鲊鲋鲐鲈鲍鲎鲝鲘鲙鲗鲓鲖鲞鲛鲒鲚鲜鲟鲔鲕鲑鲧鲬鲪鲫鲩鲣鲨鲡鲢鲤鲠鲥鲦鲺鲯鲹鲴鲶鲳鲮鲭鲵鲲鲰鲱鲻鲷鲸鳋鳊鳁鳀鲾鲼鳈鳉鳃鳄鲿鳇鳂鳆鳅鲽鳌鳒鳎鳏鳑鳐鳍鳘鳛鳕鳓鳙鳗鳚鳔鳖鳜鳟鳞鳝鳡鳠鳢鳣鳤

 

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>before、after</title>
<style>
.box h3{
text-align:center;
position:relative;
top:80px;
}
.box {
width:70%;
height:200px;
background:#FFF;
margin:40px auto;
}

.effect{
position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect::before, .effect::after{
content:""; //这里的内容为空
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
</style>
</head>
<body>
<div class="box effect">
<h3>Shadow Effect </h3>
</div>
</body>
</html>

 

效果如下：

 

选择器！！！重点！！！

其中：target是一个目标，表示被选中。在案例中，<a>标签的href值为#bg1、#bg2等，当点击下面的小图标的时候，就会跳到锚点处，那么触发了target事件，就有了动画。

 <!DOCTYPE HTML>
 <html lang="en-US">
 <head>
 <meta charset="UTF-8">
 <title>CSS3 Full Background Slider </title>
 <style type="text/css">
 @import url("http://www.w3cplus.com/demo/css3/base.css");
 @import url("http://fonts.googleapis.com/css?family=Yesteryear");
 html,body {
 height: 100%;
 }
 img.bg {
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: auto !important;
 height: 100%;
 position: fixed;
 top: 0;
 left: 50%;
 z-index:1;
 -webkit-transform: translateX(-50%);
 -moz-transform: translateX(-50%);
 -o-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 }
 .slider {
 position: absolute;
 width: 100%;
 text-align: center;
 z-index: 9999;
 bottom: 100px;
 }
 .slider li {
 display: inline-block;
 width: 170px;
 height: 130px;
 margin-right: 15px;
 }
 .slider a {
 display: inline-block;
 width: 170px;
 padding-top: 70px;
 padding-bottom: 20px;
 position: relative;
 cursor: pointer;
 border: 2px solid #fff;
 border-radius: 5px;
 vertical-align: top;
 color: #fff;
 text-decoration: none;
 font-size: 22px;
 font-family: 'Yesteryear', cursive;
 text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.8),-2px -2px 1px rgba(0, 0, 0, 0.3),-3px -3px 1px rgba(0, 0, 0, 0.3);
 }
 .slider li:nth-of-type(1) a {
 background-color: #02646e;
 }
 .slider li:nth-of-type(2) a {
 background-color: #eb0837;
 }
 .slider li:nth-of-type(3) a {
 background-color: #67b374;
 }
 .slider li:nth-of-type(4) a {
 background-color: #e6674a;
 }
 .slider li:nth-of-type(5) a {
 background-color: #e61061;
 }
 .slider a::after {
 content:"";
 display: block;
 height: 120px;
 width: 120px;
 border: 5px solid #fff;
 border-radius: 50%;
 position: absolute;
 left: 50%;
 margin-left: -60px;
 z-index: 9999;
 top: -80px;
 }
 .slider li:nth-of-type(1) a::after {
 background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg1.jpg) no-repeat center;
 }
 .slider li:nth-of-type(2) a::after {
 background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg2.jpg) no-repeat center;
 }
 .slider li:nth-of-type(3) a::after {
 background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg3.jpg) no-repeat center;
 }
 .slider li:nth-of-type(4) a::after {
 background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg4.jpg) no-repeat center;
 }
 .slider li:nth-of-type(5) a::after {
 background: url(http://www.w3cplus.com/demo/css3/CSS3Fullbackground/sbg5.jpg) no-repeat center;
 }
 .slider a::before {
 content:"";
 display: block;
 height: 120px;
 width: 120px;
 border: 5px solid #fff;
 border-radius: 50%;
 position: absolute;
 left: 50%;
 margin-left: -60px;
 z-index: 99999;
 top: -80px;
 background: rgba(0,0,0,0.3);
 }
 .slider a:hover::before {
 opacity:0;
 }
 /* Slide Left */
  
 @-webkit-keyframes 'slideLeft' {
 0% { left: -500px; }
 100% { left: 0; }
 }
 @-moz-keyframes 'slideLeft' {
 0% { left: -500px; }
 100% { left: 0; }
 }
 @-o-keyframes 'slideLeft' {
 0% { left: -500px; }
 100% { left: 0; }
 }
 @-ms-keyframes 'slideLeft' {
 0% { left: -500px; }
 100% { left: 0; }
 }
 @keyframes 'slideLeft' {
 0% { left: -500px; }
 100% { left: 0; }
 }
  
 .slideLeft:target {
 z-index: 100;
 -webkit-animation-name: slideLeft;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: slideLeft;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: slideLeft;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: slideLeft;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: slideLeft;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
  
  
 /* Slide Bottom */
  
 @-webkit-keyframes 'slideBottom' {
 0% { top: 350px; }
 100% { top: 0; }
 }
 @-moz-keyframes 'slideBottom' {
 0% { top: 350px; }
 100% { top: 0; }
 }
 @-ms-keyframes 'slideBottom' {
 0% { top: 350px; }
 100% { top: 0; }
 }
 @-o-keyframes 'slideBottom' {
 0% { top: 350px; }
 100% { top: 0; }
 }
 @keyframes 'slideBottom' {
 0% { top: 350px; }
 100% { top: 0; }
 }
  
 .slideBottom:target {
 z-index: 100;
  
 -webkit-animation-name: slideBottom;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: slideBottom;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: slideBottom;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: slideBottom;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: slideBottom;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
  
 /* Zoom In */
  
 @-webkit-keyframes 'zoomIn' {
 0% { -webkit-transform: scale(0.1); }
 100% { -webkit-transform: none; }
 }
 @-moz-keyframes 'zoomIn' {
 0% { -moz-transform: scale(0.1); }
 100% { -moz-transform: none; }
 }
 @-ms-keyframes 'zoomIn' {
 0% { -ms-transform: scale(0.1); }
 100% { -ms-transform: none; }
 }
 @-o-keyframes 'zoomIn' {
 0% { -o-transform: scale(0.1); }
 100% { -o-transform: none; }
 }
 @keyframes 'zoomIn' {
 0% { transform: scale(0.1); }
 100% { transform: none; }
 }
 .zoomIn:target {
 z-index: 100;
 -webkit-animation-name: zoomIn;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: zoomIn;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: zoomIn;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: zoomIn;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: zoomIn;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
  
 /* Zoom Out */
  
 @-webkit-keyframes 'zoomOut' {
 0% { -webkit-transform: scale(2); }
 100% { -webkit-transform: none; }
 }
 @-moz-keyframes 'zoomOut' {
 0% { -moz-transform: scale(2); }
 100% { -moz-transform: none; }
 }
 @-ms-keyframes 'zoomOut' {
 0% { -ms-transform: scale(2); }
 100% { -ms-transform: none; }
 }
 @-o-keyframes 'zoomOut' {
 0% { -o-transform: scale(2); }
 100% { -o-transform: none; }
 }
 @keyframes 'zoomOut' {
 0% { transform: scale(2); }
 100% { transform: none; }
 }
  
 .zoomOut:target {
 z-index: 100;
 -webkit-animation-name: zoomOut;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: zoomOut;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: zoomOut;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: zoomOut;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: zoomOut;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
  
 /* Rotate */
  
 @-webkit-keyframes 'rotate' {
 0% { -webkit-transform: rotate(-360deg) scale(0.1); }
 100% { -webkit-transform: none; }
 }
 @-moz-keyframes 'rotate' {
 0% { -moz-transform: rotate(-360deg) scale(0.1); }
 100% { -moz-transform: none; }
 }
 @-ms-keyframes 'rotate' {
 0% { -ms-transform: rotate(-360deg) scale(0.1); }
 100% { -ms-transform: none; }
 }
 @-o-keyframes 'rotate' {
 0% { -o-transform: rotate(-360deg) scale(0.1); }
 100% { -o-transform: none; }
 }
 @keyframes 'rotate' {
 0% { transform: rotate(-360deg) scale(0.1); }
 100% { transform: none; }
 }
  
 .rotate:target {
 z-index: 100;
 -webkit-animation-name: rotate;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: rotate;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: rotate;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: rotate;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: rotate;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
  
 /* Not Target */
  
 @-webkit-keyframes 'notTarget' {
 0% { z-index: 75; }
 100% { z-index: 75; }
 }
 @-moz-keyframes 'notTarget' {
 0% { z-index: 75; }
 100% { z-index: 75; }
 }
 @-ms-keyframes 'notTarget' {
 0% { z-index: 75; }
 100% { z-index: 75; }
 }
 @-o-keyframes 'notTarget' {
 0% { z-index: 75; }
 100% { z-index: 75; }
 }
 @keyframes 'notTarget' {
 0% { z-index: 75; }
 100% { z-index: 75; }
 }
  
 .bg:not(:target) {
 -webkit-animation-name: notTarget;
 -webkit-animation-duration: 1s;
 -webkit-animation-iteration-count: 1;
 -moz-animation-name: notTarget;
 -moz-animation-duration: 1s;
 -moz-animation-iteration-count: 1;
 -ms-animation-name: notTarget;
 -ms-animation-duration: 1s;
 -ms-animation-iteration-count: 1;
 -o-animation-name: notTarget;
 -o-animation-duration: 1s;
 -o-animation-iteration-count: 1;
 animation-name: notTarget;
 animation-duration: 1s;
 animation-iteration-count: 1;
 }
 </style>
 </head>
 <body>
 <div class="slider">
 <ul class="clearfix">
 <li><a href="#bg1">Hipster Fashion Haircut </a></li>
 <li><a href="#bg2">Cloud Computing Services &amp; Consulting</a></li>
 <li><a href="#bg3">My haire is sooo fantastic!</a></li>
 <li><a href="#bg4">Eat healthy &amp; excersice!</a></li>
 <li><a href="#bg5">Lips so kissable I could die ...</a></li>
 </ul>
 </div>
 <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg1.jpg" alt="" class="bgslideLeft" id="bg1" />
 <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg2.jpg" alt="" class="bgslideBottom" id="bg2" />
 <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg3.jpg" alt="" class="bgzoomIn" id="bg3" />
 <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg4.jpg" alt="" class="bgzoomOut" id="bg4" />
 <img src="http://www.w3cplus.com/demo/css3/CSS3Fullbackground/bg5.jpg" alt="" class="bg rotate" id="bg5" />
 </body>
 </html>
  

转载于:https://www.cnblogs.com/yimei/p/7691765.html

weixin_30466421
关注
css 半圆形分部图片_如何使用CSS构建半圆甜甜圈图
Web design 教程小屋
07-09 1441
尽管HTML5 Canvas和SVG可能是用于构建图表的更优雅的解决方案，但是在本教程中，我们将学习如何仅使用普通CSS来构建自己的甜甜圈图。 要了解我们将要创建的内容，请看下面的嵌入式CodePen演示： HTML标记 我们从一些非常基本的标记开始； 一个普通的无序列表，其中每个列表项中都有一个span元素： <ul class="chart-skills"> &l...
如何用伪类控制阴影
weixin_44540285的博客
01-26 350
开发工具与关键技术：DW与CSS 作者：刘华叶 撰写时间：2019年1月24日 图片是我们经常用到的东西，但是如何让图片变得更美观，我们可以给它设置一个阴影，可以加个伪类，就变得不一般了。 一． 代码如下： 代码很简单，在HTML代码里面设置个盒子，引入图片，就可以了。 在CSS代码里面设置图片的宽高，然后加一个伪类，设置阴影属性，一句代码就搞定了。 第一张图片是没有变化的，第二张图片就是把...
CSS应用 - :before, :after, box-shadow
pp1专栏
02-27 3696
利用CSS伪元素 ：before 和 ：after 可以在文档前后插入内容而不改变文档原有结构，再配合 box-shadow 可以实现很炫的效果,下面就展示三个例子： 1、利用 :before 和 :after 添加背景，比如给一段文字前后打引号； 2、利用 :before, :after, box-shadow 实现3D阴影效果; 3、利用 :before, :after, box-shadow 实现照片叠加效果.
css before after用法_不容错过！css阴影趣味用法大全～
weixin_36292971的博客
12-29 351
使用Box-shadow属性表现阴影效果是现代浏览器中是一个非常有用的技巧，通过它我们可以做出很多非常酷的东西。让我们来一步一步的了解box-shadow属性的基本用法，然后进一步了解::before和::after伪元素的用法。 原文来自链接：https://www.webhek.com/post/css-box-shadow-property.html基本用法box-shadow: 1px ...
html5种状态,HTML5有三个状态的滑块开关控件
weixin_39596835的博客
05-31 633
CSS语言：CSSSCSS确定.switch {position: relative;width: 125px;height: 55px;border-radius: 3px;margin: 2px;-webkit-transition: .25s ease;transition: .25s ease;}.switch:not(.disabled) .slider {cursor: pointer...
2021年CSS特效八：开关按钮
码蝗的博客
03-21 143
<!DOCTYPE html> <html lang="en"> <head> 更多的特效代码全放在,码蝗网,打破下载 <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>开关按钮</title> <style> ...
CSS伪元素：after：before的特殊用法demo
06-19
在这个特定的示例中，我们关注的是CSS中的两个重要概念：伪元素`:after`和`:before`。这两个伪元素允许我们在不添加额外HTML标记的情况下，向元素的内容中插入内容。 `:after`和`:before`伪元素在CSS3中被引入，...
CSS伪元素 :before, :after, box-shadow应用
09-25
本文将重点介绍CSS中的伪元素`:before`和`:after`以及`box-shadow`属性的应用，这三个特性可以帮助我们创造出富有创意和视觉吸引力的设计。 首先，CSS伪元素`:before`和`:after`允许我们在元素内容的前面或后面添加...
使用before和:after伪类制作css3圆形按钮
09-25
4. **使用:before和:after伪类**：通过使用:before和:after伪类，我们在页面上没有添加任何实际内容的情况下，为按钮添加了可视化的圆圈和文字。这两个伪类的“content”属性设置为空，因为这里我们不需要向页面添加...
html 折叠焦点图切换,自适应全屏焦点图切换CSS3特效
weixin_34073886的博客
05-31 423
自适应全屏焦点图切换CSS3特效代码*{margin:0;padding:0;list-style: none;}img.bg{min-width: 1024px;min-height: 100%;width: 100%;height: auto!important;height: 100%;position: fixed;top: 0;left: 0;z-index: 1;}@media scr...
一个简单的slider滑块组件
weixin_33901926的博客
04-28 3756
2019独角兽企业重金招聘Python工程师标准>>> ...
使用Before和After伪元素制作文本阴影
huangbaokang的博客
08-24 940
需要理解:before和:after的使用，如下代码收藏于慕课网。 代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=utf-8 /&gt; &lt;title&gt;before、after&lt;/title&gt; &lt;style&gt; .box h3{ text-align:cen
浅谈css的伪元素::after和::before
weixin_30702413的博客
11-23 3806
css中的::after和::before已经被大量地使用在我们日常开发中了，使用他们可以使我们的文档结构更加简洁。但是很多人对::after和::before仍不是特别了解，究竟他们是做什么的？如何使用他们？什么时候应该使用他们？笔者总结了一些对伪元素的理解和使用经验。 一、概念： 1.定义 The CSS ::before(::after)pseudo-elementmatches ...
CSS画矩形、圆、半圆、弧形、半圆、小三角、疑问框
热门推荐
milijiangjun的博客
04-11 1万+
转载自：https://blog.csdn.net/lzgs_4/article/details/46827761在网页中，经常会用到各种Icon，如果老是麻烦设计狮画出来不免有些不好意思，所以有时候我们也可以用CSS写出各种简单的形状，一来可以减轻他们的负担，二来也可以使用CSS替代图片，提高加载速度。在网页中，结合CSS能画出来的最基本的形状就是矩形，所以，我们可以在矩形的基础上做出各种变换，...
css3制作翘边阴影
kongjiea笔记
02-09 5974
阴影一要点： 1、用一个圆角的层，设置阴影，z-index层级低于父级即可；但是其相对定位的属性需要另外设置在另一个class上如下图设置在effect上而不设置在wrap上 2、圆角的层可用after和before来实现，如果after和before2个伪类都设置阴影并重叠起来 ，阴影效果更好。 翘边阴影要点： 1、同上用after和before伪类，设置class属性trans
div 加伪类:focus
秋水不寒的专栏
07-20 7201
以前只知道input  可以加focus ，昨天项目中有需要在使用div 点击效果改变，不太想js，就尝试了 下div:focus 以下是个人总结的优缺点： .testdiv{background-color:red} 123 123 123 123 123 123 效果点击div 当前div背景为红色 省略一部分js 代码 缺点：当键
CSS盒子阴影 伪类
大灰狼的小绵羊哥哥的博客
09-12 1235
box-shadow:水平阴影，垂直阴影，模糊距离，阴影尺寸，阴影颜色，内外阴影 注意：内阴影inset 外阴影默认值 after before 伪类 这两个伪类功能：在目标盒子追加新盒子 after 子集结尾处追加盒子 before 子集开头处追加盒子 注意： 1.伪类追加的盒子显示模式都是行内，一般配合定位去使用 2.after和before伪类
CSS伪类before和after实战与CSS3应用详解
- 在提供的代码示例中，`.div`、`.after`和`.before`类分别展示了如何使用`before`和`after`伪类。`.divb`中的`.block`元素需要转换为块级元素，因为块级元素通常占据一行，而内联元素的`<span>`在默认情况下不会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值