css动画集锦

Posted 2023-04-02

参考技术A 1.渐变动画背景
body
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
height: 100vh;


@keyframes gradient
0%
background-position: 0% 50%;

50%
background-position: 100% 50%;

100%
background-position: 0% 50%;



2.浮动动画效果
div
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);
animation: float 6s ease-in-out infinite;

@keyframes float
0%
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);

50%
box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);
transform: translatey(-20px);

100%
box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);
transform: translatey(0px);

css3常用样式集锦

//控制几行出省略号的样式，line-clamp里设置几就是几行才出省略号，前提要给宽度

.ellipsis{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}