<html lang="en"> <head> <meta charset="UTF-8"> <title>css样式布局</title> <style> * { margin: 0; padding: 0; } .center { width: 100%; height: 1200px; float: left; } .left { width: 150px; height: 1200px; float: left; margin-left: -100%; background: blue; } .right { width: 150px; height: 1200px; float: left; margin-left: -150px; background: yellow; } .u li a { display: inline-block; width: 100px; height: 50px; text-align: center; line-height: 50px; background: green; } .u li .home { background: red; } .child { display: none; position: fixed; } .parent:hover .child { display: block; } .child li a:hover { background: yellow; } img { box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5); } .angle { width: 0; height: 0; border: 30px solid transparent; border-top: 30px solid red; } .dialog { width: 200px; height: 50px; border-radius: 7px; background: orange; position: relative; } .dialog:after { content: ""; display: block; width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid orange; position: absolute; top: 10px; right: -20px; } .icon { display: inline-block; width: 38px; height: 43px; background: url("pic1.png") no-repeat -330px -47px; } .icon2 { display: inline-block; width: 38px; height: 43px; background: url("pic1.png") no-repeat -371px -47px; } .box { width: 300px; height: 200px; background: blue; margin-left: 30px; margin-top: 20px; /*!*位移*! transform: translate(20px,50px);*/ /*!*旋转*! transform: rotate(45deg);*/ /*!*缩放*! transform: scale(0.8);*/ /* 斜切 transform: skew(30deg,30deg);*/ } .box2 { width: 300px; height: 200px; background: pink; transition: all 2s ease; } /*补间动画*/ .box2:hover { width: 500px; /*transform: scale(1.2);*/ transform: rotate(45deg); } .box3 { margin-top: 50px; margin-left: 50px; text-align: center; line-height: 200px; width: 200px; height: 200px; background: pink; transform: rotate(45deg); transition: all 2s ease; } .box3 span { display: inline-block; transform: rotate(-45deg); } .box3:hover { background: yellow; border: 2px solid red; color: red; font-size: 30px; } .box4 { margin-top: 50px; margin-left: 50px; text-align: center; line-height: 200px; width: 200px; height: 200px; background: blue; animation: run 2s linear; font-size: 30px; color: white; } .box4 span { animation: light 1s linear infinite; } .box5 { margin-top: 50px; margin-left: 50px; text-align: center; line-height: 200px; width: 200px; height: 200px; border-radius: 100px; background: red; animation: shun 2s linear infinite; } .box6 { margin-top: 50px; margin-left: 50px; text-align: center; line-height: 100px; width: 100px; height: 100px; border-radius: 50px; background: red; animation: ni 2s linear infinite; } /*关键帧动画*/ @keyframes shun { 0% { transform: rotate(0deg) } 25% { transform: rotate(90deg) } 50% { transform: rotate(180deg) } 75% { transform: rotate(270deg) } 100% { transform: rotate(360deg) } } @keyframes ni { 0% { transform: rotate(0deg) } 25% { transform: rotate(-90deg) } 50% { transform: rotate(-180deg) } 75% { transform: rotate(-270deg) } 100% { transform: rotate(-360deg) } } @keyframes light { 0% { text-shadow: 0 0 0 #fff; } 25% { text-shadow: 0 0 10px red; } 50% { text-shadow: 0 0 30px blue; } 75% { text-shadow: 0 0 10px green; } 100% { text-shadow: 0 0 0 #fff; } } @keyframes run { 0% { width: 200px; } 25% { width: 300px; } 50% { width: 400px; } 75% { width: 300px; } 100% { width: 200px; } } /*3D*/ .d3 { width: 300px; height: 300px; margin-top: 100px; margin-left: 50px; position: relative; transform-style: preserve-3d; animation: ddd 1s linear infinite; } .d3 li { list-style: none; width: 300px; height: 300px; position: absolute; opacity: 0.5; top: 0; left: 0; } .d3 li:first-child { background: red; transform: translateY(150px) rotateX(90deg); } .d3 li:nth-child(2) { background: blue; transform: translateX(150px) rotateY(90deg); } .d3 li:nth-child(3) { background: green; transform: translateY(-150px) rotateX(90deg); } .d3 li:nth-child(4) { background: blue; transform: translateX(-150px) rotateY(90deg); } .d3 li:nth-child(5) { background: yellow; transform: translateZ(-150px); } .d3 li:nth-child(6) { background: orange; transform: translateZ(150px); } @keyframes ddd { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } </style> </head> <body> <!--双飞翼布局--> <div class="center"> <div style="padding: 0 150px"> <p>浮动显示下拉菜单</p> <ul style="float: left;" class="u"> <li class="parent"> <a href="#" class="home">首页</a> <ul class="child"> <li><a href="#">显示</a></li> <li><a href="#">显示</a></li> <li><a href="#">显示</a></li> <li><a href="#">显示</a></li> </ul> </li> </ul> <!--图片阴影--> <p>图片阴影</p> <img src="../image/2_2.jpg"> <p>三角形</p> <div class="angle"></div> <br><br><br> <p>对话框</p> <div class="dialog"> </div> <p>精灵技术</p> <div class="icon"></div> <div class="icon2"></div> <!--动画--> <div class="box"><p style="color: red">1、动画</p></div> <br> <p>动画</p> <div class="box2"><p style="color: red">2、补间动画</p></div> <br> <div class="box3"><span>3、补间动画</span></div> <br> <div class="box4"><span>4、关键帧动画</span></div> <br> <div class="box5"><span>圆,顺时针</span></div> <br> <div class="box6"><span>圆,逆时针</span></div> <br> <p>----------3D----------------</p> <ul class="d3"> <li class="fr">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> </div> <div class="left">左</div> <div class="right">右</div> </body> </html>
CSS样式,布局,动画
最新推荐文章于 2023-01-10 10:21:07 发布