admin 管理员组

文章数量: 1184232


2024年3月5日发(作者：itellyou系统干净吗)

37. #nav a span i{

38. font-size:1.3em;

39. }

40. #nav a::after{

41. content:'';

42. display:block;

43. width:0;

44. height:0;

45. position:absolute;

46. rightright:-32px;

47. bottombottom:0;

48. border-top:26px solid transparent;

49. border-right:16px solid transparent;

50. border-bottom:26px solid transparent;

51. }

52. #nav-main{

53. background-color:rgb(211,83,80);

54. }

55. #nav-sum{

56. background-color:rgb(0,158,163);

57. }

58. #nav-main::after{

59. border-left:16px solid rgb(211,83,80);

60. }

61. #nav-sum::after{

62. border-left:16px solid rgb(0,158,163);

63. }

64. #nav a:hover{

65. -webkit-animation:extend-a 0.5s;

66. -moz-animation:extend-a 0.5s;

67. animation:extend-a 0.5s;

68. width:100px;

69. }

70. #nav a span:hover{

71. -webkit-animation:extend-span 0.5s;

72. -moz-animation:extend-span 0.5s;

73. animation:extend-span 0.5s;

74. width:116px;

75. }

76. /******************* a扩展效果 ******************/

77. @-webkit-keyframes extend-a{

78. 0% {

79. width:30px;

80. }

81. 100% {

82. width:100px;

83. }

84. }

85. @-moz-keyframes extend-a{

86. 0% {

87. width:30px;

88. }

89. 100% {

90. width:100px;

91. }

92. }

93. @keyframes extend-a{

94. 0% {

95. width:30px;

96. }

97. 100% {

98. width:100px;


本文标签： 系统 效果 作者

版权声明：本文标题：CSS3实现鼠标悬停显示扩展内容 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709647034a542611.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。