网页项目制作收获2
1.如下图所示,背景用到了CSS3里面的一个渐变效果,自上而下的渐变,同时用到了3D嵌入边框的效果,还有阴影效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .lan 6 { width : 770px ; height : 286px ; background : -webkit-linear-gradient( #FFF0CE , #FBF3E2 ); /* Safari 5.1 - 6.0 */ background : -o-linear-gradient( #FFF0CE , #FBF3E2 ); /* Opera 11.1 - 12.0 */ /*CSS3渐变效果*/ background : -moz-linear-gradient( #FFF0CE , #FBF3E2 ); /* Firefox 3.6 - 15 */ background : linear-gradient( #FFF0CE , #FBF3E2 ); float : left ; border-color : #FFF0CE ; border-style : inset ; /*3D嵌入边框*/ box-shadow: 10px 10px 5px #888888 ; border-radius: 20px ; /* display:none;*/ } |
2.如下图所示的内容,每隔1.5秒换内容
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 | <body> <div id= "a03" ><h3>阅读 我们要思考不要盲从</h3></div> </body> <script type= "text/javascript" src= "../JS语言/好书特效.js" > window.setInterval( "Huan()" ,1500); /*间隔1.5秒*/ var c =0; /*添加了一个属性,用来使其文字来回变换的作用*/ function Huan() { var x = document.getElementById( "a03" ); x.innerHTML = "<h3>你需要有深度的阅读</h3>" ; /*把内容换掉*/ c = c + 1; if (c==1) { x.innerHTML = "<h3>阅读 我们要思考不要盲从</h3>" ; } else { c=0; } } </script> |
总结:用到if判断的这个过程是,一开始,c= 0,c=1,内容换成一开始的阅读 ,c = 2时,走else这里面的, c= 0,c= 1,又走了if,这样就可以实现来回变换.
3.把下图换一个角度
1 2 3 4 5 6 7 8 | #ti 2 { width : 1024px ; height : 120px ; margin-top : 5px ; transform:skew( 2 deg, 2 deg); -ms-transform:skew( 2 deg, 2 deg); /* IE 9 */ -webkit-transform:skew( 2 deg, 2 deg); } |
用到了CSS3里面的2D转换,绕x轴水平方向,绕y轴水平方向倾斜.
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· Tinyfox 简易教程-1:Hello World!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!