首页 > 代码库 > 一些简单css3效果的整理
一些简单css3效果的整理
代码：
html:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="style.css"> 7 </head> 8 <body> 9 <div class="con con1">10 <img src="1.jpg" class="img1">11 <h2>第一文字</h2>12 <p>下方文字闪出来</p>13 </div>14 <div class="con con2">15 <img src="2.jpg">16 <p class="p p1">第一先锋</p>17 <p class="p p2">第二二先锋</p>18 <p class="p p3">第三三三先锋</p>19 </div>20 <div class="con con3">21 <img src="3.jpg">22 <p>好好学习，天天向上好好学习，天天向上好23 好学习，天天向上好好学习，天天向上好好24 学习，天天向上好好学习，天天向上好好学25 习，天天向上26 </p>27 </div>28 <div class="con con4">29 <img src="4.jpg">30 <div class="con44">31 <p>晨落梦公子</p>32 </div>33 </div>34 <div class="con con5">35 <img src="5.jpg">36 <div class="box"></div>37 </div>38 <div class="con con6">39 <img src="6.jpg">40 <h2>旋转消失</h2>41 <p>我只是内容不要看我</p>42 </div>43 <div class="con con7">44 <img src="7.jpg">45 <div class="box"></div>46 </div>47 <div class="con con8">48 <img src="8.jpg">49 <div class="top"></div>50 <div class="left"></div>51 <div class="right"></div>52 <div class="bottom"></div>53 </div>54 <div class="con con9">55 <img src="9.jpg">56 </div>57 </body>58 </html>
css:
1 * { 2 list-style: none; 3 padding: 0; 4 margin: 0; 5 } 6 7 /*+++++++++++++++++++++con1++++++++++++++++++++++++++*/ 8 .con { 9 position: relative; 10 float: left; 11 width: 350px; 12 height: 300px; 13 overflow: hidden; 14 } 15 16 .con img { 17 width: 100%; 18 height: 100%; 19 position: absolute; 20 } 21 22 .con1 .img1 { 23 width: 120%; 24 margin-left: -30px; 25 left: 0; 26 opacity: 1; 27 -webkit-transition: all 1s ease; 28 } 29 30 .con1:hover .img1 { 31 left: 30px; 32 opacity: 0.6; 33 } 34 35 .con1 h2 { 36 color: #fff; 37 position: absolute; 38 top: 180px; 39 left: 5px; 40 -webkit-transition: all 1s ease; 41 } 42 43 .con1:hover h2 { 44 top: 220px; 45 } 46 47 .con1 p { 48 color: #fff; 49 font-size: 12px; 50 position: absolute; 51 top: 300px; 52 left: 5px; 53 -webkit-transition: all 1s ease; 54 } 55 56 .con1:hover p { 57 top: 260px; 58 } 59 60 /*++++++++++++++++++++con2+++++++++++++++++++++++*/ 61 .con2 p { 62 font-size: 12px; 63 color: #000; 64 position: absolute; 65 background: #ffffff; 66 padding: 5px; 67 } 68 69 .con2 .p1 { 70 top: 150px; 71 left: -80px; 72 -webkit-transition: all 1s ease-in-out; 73 } 74 75 .con2 .p2 { 76 top: 180px; 77 left: -100px; 78 -webkit-transition: all 1s ease-in-out; 79 -webkit-transition-delay: 0.2s; 80 } 81 82 .con2 .p3 { 83 top: 210px; 84 left: -120px; 85 -webkit-transition: all 1s ease-in-out; 86 -webkit-transition-delay: 0.4s; 87 } 88 89 .con2:hover .p1, 90 .con2:hover .p2, 91 .con2:hover .p3 { 92 left: 20px; 93 } 94 95 /*+++++++++++++++++++con3++++++++++++++++++++++++*/ 96 .con3 p { 97 background: #fff; 98 color: #000000; 99 position: absolute;100 text-indent: 2em;101 font-size: 12px;102 top: 300px;103 -webkit-transition: all 1s ease-in-out;104 }105 106 .con3:hover p {107 top: 255px;108 }109 110 /*+++++++++++++++++con4++++++++++++++++++++++++++++*/111 .con4 .con44 {112 width: 200%;113 height: 100%;114 background: #fff;115 font-size: 12px;116 color: #000000;117 position: absolute;118 top: 300px;119 -webkit-transition: all 1s ease-in-out;120 }121 122 .con4 .con44 p {123 margin-left: 300px;124 line-height: 150px;125 -webkit-transition: all 1s ease-in-out;126 }127 128 .con4:hover .con44 {129 -webkit-transform: rotate(-20deg);130 -webkit-transform-origin: 0 300px;131 }132 133 .con4:hover p {134 -webkit-transform: rotate(20deg);135 }136 137 /*+++++++++++++++con5+++++++++++++++++++++++*/138 .con5 img {139 width: 120%;140 left: -40px;141 -webkit-transition: all 1s ease-in-out;142 }143 144 .con5:hover img {145 left: 0;146 }147 148 .con5 .box {149 border: 2px solid #000000;150 width: 250px;151 height: 250px;152 position: absolute;153 top: 25px;154 left: 50px;155 -webkit-transform: rotate(-90deg);156 -webkit-transform-origin: -100px -100px;157 -webkit-transition: all 1s ease-in-out;158 }159 160 .con5:hover .box {161 -webkit-transform: rotate(0deg);162 -webkit-transform-origin: 0 0;163 }164 165 /*++++++++++++++++++con6++++++++++++++*/166 .con6 h2 {167 position: absolute;168 color: #000;169 top: 100px;170 left: 10px;171 -webkit-transition: all 1s ease-in-out;172 }173 174 .con6 p {175 font-size: 24px;176 color: #000;177 position: absolute;178 top: 150px;179 left: 10px;180 -webkit-transition: all 1s ease-in-out;181 }182 183 .con6:hover h2, .con6:hover p {184 -webkit-transform: skewX(90deg);185 }186 187 /*++++++++++++++++con7++++++++++++++++++++++++++*/188 .con7 .box {189 position: absolute;190 border: 2px solid #fff;191 width: 350px;192 height: 300px;193 -webkit-transition: all 1s ease-in-out ;194 }195 196 .con7 img {197 width: 450px;198 height: 400px;199 left: -50px;200 top: -50px;201 -webkit-transition: all 1s ease-in-out;202 }203 204 .con7:hover img, .con7:hover .box {205 opacity: 0.6;206 -webkit-transform: scale(0.8);207 }208 209 /*+++++++++++++con8++++++++++++++++++++++++++*/210 .con8 .top {211 position: absolute;212 top: 35px;213 left: 25px;214 width: 300px;215 height: 1px;216 background: black;217 -webkit-transform: scale(0);218 -webkit-transition: all 1s ease-in-out;219 }220 221 .con8 .bottom {222 position: absolute;223 top: 265px;224 left: 25px;225 width: 300px;226 height: 1px;227 background: black;228 -webkit-transform: scale(0);229 -webkit-transition: all 1s ease-in-out;230 }231 232 .con8 .left {233 position: absolute;234 top: 25px;235 left: 35px;236 width: 1px;237 height: 250px;238 background: black;239 -webkit-transform: scale(0);240 -webkit-transition: all 1s ease-in-out;241 }242 243 .con8 .right {244 position: absolute;245 top: 25px;246 left: 315px;247 width: 1px;248 background: black;249 height: 250px;250 -webkit-transform: scale(0);251 -webkit-transition: all 1s ease-in-out;252 }253 254 .con8:hover .right,255 .con8:hover .top,256 .con8:hover .bottom,257 .con8:hover .left {258 -webkit-transform: scale(1);259 }260 261 /*++++++++++++++con9++++++++++++++++++++++*/262 .con9 {263 -webkit-transition: all 1s ease-in-out;264 }265 266 .con9:hover {267 opacity: 0.5;268 }
这里记录一下鄙人对于animation和transition不同之处的理解（待补充。）
animation
可以实现永远循环的动画
transition
可以实现hover鼠标移除移入的动画
一些注意点：（带补充。）
1，transform的行使对象应该是块级元素
2，写hover动画的时候，默然对象状态要有和hover状态中与之对应的属性，例子：如果hover里面有left:30px,对应的原始状态里面也应该有left:0;
3，初始状态中有rotate(90deg),再在hover里面写rotate(0deg)，hover后目标元素应该是保持其应有的状态（这里指角度），而不是其应有状态在旋转-90度，移动，缩放等同理
4，动画有时候会设置旋转点，而这个设置应该在本身样式里面设置，而不是在hover里面设置。
一些简单css3效果的整理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。