做一个酷网站(1)

最新推荐文章于 2021-12-22 23:00:43 发布
最新推荐文章于 2021-12-22 23:00:43 发布
阅读量237 收藏 1
点赞数 1
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43069018/article/details/102709517
版权

成品
成品源码

  • 前置知识( 先了解这 3 个函数的基本用法

    • setInterval(fn, n)
    • substring(n, m)
    • document.querySelector()

  • 核心

    • 让 css 代码 和 dom 节点的内容 同时被渲染
    • 可以理解 为一行一行 的展示 css 代码对页面的影响

Demo源码

Geronimo邈
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何做一个炫酷的动画网站-css实现图片上下浮动效果
city86的博客
05-05 2385
目前网站制作技术已经非常成熟。所以要实现一个炫酷的动画网站还是非常容易，现在通过js和css就都能实现。下面我们来通过一个小动画看看如何用css来实现让你的网站动起来。 效果就是图片上下浮动，如何实现？其实只需要先定义一个样式。 先定义一个样式文件main.css，然后定义样式为： .float-ud { animation: float 4s ease-in-out infinite; } @keyframes float { 0% { transform: t...
koa 学习笔记
weixin_43069018的博客
07-21 764
koa 是什么 Koa 是一个新的web 框架，由Express 幕后的原班人马打造， 致力于成为web 应用和API 开发领域中的一个更小、更富有表现力、更健壮的基石 洋葱模型 const Koa = require('koa') // 类名一般要大写 const app = new Koa() // 实例化 /* * node 进程 如果没有重启的话 做得修改是没有用的 * */ app....
一个炫酷的个人网站带后台
qq_41935885的博客
07-26 6785
前段时间觉得自己学的挺杂的,h5,css,js,jquary,ajax什么的，干脆就全部整合一起做了个小demo，算是一个综合性的练习。 这个项目基于h5+css+js+jquary+ajax+java+springboot+mybatis。没有用响应式框架，只能兼容oc端，自己做的ui，有点丑，话不多说，上图。 这是登录页面 注册页面 参观地址：http://47.103.24.88 游客账...
100多个经典超酷网站收集
热门推荐
IT有个圈儿
03-29 4万+
1，看看自己具有哪个大明星的脸型　http://www.play-analogia.com/cgi-bin/index/ 2，超有意思的Flash网站，虚拟办公　http://agencynet.com 3，亲自动手给美女画纹身　http://www.crustydemons.co.uk/UK/tattoo_parlour/index.html 4，输入文字就发出声音！　http://www.pu...
100个超酷网站
qq_41169477的博客
11-07 1万+
1，看看自己具有哪个大明星的脸型　http://www.play-analogia.com/cgi-bin/index/ 2，超有意思的Flash网站，虚拟办公　http://agencynet.com 3，亲自动手给美女画纹身　http://www.crustydemons.co.uk/UK/tattoo_parlour/index.html 4，输入文字就发出声音！　http://www.pu...
html + css 实现一个炫酷的照片墙
疯魔coding君的博客
12-18 9778
使用 css 动画实现了一个当鼠标悬浮在图片上时放大展示的效果，效果图如下： 以下直接附上源码，图片可自己随意设置，所有图片放在与源码 .html 文件同级的 img2 文件夹内： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>照片墙</title> <style> body {
超酷的13个CSS有趣学习网站
hkw20的博客
12-22 6188
13个CSS有趣学习网站 今天来给大家推荐13个辅助你学习巩固知识的网站，让你边玩边学边记！ 因为这些网站大多都是国外的大佬们做的，所以网页大多都是英文，为了更好地使用，给你们推荐两个翻译的方式： 使用Chrome浏览器自带的翻译功能，可以中英随意切换 chrome浏览器自带的翻译功能 下一个"Google 翻译"插件，遇到不懂的英文直接选中点击翻译即可 插件划词翻译 好了，希望英文的存在不要成为你学习的障碍（更重要的还是要私底下多背单词，提升自己的英语水平，毕竟程序员免不了看英文文档） 一、CSS
推荐一个前端工程师做的超酷交互式网站
09-22
首先，网站的设计从一个简单的白底黑字布局开始，可能会让人误以为并无特别之处。但随着用户的互动，背景颜色逐渐丰富起来，呈现出更多的视觉效果，这得益于HTML5和CSS3的强大功能，特别是CSS3的过渡、动画和颜色...
一款炫酷的导航网站源码亲测可用
05-25
采用Thinkphp+Easy Admin+Mysql 开发 是一套完整的具有商业化的系统 前端简洁，清新，高颜值！ 后端便捷，简约，多功能！ 配套有会员系统，支付系统，自助广告，插件...这套源码非常适合做导航网，资源网的小伙伴们
使用CSS制作一个比较炫酷的页面切换动画
09-25
例如，要创建一个缩小并淡出的动画效果，可以这样做： ```css @keyframes scaleDown { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.3); opacity: 0; } } .pt-page-scaleDown { ...
用html5+css3做的一套非常酷的网站模版
08-09
本套网站模版就是充分利用了这两项技术的优势，为开发者和设计师提供了一个优秀的学习资源。 HTML5是超文本标记语言的第五次重大修订，它在HTML4的基础上增加了很多新元素，旨在提高网页的语义性和可访问性。例如，...
yarn 安装及基本命令使用
weixin_43069018的博客
06-07 1万+
简介 yarn是facebook发布的一种包管理工具 会缓存它下载的每个包， 无需重复下载；能并行化操作以最大资源利用率 使用格式详尽而又简洁的 lockfile文件 和确定性算法来安装依赖，能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上 安装包被执行前校验其完整性 安装 npm install -g yarn 使用 // 初始化 yarn init // 添加包 y...
BScroll 使用(Vue)
weixin_43069018的博客
03-13 1万+
下载 npm install better-scroll --save 引包 import BScroll from ‘better-scroll’ 使用 重点： 固定最外层容器高度 外层容器的第一个子元素高度 要超过外层容器高度 官方文档 ...
XSS XSRF 介绍与防范
weixin_43069018的博客
08-15 725
XSS Definition 存储型 XSS 反射型 XSS DOM 型 XSS DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。 Demo 攻击者发现 http://m.exmail.qq.com/cgi-bin/login?uin=aa...
async await promise解决异步问题
weixin_43069018的博客
07-05 455
传统回调 fetch('https://api.github.com/users').then(res => res.json()).then(json => { console.log(json) fetch('https://api.github.com/users/Geronimomiao').then(res => res.json()).then(json2 =&g...
Vue (事件监听 Vuex调用 vue-router 动画特效)
weixin_43069018的博客
04-25 354
vue-router 返回上级页面 this.$router.go(-1) Vue 项目子路由 不继承父元素路由 Vue 给组件绑定的事件为什么无法触发 在 Vue 2.0 中，为自定义组件绑定原生事件必须使用 .native 修饰符 vue-router 传参方法 推荐链接 缓存部分页面 <keep-alive> <route...
在微信小程序使用阿里矢量图标
weixin_43069018的博客
08-29 296
在微信小程序使用阿里矢量图标 首先 选图标 并将代码下载至本地 https://transfonter.org/ ( 去该网站 将下载 .ttf 文件 转成 base64 ) 建 xxx.wxss 文件 在 app.wxss 引入 ...
this.data 与 this.setData({})
weixin_43069018的博客
09-04 253
this.setData 对界面进行刷新 this.data 仅仅是对数据进行更新
写一个"华为牛逼"的前端页面
最新发布
03-25
好的，让我试试！ 首先，作为一名人工智能，我需要了解一下什么是前端页面。前端页面指的是通过 HTML、CSS、JavaScript 等技术来完成的网页设计、开发和实现。既然是华为牛逼的前端页面，那我们需要做一些炫酷且实用的设计。 我们可以从以下几个方面来入手： 1. 设计醒目的首页 一个好的首页可以让访问者对网站产生好感，留下深刻的印象。华为作为国内知名的科技公司，其网站首页一定需要高端大气上档次，我们可以考虑采用黑色加黄色的设计方案，让整个页面看起来更加高端大气上档次。可以通过一些动画效果或者视频背景来提升首页的创意和艺术感。 2. 提供便捷的导航方式 网站的导航通常会放在页面的顶部或者左侧，该部分要尽量简洁明了，遵循用户的使用习惯。我们可以采用华为手机自带的底部导航栏，让用户更加方便的进行操作。另外，我们也可以新增智能推荐功能，根据用户的访问记录或者行为，给出个性化的推荐链接。 3. 使用响应式布局 随着科技的进步，越来越多的人使用手机进行网站的访问。因此，我们需要考虑采用响应式布局，让网站在不同设备中都能够自适应大小。这样能够提升用户的使用体验和参与度。 4. 数字化和交互式设计 在设计网站时，我们可以新增数字化和交互式设计。例如，我们可以在网站上增加实时在线聊天室，客户可以与华为代表进行在线互动。换而言之，跨越数字和人类之间的边界，可以更好地服务于客户，提升企业形象和品牌形象。 这些都是设计华为牛逼前端页面时可以考虑的一些方案，当然细节还需要不断优化和完善。希望我的建议能够对华为同事的工作有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值