1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>css3</title> 6 圆角边框： 7 border-radius属性： 8 border-radius：水平值 垂直值 两个值一样时，写一个 9 border-top-left-ridius：左上角的形状 10 border-top-right-ridius：右上角的形状 11 border-bottom-left-ridius：左下角的形状 12 border-bottom-right-ridius：右下角的形状 13 如果画圆形，水平值=垂直值=1/2正方形边长 14 阴影： 15 box-shadow属性： 16 box-shadow：inset/outset 水平偏移 垂直偏移 模糊距离 阴影颜色 17 inset：可选，内部阴影 18 outset：默认值，外部阴影 19 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移 20 21 文本与文字： 22 text-shadow属性：设置文本阴影属性，可以设置字体效果 23 text-shadow：水平偏移 垂直偏移 阴影大小 阴影颜色； 阴影大小可以省略 24 水平偏移、垂直偏移都为正数，则阴影向右下角偏移；都为负数，则阴影都向左上角偏移 25 word-wrap属性：设置长文本换行属性，允许长单词、url强制换行 26 normal:正常显示，默认不拆分 27 break-word:拆分成若干行 28 @font-face规则：定义网页字体即web字体,放在服务器上，需要时下载使用 29 字体格式文件后缀：.TTF、.OTF、.EOT、.SVG、.WOFF；支持不同的浏览器 30 生成其他格式字体网站：https://www.fontsquirrel.com/tools/webfont;提供一种字体，转换成其他格式，下载使用 31 使用@font-face规则，引用的字体名称font-family的值要相同,如下:P{font-family:FontName;} 32 33 2D转换方法：对元素进行平面上旋转、缩放、移动、拉伸 34 transform属性： 35 rotate():旋转函数，单位为deg，值可以是正负值，如：transform:rotate(xx deg); 36 正值顺时针旋转，负值逆时针旋转 37 scale():缩放函数，如：transfrom:scale(x,y); 38 x-水平方向缩放的倍数，y-垂直方向缩放的倍数，y若省略，值同x； 39 0-1：缩小；>1:放大 40 41 过度：从一种状态过度都另一种状态，两种状态之间的变化 42 transition属性：将元素的某个属性从“一个值”在指定的时间内过度到“另一个值” 43 transition: 属性名 持续时间 过度方法 延迟时间 44 transition-property属性：属性名/all；多个属性名用逗号隔开； 对哪个属性进行变化 45 transition-duration属性：持续时间 46 transition-timing-function属性：过度使用的方法（函数）；过度的效果 47 属性取值： 48 linear：匀速 49 ease：慢快慢 50 ease-in：慢快 51 ease-out：快慢 52 ease-in-out：慢快慢 53 transition-delay属性:延迟开始播放时间 54 55 动画：一个元素通过animation属性来完成若干种状态之间的一个转换 56 动画规则：@keyframes:关键帧 57 @keyframes mycolor{定义动画名称；播放图片可以设置：50%{background: url(image/image-05.jpg);} 58 0% {background-color: red;} 定义每个动画状态名称，0%表示开始状态 59 30% {background-color: blue;} 30%表示动画进行到30%状态 60 60% {background-color: yellow;} 60%表示动画进行到60%状态 61 100% {background-color: green;} 100%表示动画结束状态 62 } 63 animation属性： 64 #anima:hover{ 65 animation: mycolor 5s linear; 66 简写方式：mycolor表示调用动画规则的名称，5s表示动画（0%-100%）完成的时间，linear表示动画播放的方法 67 animation-name：引用@keyframes动画的名称 68 animation-duration：动画完成的时间 69 animation-timing-function：动画的播放方式，规定动画的速度曲线，默认是ease 70 animation-play-state：running/paused，表示动画播放中或者结束状态，可以设置鼠标悬停时播放或者结束 71 } 72 73 3D变换 74 3D：transfrom-style：perserve-3d,声明这是个3D变换,要使用3d变换，必须设置3d声明 75 旋转： 76 transform属性：空间上的旋转角度XYZ deg，沿着XYZ轴旋转，z轴垂直于XY轴 77 rotateX(n deg)：沿着X轴旋转,n为旋转角度，deg为单位 78 rotateY(n deg)：沿着Y轴旋转 79 rotateZ(n deg)：沿着Z轴旋转 80 transfrom:rotateX(60deg);表示沿X轴旋转60度 81 透视：perspective属性: 近大远小，表示视线的距离，值越大则越不明显，值越小则越明显 82 perspective：100px;视线的距离为100px； 83 84 <style type="text/css"> 85 #box{ 86 text-align: center; 87 height: 100px; 88 width: 150px; 89 border: 1px solid blue; 90 border-top-left-radius: 40px 20px; 91 border-bottom-right-radius: 20px; 92 box-shadow: 20px 20px 10px #888 93 } 94 #text{ 95 margin: 100px auto; 96 height: 100px; 97 width: 200px; 98 border: 1px solid blue; 99 text-shadow: 2px 2px 1px #FF0000; 100 } 101 p.wrap{ 102 width: 8em; 103 border: 1px solid #333; 104 word-wrap: break-word; 105 } 106 @font-face{ 107 font-family: FontName； 108 src:url('fonts/kastler.ttf'), 109 url('fonts/kastler.eot'), 110 url('fonts/kastler.woff'), 111 url('fonts/kastler.svg'); 112 } 113 p{ 114 font-family: FontName; 115 } 116 div{ 117 width: 100px; 118 height: 75px; 119 background-color: #ccc; 120 border: 1px solid black; 121 } 122 #rotateDiv{ 123 transform: rotate(30deg); 124 } 125 #box1{ 126 margin: 100px auto; 127 } 128 #box1:hover{ 129 transform: scale(1.2); 130 } 131 #trsf{ 132 margin: 100px auto; 133 height: 30px; 134 width: 150px; 135 border-radius: 5px; 136 color: #000; 137 background-color: silver; 138 transition: all 3s linear 3s; 139 } 140 #trsf:hover{ 141 color: white; 142 background-color: #45B823; 143 } 144 @keyframes mycolor{ 145 0% {background-color: red;} 146 30% {background-color: blue;} 147 60% {background-color: yellow;} 148 100% {background-color: green;} 149 } 150 @keyframes img{ 151 0%{background: url(image/image-03.jpg);} 152 50%{background: url(image/image-05.jpg);} 153 100%{background: url(image/image-06.jpg);} 154 } 155 #anima:hover{ 156 animation: img 5s linear 2s; 157 } 158 #anima{ 159 margin: 100px auto; 160 } 161 #stage{ 162 width: 306px; 163 height: 101PX; 164 margin: 100px auto; 165 perspective: 100px; 166 } 167 .box3{ 168 width: 100px; 169 height: 100px; 170 float: left; 171 transition: 1s linear 5s; 172 transform-style: preserve-3d; 173 } 174 img{ 175 width: 100px; 176 height: 100px; 177 } 178 .x:hover{ 179 transform: rotateX(60deg); 180 } 181 .y:hover{ 182 transform: rotateY(60deg); 183 } 184 .z:hover{ 185 transform: rotateZ(60deg); 186 } 187 188 189 </style> 190 </head> 191 <body> 192 <h1></h1> 193 <p class="wrap">ASDFGHJKLZXCVBNMQWERTYUIOP</p> 194 <div id="box">圆角边框及阴影</div> 195 <div id="text">文本阴影</div> 196 <div id="container"> 197 <div>正常角度</div> 198 <div id="rotateDiv">旋转角度</div> 199 </div> 200 <div id="box1">鼠标悬停放大缩小效果</div> 201 <div id="trsf">鼠标悬停过度效果</div> 202 <div id="anima">鼠标悬停动画播放效果</div> 203 <div id="stage"> 204 <div class="box3 x"> 205 <img src="image/image-03.jpg"> 206 </div> 207 <div class="box3 y"> 208 <img src="image/image-05.jpg"> 209 </div> 210 <div class="box3 z"> 211 <img src="image/image-06.jpg"> 212 </div> 213 214 </div> 215 <br/> 216 <br/> 217 <br/> 218 </body> 219 </html>