css图标上下翻滚 |css距离底部右边

大家可以使用CSS3中的transform属性和@keyframes规则实现上下翻滚效果。以下是一个简单的示例代码：

.roll-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #f8b400;
animation: roll 1s infinite alternate;
transform-origin: center;
}
@keyframes roll {
0% {
transform: rotateX(0);
}
100% {
transform: rotateX(180deg);
}
}

代码中，大家首先定义了一个.roll-icon样式，来设置图标的基本样式，包括宽高、边框半径、背景颜色等。在动画效果上，大家使用animation属性来绑定@keyframes定义的roll动画，使其循环执行且来回翻滚，同时通过transform-origin属性将旋转中心点设为图标的中心。

在@keyframes中，大家定义了图标在动画执行中的变化状态。从0%开始，图标初始状态为正面朝上，此时transform属性值为rotateX(0)；而在100%结束时，图标已经翻转了180度，此时transform属性值为rotateX(180deg)。通过这个简单的定义，大家便可以获得一个平滑流畅的上下翻滚动画。

总的来说，上下翻滚的CSS图标是一种简单却实用的Web设计元素，可以用于增强用户体验和产品展示效果。掌握了CSS中的transform和@keyframes属性，大家就可以轻松地创建各种炫酷的CSS动画效果。