css布局实现pc网站底部带数字滚动动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现pc网站底部带数字滚动动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <style> @charset "utf-8"; * { margin: 0; padding: 0; font-family: "微软雅黑"; } ul { list-style: none; } a { text-decoration: none; } em { font-style: normal; } /*数据统计滚动*/ .product-number-info { background: url(//repo.bfw.wiki/bfwrepo/image/5e59c0f1eb029.png); background-size: cover; position: relative; } .product-number-info .product-number-inner { width: 1200px; margin: 0 auto; } .product-number-info ul { padding: 85px 0; } .product-number-info ul.q:after { content: ""; clear: both; display: table; } .product-number-info li { float: left; width: 239px; height: 90px; border-left: 1px solid #66c7fd; color: #fff; padding-top: 1px; } .product-number-info li:first-child { border: none; } .product-number-info li b { font-weight: 400; font-size: 36px; line-height: 1; display: inline-block; position: relative; margin: 15px 0 10px; } .product-number-info li b i { font-style: normal; } .product-number-info li b sup { position: absolute; font-size: 20px; right: -15px; top: -3px; } .product-number-info li b em { font-style: normal; font-size: 28px; font-weight: 100; padding-left: 2px; position: relative; top: -4px; } .product-number-info li p { font-size: 14px; } .product-number-info li.li-2 b,.produ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0