Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
js
 
 
 
 
 
 
 
 
 
 

如何让代码自动播放同步画一只大白?

图

花了一整天的时间画了大白,成就感还是蛮大的。

关键词:JavaScript、jQuery、Prism.js、Rem响应式页面 、SASS

动态向 style 标签和 pre 标签添加文本,绘制出大白的过程。用css3实现动画的效果,用prism.js实现代码高亮的效果,用rem实现响应式布局,用sass进行编译。

源码链接:

本网页

预览链接:大白呀大白

一、所需要的知识点

1、pre 标签

表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。

2、API

styleCode.substring(0,n) //获取字变量styleCode里0-n个字符串
code.scrollTop = 10000 // 窗口向下滚动10000像素

3、prism.js

var styleCode=`
body{
   background:blue;
}`
code.innerHTML = Prism.highlight(styleCode, Prism.languages.css, 'css');

4、css画图

background:linear-gradient
    (135deg, #ffffff 0%,#d2d2d2 100%);   //背景渐变
box-shadow:-0.2rem -0.2rem 0.84rem 0 
    rgb(150, 150, 150) inset;  //内阴影,加上inset
border-radius:0% 0% 50% 30%
    /0% 0% 72% 42%;    //画一个椭圆,斜杠前表示水平半径,后面表示垂直半径

渐变和阴影用工具网站生成即可,椭圆自己反复的修改到合适为止即可。

5、加meta:vp

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

6、动态rem

  • 在一个页面图的尺寸,用px($px)表示:
height:px(350)  //表示高度为350px
  • 在js加上一段代码,获取视口宽度并按适当比例赋值给html的font-size
var pageWidth=window.innerWidth  //获取屏幕宽度
document.documentElement.style.fontSize= `${pageWidth/60}px`

我这里用的60倍的放缩。

7、sass编译

  • 安装sass
npm config set registry https://registry.npm.taobao.org/
touch ~/.bashrc
echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc
source ~/.bashrc
npm i -g node-sass  //全局安装
mkdir ~/Desktop/scss-demo 
cd ~/Desktop/scss-demo 
mkdir scss css
touch scss/style.scss 
start scss/style.scss
node-sass -wr scss -o css //对scss监听,自动编译成css
  • 将px转化为rem,在scss文件加入以下代码
@function px( $px ){
    @return $px/$designWidth*60 + rem;
  }
  $designWidth : 1500;//这是原稿的宽度

转化一次,就变成rem了,之后在其他不同窗口rem就能生效了。

二、功能实现

1、代码自动播放

创建 style 、 pre 标签,并添加id

<head>
    …
   <style id = 'styleTag'></style> 
</head>
<body>
   <pre id = 'code'></pre>//使格式按照打的格式呈现出来
    …
</body>

在两标签添加css样式内容

var styleCode =`abcdefghijklmn`
var n = 0 
var during = 100
var id = setTimeout(function fn(){
    n=n+1 
 //添加显示的内容
    code.innerHTML = styleCode.substring(0,n)
 //添加样式内容
    styleTag.innerHTML = styleCode.substring(0,n)
 if(n < styleCode.length){
        setTimeout(fn,during)
},during)

这里选用了setTimeout,并没有用setInterval,是因为后面我们要加调速功能,setTimeout可以改during,而setInterval只读取一次during。

2、代码高亮prism.js

官网地址:

prism.js
  • 下载prism的js和css
  • 分别插入head和body里
  • 代码引用,并修改成自己需要的样式
// The code snippet you want to highlight, as a string
var code = "var data = 1;";
// Returns a highlighted HTML string
var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

3、调速

  • 在html创建3个button
<div class="buttons">
    <button class="slow">慢速</button>
    <button class="normal">正常</button>
    <button class="fast">快速</button>
 </div>
  • 引入jq,并使用事件委托
var $buttons = $(".buttons")
$buttons.on('click','button',function(e){
   var $button =$(e.currentTarget)
   var speed = $button.attr('class')
   switch(speed){
     case 'slow':
        during = 100
        break;
     case 'normal':
        during = 30
        break;
     case 'fast':
        during = 1
        break;
    }
})

基本上重要的逻辑已经完成了,然后就是不断的调试修改和完善。

About

CSS animation for baymax. It is Interesting.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages