上周又学了些新的内容,这些内容如果会用的话可自己设计一些好看、有趣的图了。具体的有过渡、实现进度条效果、转换之移动、转换之旋转、转换之缩放和动画、透视效果、rotateX。下面是具体内容。
过渡
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡</title> <style> #container{ width: 500px; height: 300px; border: 1px solid black; } .box{ position: absolute; top:20px; left: 20px; width: 100px; height: 100px; background: turquoise; transition: left 2s ease; } #container:hover .box{ left: 300px; border-radius: 50%; background: violet; } </style> </head> <body> <div id="container"><div class="box"></div> </div> </body> </html>
结果:
进度条
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现进度条效果</title> <style> .box { width: 150px; height: 15px; border: 1px solid #f00; border-radius: 5px; } .bar { width: 0%; height: 100%; background-color: red; border-radius: 5px; transition: width 1s ease-out; } .box:hover .bar { width: 90%; } </style> </head> <body> <div class="box"> <div class="bar"></div> </div> </body> </html>
结果:
转换之移动
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转换之移动</title> <style> div { width: 100px; height: 75px; border: 1px solid black; background-color: #cccccc; } div#div2 { /*transform: translate(50px, 100px);*/ transform: translateY(50px); transform: translateX(50px); background-color: green; } </style> </head> <body> <div>床前明月光,</div> <div id="div2">凝视地上霜。</div> </body> </html>
结果:
转换之旋转
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转换之旋转</title> <style> .box { position: absolute; left: 200px; top:200px; width: 200px; height: 200px; background-color: blueviolet; transform-origin: 10px 10px; transform: rotate(45deg); } </style> </head> <body><div class="box"></div> </body> </html>
结果:
转换之缩放
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>转换之缩放</title> <style> div { position: absolute; top: 50px; left: 50px; width: 100px; height: 100px; background-color: deeppink; } div:hover { transform: scale(.2,.2); } </style> </head> <body><div></div> </body> </html>
结果:
动画
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> .box { position: absolute; left: 10px; top: 10px; width: 100px; height: 100px; background-color: red; animation-name: move; animation-duration: 2s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: 3; animation-direction: normal; animation-fill-mode: backwards; } .box:hover { animation-play-state: paused; @keyframes move { /*from { left: 10px; } to { left: 100px; } 0% { left: 10px; } 100% { left: 400px; } } </style> </head> <body><div class="box"></div> </body> </html>
结果:
透视效果
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>透视效果</title> <style> body{ perspective: 200px; } .box{ position: absolute; left: 300px; top: 60px; width: 100px; height: 100px; background-color: turquoise; transform: translateZ(100px); transform: rotate3d(3,1,1,45deg); } </style> </head> <body> <div class="box"></div> </body> </html>
结果:
rotateX
实例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 300px; } img{ display: block; margin: 100px auto; transition: all 1s; } img:hover { /*transform: rotateX(45deg); transform: rotateY(45deg);*/ transform: rotateZ(45deg); } </style> </head> <body> <img src="images/pic.jpg" /> </body> </html>
结果:
上周内容就是这些,但这些都是动态的由于没法在CSDN博客上显现,所以这只是静态,见谅了。