版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/juer2017/article/details/84893561
本来从事的安卓开发，由于工作需求被迫做起了前端开发。工作之余看了一些css代码并写了一些简单的demo。
上截图大致效果如下：
主要用了：
一、CSS3 的文字阴影特效+媒体查询
.element {
text-shadow: none;
font-size: 20px;
padding: 10px;
font-weight: bold;
color: #514E80;
}
/*text-shadow 内容阴影
box-shadow 盒内阴影*/
@media screen and (min-width: 580px) {
.element {
text-shadow: -15px -8px 2px #a0a0a0;
box-shadow: inset 10px 5px 100px #a0a0a0;
font-size: 40px;
padding: 20px;
font-weight: bold;
color: #007aff;
text-align: center;
}
}
.no-spread {
box-shadow: 0px 15px 10px;
width: 200px;
height: 200px;
background: #a0a0a0;
float: left;
margin-top: 10px;
margin-left: 10px;
text-align: center;
line-height: 200px;
}
.spread {
box-shadow: 0 10px 10px -10px;
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
text-align: center;
line-height: 200px;
background: #a0a0a0;
}二、CSS3 结构化伪类+CSS的2D变形+CSS3 动画效果
span {
height: 5rem;
width: 5rem;
background-color: blue;
display: inline-block;
margin-left: 10px;
}
span:nth-child(2n+3) {
background-color: #f90;
border-radius: 50%;
}
/*缩放（放大或缩小）*/
.scale:hover {
transform: scale(1.5);
}
/*移动（上下左右）*/
.translate:hover {
transform: translate(10px, -10px);
}
/*旋转*/
.rotate:hover {
transform: rotate(30deg);
}
/*旋转+缩放*/
.rotate2:hover {
transform: rotate(30deg) scale(1.5);
}
/*偏斜*/
.skew:hover {
transform: skew(10deg, 10deg);
}
/*旋转+偏斜+缩放+位移
（合用要注意位置：要不然容易变形）*/
.skew2:hover {
transform: rotate(45deg) skew(10deg, 10deg) scale(1.2) translate(20px, -20px);
}
.background-change {
animation: fillBg 3s, pulse 3s;
border: 1px solid #ccc;
}
/*背景从蓝到黄3秒渐变效果*/
@keyframes fillBg {
0% {
background-color: blue;
}
100% {
background-color: orange;
}
}
/*脉冲效果*/
@keyframes pulse {
to {
box-shadow: 0 0 5px 10px blue;
}
}三、背景渐变
.linear-gradient {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(red, orange, yellow, green, blue, deepskyblue, blueviolet);
}
/*background: linear-gradient 默认从上到下
background: linear-gradient(to top) 从下到上*/
.linear-gradient2 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(to top, red, orange, yellow, green, blue, deepskyblue, blueviolet);
}
/*background: linear-gradient(to bottom left) 从右上到左下*/
.linear-gradient3 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(to bottom left, red, orange, yellow, green, blue, deepskyblue, blueviolet);
}
/*background: linear-gradient(to bottom left) 从左上到右下*/
.linear-gradient4 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(to bottom right, red, orange, yellow, green, blue, deepskyblue, blueviolet);
}
/*background: linear-gradient(to bottom left) 从右下到左上*/
.linear-gradient5 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(to top left, red, orange, yellow, green, blue, deepskyblue, blueviolet);
}
/*background: linear-gradient(to bottom left) 从左下到右上*/
.linear-gradient6 {
width: 200px;
height: 200px;
float: left;
margin-left: 10px;
margin-top: 10px;
background: linear-gradient(to top right, red, orange, yellow, green, blue, deepskyblue, blueviolet);
}四、色标
/*渐变效果中的色标是用逗号进行分隔的。第一部分是颜色，第二部分是颜色的位置。一般建
议不要混用单位。你可以在一个渐变效果中添加多个色标，而且可以使用关键词、十六进制、
RGBA或者HSLA等色值写法。*/
.linear-gradient7 {
width: 200px;
height: 200px;
background: linear-gradient(#f90 0, #f90 2%, #555 2%, #eee 50%, #555 98%, #f90 98%, #f90 100%);
margin-top: 10px;
margin-left: 10px;
float: left;
}五、重复渐变
/*repeating-radial-gradient 像素值来标记色标之间的距离*/
.repeating-radial-gradient {
width: 200px;
height: 200px;
margin-top: 10px;
margin-left: 10px;
float: left;
background: repeating-radial-gradient(red 0px, orange 5px, yellow 10px, green 15px, blue 20px, deepskyblue 25px, blueviolet 30px);
}
/*使用渐变背景创造图案*/
.carbon-fibre {
width: 400px;
height: 200px;
background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
background-color: #282828;
background-size: 16px 16px;
margin-top: 10px;
margin-left: 10px;
float: left;
}六、绝对定位两张图实现太空图
.bg-multi {
width: 1000px;
height: 700px;
float: left;
margin-top: 10px;
background: url('../images/moon.jpg') no-repeat;
margin-left: 10px;
}
.img-st {
width: 260px;
height: 200px;
position: absolute;
z-index: 9999;
margin-left: 700px;
margin-top: 400px;
}最后奉上html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 Demo</title>
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<div class="element">CSS3 Demo</div>
<div style="width: 100%;height: auto;margin-top: 10px;">
<span class="scale"></span><span class="translate"></span><span class="background-change"></span><span
class="rotate"></span>
<span class="scale"></span><span class="rotate2"></span><span class="scale"></span><span class="skew"></span>
<span class="scale"></span><span class="skew2"></span><span class="scale"></span><span class="scale"></span>
<span class="scale"></span><span class="scale"></span><span class="scale"></span><span class="scale"></span>
<span class="scale"></span><span class="scale"></span><span class="scale"></span><span class="scale"></span>
</div>
<div style="width: 100%;height: 220px;">
<div class="no-spread">未设置阴影尺寸</div>
<div class="spread">设置了阴影尺寸</div>
<div class="linear-gradient"></div>
<div class="linear-gradient2"></div>
</div>
<div style="width: 100%;height: 220px;">
<div class="linear-gradient5"></div>
<div class="linear-gradient6"></div>
</div>
<div style="width: 100%;height: 220px;">
<div class="linear-gradient3"></div>
<div class="linear-gradient4"></div>
</div>
<div style="width: 100%;height: 220px;">
<div class="linear-gradient7"></div>
<div class="repeating-radial-gradient"></div>
<div class="carbon-fibre"></div>
</div>
<div class="bg-multi">
<img class="img-st" src="../images/stars.png">
</div>
</body>
</html>