tnblog
首页
视频
资源
登录
原

实现好看的文字图片滚动

6140人阅读 2019/7/13 17:02 总访问：3467495 评论：0 收藏：0 手机
分类: 前端

page Effect:

code(You just to need change pictures to achieve the desired effect):

  1. <!DOCTYPE html>

  2. <html>

  3. 	<head>

  4. 		<meta charset="utf-8" />

  5. 		<title></title>

  6. 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  7. 		<style type="text/css">

  8. 			body{

  9. 				margin: 0;

  10. 				padding: 0;

  11. 			}

  12. 			.parallax-container{

  13. 				width: 100%;

  14. 				height: 90vh;

  15. 			}

  16. 			section{

  17. 				width: 100%;

  18. 				min-height: 400px;

  19. 				display: flex;

  20. 				justify-content: center;

  21. 				align-items: center;

  22. 			}

  23. 			section .content{

  24. 			 	max-width: 500px;

  25. 			 	margin: 0 auto;

  26. 			}

  27. 			/*下面是抖音字体设置*/

  28. 			#cc{

  29. 			 	color: #000;

  30. 			 	font-family: sans-serif;

  31. 			 	font-size: 4em;

  32. 			 	animation: ads 0.5s linear infinite;

  33. 			}

  34. 			@keyframes ads{

  35. 				0%{

  36. 					text-shadow: -1.5px -1.5px 0 #0ff,1.5px 1.5px 0 #f00;

  37. 				}

  38. 				25%{

  39. 					text-shadow: 1.5px 1.5px 0 #0ff,-1.5px -1.5px 0 #f00;

  40. 				}

  41. 				50%{

  42. 					text-shadow: 1.5px -1.5px 0 #0ff,-1.5px 1.5px 0 #f00;

  43. 				}

  44. 				100%{

  45. 					text-shadow: -1.5px 1.5px 0 #0ff,-1.5px 1.5px 0 #f00;

  46. 				}

  47. 			}

  48. 			/*下面是轮播图*/

  49. 			.carousel{

  50. 				background: #000;

  51. 				height: 700px;

  52. 				width: 100%;

  53. 				perspective: 600px;

  54. 			}

  55. 			.carousel .carousel-item{

  56. 				width: 400px;

  57. 				color: #fff;

  58. 				text-align: center;

  59. 			}

  60. 		</style>

  61. 	</head>

  62. 	<body>

  63. 		<div class="parallax-container">

  64.       		<div class="parallax"><img src="img/1.jpg"></div>

  65.     	</div>

  66.     	<section>

  67.     		<div class="content">

  68.     			<h4 id="cc">TNBLOG</h4>

  69.     		</div>

  70.     	</section>

  71. 		<div class="parallax-container">

  72.       		<div class="parallax"><img src="img/2.jpg"></div>

  73.     	</div>

  74.     	<div class="carousel">

  75.     			<div class="carousel-item">

  76.     				<img src="img/1.jpg"/>

  77.     				<h3>科技</h3>

  78.     			</div>		

  79.     			<div class="carousel-item">

  80.     				<img src="img/2.jpg"/>

  81.     				<h3>星座</h3>

  82.     			</div>		

  83.     			<div class="carousel-item">

  84.     				<img src="img/3.jpg"/>

  85.     				<h3>拼搏</h3>

  86.     			</div>		

  87.     			<div class="carousel-item">

  88.     				<img src="img/4.jpg"/>

  89.     				<h3>休闲</h3>

  90.     			</div>		

  91.     	</div>

  92. 		<div class="parallax-container">

  93.       		<div class="parallax"><img src="img/3.jpg"></div>

  94.     	</div>

  95.     	<section>

  96.     		<div class="content">

  97.     			<h4>Parallax</h4>

  98.     			<p>

  99.     			</p>

  100.     				Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.

  101.     		</div>

  102.     	</section>

  103. 		<div class="parallax-container">

  104.       		<div class="parallax"><img src="img/4.jpg"></div>

  105.     	</div>

  106.     	<section>

  107.     		<div class="content">

  108.     			<h4>Parallax</h4>

  109.     			<p>

  110.     			</p>

  111.     				Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Check out the demo to get a better idea of it.

  112.     		</div>

  113.     	</section>

  114.     	<script src="https://code.jquery.com/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

  115. 		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

  116. 		<script type="text/javascript">

  117. 			  $(document).ready(function(){

  118.     				$('.parallax').parallax();

  119.     				$('.carousel').carousel();

  120.   				});

  121. 		</script>

  122. 	</body> 

  123. </html>



欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739

评价
这一世以无限游戏为使命！
博主信息
排名
2
文章
634
粉丝
44
评论
93
文章类别
最新文章
最新评价
docker中Sware集群与service
尘叶心繁 : 想学呀！我教你呀
一个bug让程序员走上法庭 索赔金额达400亿日元
叼着奶瓶逛酒吧 : 所以说做程序员也要懂点法律知识
.net core 塑形资源
剑轩 : 收藏收藏
映射AutoMapper
剑轩 : 好是好，这个对效率影响大不大哇,效率高不高
ASP.NET Core 服务注册生命周期
剑轩 : http://www.tnblog.net/aojiancc2/article/details/167
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术