Heim >Web-Frontend >HTML-Tutorial >CSS3秘笈第三版涵盖HTML5学习笔记9~12章 - 平凡世界平凡人
<span style="color: #0000ff;"><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>one<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>two<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #0000ff;">></span>three<span style="color: #0000ff;"></span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span></span></span></span></span></span></span></span>
效果:
消除空格方法2:对项目列表添加负值的right margin,不过不同的文本长度,会使这个值不同,需要去实验
<span style="color: #800000;"> <style type="text/css"> li </style></span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> inline-block</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> 1px solid #999</span>;<span style="color: #ff0000;"> margin-right</span>:<span style="color: #0000ff;"> -9px</span>; }<span style="color: #800000;"> </span>
效果:
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">rotate(20deg)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 提供一个0~360的度数值,正值顺时针方向旋转,负值逆时针 </span><span style="color: #008000;">*/</span> }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scale(2)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 接受单个参数:放大或缩小,0~1之间的数是缩小,大于1的数是放大,负数会将元素倒过来缩放 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scale(x,y)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 接受两个参数:第一个表示水平缩放,第二个表示垂直缩放 </span><span style="color: #008000;">*/</span> <span style="color: #008000;">/*</span><span style="color: #008000;">单方向缩放:</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scaleX(num)</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">沿X轴缩放</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scaleY(num)</span>;<span style="color: #008000;">/*</span><span style="color: #008000;">沿Y轴缩放</span><span style="color: #008000;">*/</span> }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">skew(45deg,0)</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 第一个指沿X轴倾斜(正数向左倾斜,负数向右),</span><span style="color: #008000;">*/</span> <span style="color: #008000;">/*</span><span style="color: #008000;">第二个指沿Y轴倾斜(正数往右边向下,负数往左边向下),这个理解不够,表达不明白 </span><span style="color: #008000;">*/</span> }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">skew(45deg,0deg) scale(.5) translate(400px,500px) rotate(90deg)</span>; }
<span style="color: #800000;">.navButton</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">orange</span>;<span style="color: #ff0000;"> transition-property</span>:<span style="color: #0000ff;">background-color</span>;<span style="color: #ff0000;"> transition-duration</span>:<span style="color: #0000ff;">1s</span>; }<span style="color: #800000;"> .navButton:hover</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">blue</span>; }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transition-property</span>:<span style="color: #0000ff;">color,background-color,border-color</span>;<span style="color: #ff0000;"> transition-duration</span>:<span style="color: #0000ff;">.5s,.75s,2s</span>; }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transition-timing-function</span>:<span style="color: #0000ff;">cubic-bezier(.20,.96,.74,.07)</span>; }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> -webkit-transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;"> -moz-transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;"> -o-transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;"> -ms-transition-delay</span>:<span style="color: #0000ff;"> .5s</span>;<span style="color: #ff0000;"> transition-delay</span>:<span style="color: #0000ff;"> .5s</span>; }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transition</span>:<span style="color: #0000ff;">all 1s ease-in .4s</span>; }
<span style="color: #800000;">.testClass</span>{<span style="color: #ff0000;"> transition</span>:<span style="color: #0000ff;">color 1s,background-color .5s 1s</span>; }
<span style="color: #800000;">@keyframes animationName</span>{<span style="color: #ff0000;"> from{ </span><span style="color: #008000;">/*</span><span style="color: #008000;"> list CSS properties here </span><span style="color: #008000;">*/</span> }<span style="color: #800000;"> to</span>{ <span style="color: #008000;">/*</span><span style="color: #008000;"> list CSS properties here </span><span style="color: #008000;">*/</span> }<span style="color: #800000;"> }</span>
<span style="color: #800000;">@keyframes backgroundGlow</span>{<span style="color: #ff0000;"> from{ backgorund-color</span>:<span style="color: #0000ff;">yellow</span>; }<span style="color: #800000;"> 50%</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">blue</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">red</span>; }<span style="color: #800000;"> }</span>
<span style="color: #800000;">@keyframes glow</span>{<span style="color: #ff0000;"> from{ backgorund-color</span>:<span style="color: #0000ff;">yellow</span>; }<span style="color: #800000;"> 25%,75%</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">blue</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">red</span>; }<span style="color: #800000;"> }</span>
<span style="color: #800000;">@keyframes glow</span>{<span style="color: #ff0000;"> from{ backgorund-color</span>:<span style="color: #0000ff;">yellow</span>; }<span style="color: #800000;"> 20%,60%</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">blue</span>; }<span style="color: #800000;"> 40%,80%</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">orange</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">red</span>; }<span style="color: #800000;"> }</span>
<span style="color: #800000;">@-webkit-keyframes fadeIn</span>{<span style="color: #ff0000;"> from{ opacity</span>:<span style="color: #0000ff;">0</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> } @-moz-keyframes fadeIn</span>{<span style="color: #ff0000;"> from{ opacity</span>:<span style="color: #0000ff;">0</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> } @-o-keyframes fadeIn</span>{<span style="color: #ff0000;"> from{ opacity</span>:<span style="color: #0000ff;">0</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> } @keyframes fadeIn</span>{<span style="color: #ff0000;"> from{ opacity</span>:<span style="color: #0000ff;">0</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;">1</span>; }<span style="color: #800000;"> }</span>
<span style="color: #800000;">@keyframes fadeIn</span>{<span style="color: #ff0000;"> from{ opacity</span>:<span style="color: #0000ff;"> 0</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> opacity</span>:<span style="color: #0000ff;"> 1</span>; }<span style="color: #800000;"> }</span>
2、将动画应用给
<span style="color: #800000;">.announcement</span>{<span style="color: #ff0000;"> animation-name</span>:<span style="color: #0000ff;"> fadeIn</span>; <span style="color: #008000;">/*</span><span style="color: #008000;">设置动画名称,前面创建的</span><span style="color: #008000;">*/</span><span style="color: #ff0000;"> animation-duration</span>:<span style="color: #0000ff;"> 1s</span>; <span style="color: #008000;">/*</span><span style="color: #008000;"> 设置动画从开始到结束所花时间 </span><span style="color: #008000;">*/</span> }
<span style="color: #800000;">@keyframes growAndGlow</span>{<span style="color: #ff0000;"> from{ background-color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;"> animation-timing-function</span>:<span style="color: #0000ff;"> cubic-bezier(1, .3, 1, .115)</span>; }<span style="color: #800000;"> 50%</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scale(1.5)</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;">blue</span>;<span style="color: #ff0000;"> animation-timing-function</span>:<span style="color: #0000ff;"> linear</span>; }<span style="color: #800000;"> to</span>{<span style="color: #ff0000;"> transform</span>:<span style="color: #0000ff;">scale(3)</span>;<span style="color: #ff0000;"> background-color</span>:<span style="color: #0000ff;"> red</span>; }<span style="color: #800000;"> }</span>
<span style="color: #800000;">.fade</span>{<span style="color: #ff0000;"> animation-name</span>:<span style="color: #0000ff;"> fadeOut</span>;<span style="color: #ff0000;"> animation-duration</span>:<span style="color: #0000ff;"> 2s</span>;<span style="color: #ff0000;"> animation-timing-function</span>:<span style="color: #0000ff;"> ease-in-out</span>;<span style="color: #ff0000;"> animation-iteration-count</span>:<span style="color: #0000ff;"> 2</span>;<span style="color: #ff0000;"> animation-direction</span>:<span style="color: #0000ff;"> alternate</span>;<span style="color: #ff0000;"> animation-delay</span>:<span style="color: #0000ff;"> 5s</span>;<span style="color: #ff0000;"> animation-fill-mode</span>:<span style="color: #0000ff;"> forwards</span>; }
改写:
<span style="color: #800000;">.fade</span>{<span style="color: #ff0000;"> animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards</span>; }
只有名称和持续时间是必要的,其他都是可选,应用多个动画,只需每个动画用逗号隔开即可。
<span style="color: #800000;">.fade</span>{<span style="color: #ff0000;"> animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s</span>; }
实际应用还需给定供应商前缀:
<span style="color: #800000;">.fade</span>{<span style="color: #ff0000;"> -webkit-animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s</span>;<span style="color: #ff0000;"> -moz-animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s</span>;<span style="color: #ff0000;"> -o-animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s</span>;<span style="color: #ff0000;"> animation </span>:<span style="color: #0000ff;"> fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s</span>; }