css3-伪类、居中、2D3D转换、动画、粘贴布局

本文主要是介绍css3-伪类、居中、2D3D转换、动画、粘贴布局，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

:before和:after放图片

在这里插入图片描述

垂直水屏居中(table)

父元素
display:table;
子元素
display:table-cell;
vertical:middle;

3D效果旋转

<style>#div1{width: 150px;height: 150px;margin: 100px auto;/* 如果想看到3D效果，需要在动的父元素，增加该属性 */perspective: 150px;}img{transition: all 2s;/* 沿着bottom移动 */transform-origin: bottom;}img:hover{/* 移动的度数 */transform: rotateX(60deg);}</style>
</head>
<body><div id="div1"><img src="a.png" /></div>
</body>

旋转动画

福字匀速旋转，可用于以后的旋转效果
在这里插入图片描述

 <style>.rotate {background: #eee;height: 100px;width: 100px;border-radius: 50%;margin: 25px auto;color: red;text-align: center;line-height: 100px;animation: mymove 2s infinite linear;}@keyframes mymove {from {transform: rotate(0);}to {transform: rotate(360deg);}}</style>
</head><body><div class="rotate">福</div>
</body>

圆圈从小到大放大

在这里插入图片描述

<style>div {display: inline-block;background: transparent;border-radius: 50%;border: 1px solid #000;text-align: center;margin: 50px auto;animation: mymove 2s infinite linear;opacity: 0;}.cicle1 {height: 500px;width: 500px;animation-delay: .75s;}.cicle2 {height: 400px;width: 400px;animation-delay: .5s;}.cicle3 {height: 300px;width: 300px;animation-delay: .25s;}.cicle4 {height: 200px;width: 200px;position: relative;opacity:1;}@keyframes mymove {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}</style>
</head><body><div class="cicle1"><div class="cicle2"><div class="cicle3"><div class="cicle4"></div></div></div></div>
</body>