2018-3-14 CSS3常用效果整理
今天整理了一下我认为常用的一些CSS3 的效果，有静态也有动画，已整理成代码。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS3</title> <link rel="stylesheet" href="css/css3_css.css"> </head> <body> <!--div的旋转--> <div id="div1">1</div> <div id="div2">2</div> <!--边框的设置--> <div id="div3">3</div> <!--阴影效果的实现--> <div id="div4">4</div> <!--圆角--> <div id="div5">5</div> <div id="div6">6</div> <div id="div7">7</div> <div id="div8">8</div> <!--背景的设置--> <div id="div9">9</div> <div id="div10">10</div> <!--背景位置的设置--> <div id="div11">11</div> <!--颜色的渐变--> <!--由上到下的渐变--> <div id="div12">12</div> <!--由左到右的渐变--> <div id="div13">13</div> <!--三颜色不均匀渐变--> <div id="div14">14</div> <!--径向渐变--> <div id="div15">15</div> <!--rotateX()方法，围绕其在一个给定度数X轴旋转的元素，rotateY()方法，围绕其在一个给定度数Y轴旋转的元素--> <div id="div16">16</div> <!--过渡动画--> <div id="div17">17</div> <div id="div18">18</div> <!--动画效果--> <div id="div19">19</div> <div id="div20">20</div> </body> </html>
主要效果由css页面实现，引入文件css3_css.css：
/* CSS Document */ /*div的旋转*/ div{ width:100px; height: 100px; background: #4AE3E5; margin-bottom: 50px; position: relative; left: 20px; color: #FF0004; } #div2{ transform: rotate(45deg); } /*边框与圆角的设置*/ #div3{ border: 2px solid #0F19D3; padding: 10px 10px; border-radius: 20px; } #div4{ box-shadow: 10px 10px 5px red; /*第一个数值控制阴影左右移动， 第二个数值控制阴影上下移动， 第三个数值控制阴影的大小和模糊程度，数值越大，阴影面积越大，同时越模糊 第四个控制阴影颜色*/ } /*圆角：设左上角为①，顺时针分别为②③④*/ #div5{ border-radius: 15px; /* 4个圆角都是15px*/ } #div6{ border-radius: 15px 30px; /* ①③圆角为15px，②④圆角为30px*/ } #div7{ border-radius: 15px 30px 50px; /* ①圆角为15px，②④圆角为30px，③圆角为50px*/ } #div8{ border-radius: 15px 30px 50px 10px; /* ①圆角为15px，②圆角为30px，③圆角为50px,④圆角为10px*/ } #div9{ /* 同时引入两张背景图*/ background-image: url(../img/beijingse.png), url(../img/beijingse3.png); /* 设置两张背景图的位置*/ background-position: right bottom,left top; /* 设置两张背景图是否平铺*/ background-repeat: no-repeat,repeat; /* 设置文字位置*/ padding: 15px; } /*另一种写法*/ #div10{ background: url(../img/beijingse.png) right bottom no-repeat,url(../img/beijingse3.png) left top repeat; padding: 15px; } #div11{ background: url(../img/beijingse3.png) no-repeat left; /* 内容内部*/ background-origin: content-box; /* 内容外部*/ background-origin: border-box; /* 内容外部*/ background-origin: padding-box; padding-left: 70px; } #div12{ /* 由上到下颜色渐变*/ background: linear-gradient(blue,red ); } #div13{ /* 由左到右颜色渐变*/ background: linear-gradient(to right,blue,red ); } #div14{ /* 三颜色不同比例渐变*/ background: linear-gradient(blue 10%, green 85%, red 90%); } #div15{ /* 径向渐变*/ background: radial-gradient(red, green, blue); } #div16{ /* 3D转换*/ transform: rotateX(120deg);/*x轴*/ transform: rotateY(60deg);/*y轴*/ } #div17{ /* 过渡动画*/ transition:width 2s,height 2s,transform 2s; } /*更改后div的效果*/ #div17:hover{ width: 500px; height: 200px; transform: rotate(-45deg); } #div18{ /* 过渡动画发生在宽度，1s完成，直线发生，2s延迟后发生*/ transition: width 1s linear 2s; } #div18:hover{ width: 200px; } /*div动画*/ #div19{ position:relative; animation:myfirst 5s; } @keyframes myfirst /*当动画进行到百分比进度的时候，背景颜色和位置发生变化*/ { 0% {background:#4AE3E5; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:#4AE3E5; left:0px; top:0px;} }
