来一波CSS3操作
Posted Android交流平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了来一波CSS3操作相关的知识，希望对你有一定的参考价值。
本来从事的安卓开发，由于工作需求被迫做起了前端开发。工作之余看了一些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;
}
如需了解更多请下载《响应式Web设计+html5和CSS3实战+第2版》进行观看
网盘链接：https://pan.baidu.com/s/19izC60qYvDNuKjwiT3oUJg
详细代码文章请点击‘阅读原文’
以上是关于来一波CSS3操作的主要内容，如果未能解决你的问题，请参考以下文章