关闭边栏(ESC)打开边栏(ESC)
目 录
CSS中动画效果与渐变：
- 线性渐变：linear-gradient
- 圆形渐变：radial-gradient
- 过渡过画：transition
- 自定义动画：animation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>CSS过渡、渐变、自定义动画</title> <meta name="阿乞" content="150105.net" /> <style> #div1{ width: 300px;height: 50px; /*线性渐变：linear-gradient background或background-image：指明方向用to right、to left、to top、to bottom，再指明二个颜色值*/ /*background-image: linear-gradient(to right,red, #fff);*/ background:linear-gradient(to left,red,#fff); } #div2{ width: 200px; height: 200px; /*圆形渐变：radial-gradient 二个数字不等的话显示椭圆 /*background-image: linear-gradient(to right,red, #fff);*/ background: radial-gradient(100px 50px, red,blue,yellow); } #div3{ width: 200px; height: 200px; background: green; /*过渡过画：transition，一般写二个参数，如：transition: all 2s 多用于hover伪对象,但transition要写在对象里，不是Hover里。hover里有多种效果的时候，就用all 参数-1：transition-property 默认值是：all，可指定可过渡的属性，如color、background等 参数-2：transition-duration 默认值是：0，指定对象过渡的持续时间 参数-3：transition-timing-function 默认值是：ease，指定过渡效果，如linear 、ease-in 参数-4：transition-delay 默认值是：0 ， 指定对象过渡的延迟时间，相当等待多长时间后再执行过渡，一般不要这个*/ transition: all 0.3s ease-in 1s; } #div3:hover{background: red;border: 10px solid blue;opacity: 0.5;transform: translate(500px, 20px);} #div4 { width: 200px; height: 200px; border-radius: 100%; background: radial-gradient(30px 90px, #333,#fff,#666); /*自定义动画：animation，一般写4个参数,如：animation:aname 0.05s linear infinite 使用这个要配合@keyframes 使用 多用于效果比较复杂的过渡，含有多种效果的时候，以下参数位置可以打乱写 参数-1：animation-name 定义一个或多个动画名称(identifier标识)，如果提供多个属性值，以逗号进行分隔。 参数-2：animation-duration 指定对象动画的持续时间 参数-3：animation-timing-function 默认值：ease 参数-4：animation-delay 指定对象动画延迟的时间 ，这个一般不写 参数-5：animation-iteration-count 值 infinite： 无限循环 ，具体数字指定对象动画的具体循环次数 。默认值：1 参数-6：animation-direction 默认值：normal-正常方向，reverse-反向，alternate-正常再反向，alternate-reverse-先反再正 参数-7：animation-play-state 默认值：running，其它值：paused： 暂停，这个一般不写 参数-8：animation-fill-mode 默认值：none，forwards-结束时的状态，backwards-开始时的状态 ，both-结束或开始的状态，用默认值在作圆运动时能表现连续不间断 */ animation:aname 0.05s linear 1s infinite normal running none; } @keyframes aname{ /*@keyframes：自定一个动画，可以用from to来定义，也可以用百分比来定义动画 使用from to 的写法 from{transform: translate(20px,30px);opacity: 1} to{transform: translate(20px, 60px);opacity: 0.5;} */ /*使用百分比的写法 0%{transform: translate(0 10px);opacity: 0} 50%{transform: translate(300px, 70px);opacity: 1} 75%{transform: translate(320px, 80px);opacity: 1} 100%{transform: translate(500px, 600px);opacity: 0;} */ from{transform: rotate(0deg);} to{transform: rotate(359deg);} } #div4:hover{animation:paused;} } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html> |
主页上面的视频怎么做到的！ 能出个教程么，挺喜欢的
过年后分享一下
transtion：如果写在hover里的话，只有在鼠标经过的时候才会有过渡的效果。离开的时候没有。所以一般放在原标签里。这样才有连续的过渡效果。
如：p{transiton:all 2s}