box-shadow实现光剑
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
/* defaults */
html {
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 16px;
}
*,
*:before,
*:after {
-moz-box-sizing: inherit;
box-sizing: inherit;
}
body,
html {
height: 100%;
background-color: black;
color: white;
}
a {
color: inherit;
}
/* cf */
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
/* lightsaber */
.lightsaber-cont {
height: 100%;
text-align: center;
}
.lightsaber-cont:before {
display: inline-block;
height: 100%;
margin-right: -0.25em;
vertical-align: middle;
content: "";
}
.lightsaber {
display: inline-block;
width: 85%;
height: 20px;
vertical-align: middle;
}
/* blade */
@keyframes blade-glow {
0% {
box-shadow: 20px 0 50px 6px;
}
50% {
box-shadow: 20px 0 50px 12px;
}
100% {
box-shadow: 20px 0 50px 6px;
}
}
.blade {
float: right;
position: relative;
z-index: 1;
width: 75%;
height: 14px;
border: 1px solid red;
border-left: none;
margin-top: 3px;
border-radius: 0 47% 47% 0;
background-color: white;
color: red;
animation: blade-glow 4s infinite;
}
/* hilt */
.hilt {
float: left;
position: relative;
z-index: 2;
width: 25%;
height: 100%;
border: 1px solid #333;
border-radius: 35% 20% 20% 35%;
background-color: #999;
}
</style>
</head>
<body>
<div class="lightsaber-cont">
<div class="lightsaber cf">
<div class="blade"></div>
<div class="hilt"></div>
</div>
</div>
</body>
</html>
.
相关推荐
由于qss不支持css3的box-shadow效果，故而该工程中，采用类似android九点图的方式，把背景图截为9分，即4角4边一中心，并把4角4边重绘于待修饰的控件的边缘，从而模拟了box-shadow效果。
由于qss不支持css3的box-shadow效果，故而该工程中，采用类似android九点图的方式，把背景图截为9分，即4角4边一中心，并把4角4边重绘于待修饰的控件的边缘，从而模拟了box-shadow效果。
在CSS3中，border-radius、box-shadow和gradient是三个非常重要的样式属性，它们极大地提升了网页设计的美观性和表现力。让我们逐一深入探讨这三个概念。 首先，`border-radius`属性允许我们为元素的边框添加圆角，...
在网页设计中，CSS3引入了许多新...总的来说，jQuery与CSS3的`box-shadow`属性结合，可以轻松实现各种动态阴影效果，提高用户体验。在实际项目中，可以根据需求灵活运用这些技巧，创建出富有层次感和互动性的网页设计。
今天比较忙，没能好好看新东西，就记录一个常用的CSS3属性吧：box-shadow，表示阴影，如果设置了border-radius圆角，则阴影也是圆角 box-shadow目前是IE9及以上和其他现代浏览器都支持的属性了。 语法： Formal ...
在网页设计中，CSS3的`box-shadow`属性是一个非常重要的工具，用于为元素添加阴影效果，从而增加视觉深度和动态感。这个属性允许我们创建各种各样的阴影样式，包括内阴影、外阴影、模糊半径、偏移量以及阴影颜色，让...
drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法： ....
本篇将详细探讨如何实现IE浏览器对CSS3圆角`border-radius`以及`box-shadow`和`text-shadow`的支持。 首先，`border-radius`属性是CSS3引入的新特性，允许我们为元素的边框创建圆角，而非传统的直角。然而，IE8及...
比如：box-shadow，每次使用CSS3里的box-shadow,都记不清box-shadow怎么使用，都要查阅资料才能实现对应的效果,现在总结一下,box-shadow的使用方法以及box-shadow内阴影的使用，方便以后查看。 一、box-shadow语法 ...
CSS3的`box-shadow`属性是一个非常强大的工具，用于给元素添加阴影效果，无论是外阴影还是内阴影。这个属性能够显著提升网页设计的视觉吸引力，同时保持代码的简洁性。以下是对`box-shadow`属性的详细说明： 1. **...
【box-shadow实现布局区域间隔变色】 在网页设计中，有时候我们需要实现特定的视觉效果，例如将页面划分为不同颜色的区域，而无需修改HTML结构。在这种情况下，我们可以利用CSS的`box-shadow`属性来巧妙地解决问题...
CSS的box-shadow属性是一个功能强大的工具，不仅可以用来给盒子添加简单的阴影效果，还可以通过一些技巧和方法实现更加复杂和个性化的阴影效果，比如曲边阴影和翘边阴影。这种高级阴影效果可以增加网页的立体感和...
本文将探讨如何使用`box-shadow`和`drop-shadow`属性来实现不规则投影，尤其是在处理复杂元素时如何克服`box-shadow`的局限性。 `box-shadow`是CSS3中用于为元素添加阴影效果的属性，它可以为矩形或通过`border-...
box-shadow的使用方法
HTML5 CSS3使用 gradient、box-shadow实现的按钮特效代码大全，带阴影的按钮，个个都很漂亮的CSS3按钮，你借助这些按钮效果，也可进一步学习下gradient、box-shadow的具体用法，对提高CSS3的编程水平有帮助。
下面分别介绍box-shadow阴影的使用： 1、盒子阴影box-shadow box-shadow属性向box添加一个或多个阴影。 语法： box-shadow: offset-x offset-y blur spread color inset; ox-shadow: X轴偏移量 Y轴偏移量 [阴影...
简单的悬停效果基于 <code>box-shadow</code></h1> <button class="fill">Fill In <button class="pulse">Pulse <button class="close">Close <button class="raise">Raise <button class="up">...
box-shadow向框添加一个或多个阴影。IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。语法：代码如下: CSS Code复制内容到剪贴板 box-shadow: h-shadow v-shadow blur spread color...