css动画集锦

html-css08

css动画集锦,第1张

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在hover下的几种效果代码分享，CSS3在鼠标经过时的几种效果集锦

效果一：360°旋转 修改rotate(旋转度数)

01* {

02transition:All 0.4s ease-in-out

03-webkit-transition:All 0.4s ease-in-out

04-moz-transition:All 0.4s ease-in-out

05-o-transition:All 0.4s ease-in-out

06}

07*:hover {

08transform:rotate(360deg)

09-webkit-transform:rotate(360deg)

10-moz-transform:rotate(360deg)

11-o-transform:rotate(360deg)

12-ms-transform:rotate(360deg)

13}

效果二：放大 修改scale(放大的值)

01* {

02transition:All 0.4s ease-in-out

03-webkit-transition:All 0.4s ease-in-out

04-moz-transition:All 0.4s ease-in-out

05-o-transition:All 0.4s ease-in-out

06}

07*:hover {

08transform:scale(1.2)

09-webkit-transform:scale(1.2)

10-moz-transform:scale(1.2)

11-o-transform:scale(1.2)

12-ms-transform:scale(1.2)

13}

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)

01* {

02transition:All 0.4s ease-in-out

03-webkit-transition:All 0.4s ease-in-out

04-moz-transition:All 0.4s ease-in-out

05-o-transition:All 0.4s ease-in-out

06}

07*:hover {

08transform:rotate(360deg) scale(1.2)

09-webkit-transform:rotate(360deg) scale(1.2)

10-moz-transform:rotate(360deg) scale(1.2)

11-o-transform:rotate(360deg) scale(1.2)

12-ms-transform:rotate(360deg) scale(1.2)

13}

效果四：上下左右移动 修改translate(x轴,y轴)

01* {

02transition:All 0.4s ease-in-out

03-webkit-transition:All 0.4s ease-in-out

04-moz-transition:All 0.4s ease-in-out

05-o-transition:All 0.4s ease-in-out

06}

07*:hover {

08transform:translate(0,-10px)

09-webkit-transform:translate(0,-10px)

10-moz-transform:translate(0,-10px)

11-o-transform:translate(0,-10px)

12-ms-transform:translate(0,-10px)

13}