css3基础01
动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:300px; height:100px; left:100px; background-color: black; position:relative; transition:all 2.5s; } div:hover{ transform: translateX(500px); } </style> </head> <body> <div> </div> </body> </html>
圆形：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:100px; height:100px; border-radius:0; background-color: blueviolet; transition:border-radius 2s linear 0.5s; } div:hover{ border-radius:50px; } </style> </head> <body> <div> </div> </body> </html>
点击显示文字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ margin:0 auto; /* position:absolute; left:40%; top:40%; */ width:300px; height:30px; border:1px solid red; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; transition:all 1s; } div:hover{ height:200px; white-space:normal; } </style> </head> <body> <div>博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。如果博文质量不符合首页要求，会被工作人员移出首页，望理解。如有疑问，请联系contact@cnblogs.com。</div> </body> </html>
触发图片显示文字：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:500px; position: relative; margin:0 auto; overflow: hidden; } p{ position: absolute; top:260px; color:cornsilk; transition: top 1s; } div:hover>p{ top:0px; } img{ } </style> </head> <body> <div> <img src="http://www.peasant9.com:3000/images/1.jpg" style="width:500px;height:300px;" alt=""> <p>博客园是面向开发者的知识分享社区，不允许发布任何推广、广告、政治方面的内容。博客园首页（即网站首页）只能发布原创的、高质量的、能让读者从中学到东西的内容。如果博文质量不符合首页要求，会被工作人员移出首页，望理解。如有疑问，请联系contact@cnblogs.com。</p> </div> </body> </html>
三角形样例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ width:300px; height:100px; border:1px solid red; position:relative; } div::after{ content:""; position:absolute; top:10px; right:10px; width:10px; height:10px; border-right:1px solid red; border-bottom:1px solid red; -webkit-transform: rotate(45deg); transition:all 0.6s; } div:hover::after{ -webkit-transform: rotate(225deg); } </style> </head> <body> <div> </div> </body> </html>
