HTML5代码演示界面语言切换动画

Code Snippets Animation，带ruby，python，go和javascript语言的语法着色高亮特性。

h5, viewer

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3591
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

hljs.initHighlightingOnLoad();

const scrollView = document.querySelector('.Container .Contents');
const tabs = document.querySelectorAll('.Container .Contents .Content');
const nav = document.querySelectorAll('.Container nav a');
const currentNav = document.querySelector('.Container nav .current');
let currentTab = 0;

currentNav.style.width = `${nav[currentTab].clientWidth}px`;
scrollView.style.height = `${tabs[currentTab].clientHeight}px`;

nav.forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault();
    const index = Array.prototype.indexOf.call(nav, e.target)
    if (currentTab === index) return;
    animateToTab(index)
  })
})

const animateToTab = (index) => {
  const el = tabs[index];
  const scrollStart = scrollView.scrollLeft;
  const startHeight = scrollView.clientHeight;
  nav[currentTab].classList.remove('active')
  nav[index].classList.add('active')
  
  const time = {
    start: performance.now(),
    duration: 700,
  }
  
  const tick = now => {
    time.elapsed = now - time.start;
    const fadeOut = easeInOutCubic(time.elapsed, 1, -1, time.duration);
    const fadeIn = easeInOutCubic(time.elapsed, 0, 1, time.duration);
    const offset = easeInOutCubic(time.elapsed, scrollStart, el.offsetLeft - scrollStart, time.duration)
    const height = easeInOutCubic(time.elapsed, startHeight, el.clientHeight - startHeight, time.duration)

var easeInOutCubic = (t, b, c, d) => {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
}

编译

CSS

body,
html {
    background: #F3F5FF;
    font-family: 'Roboto', sans-serif;
}
* {
    box-sizing: border-box;
}
.Container {
    width: 500px;
    border-radius: 6px;
    position: relative;
    background: #282B36;
    margin: 60px auto 0 auto;
    box-shadow: 0 10px 40px 0 rgba(40, 43, 54, 0.3);
}
.Container nav {
    top: 15px;
    left: 15px;
    position: absolute;
}
.Container nav a {
    z-index: 2;
    color: #A5AAAF;
    font-size: 13px;
    padding: 5px 8px;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
}
.Container nav a:hover,
.Container nav a.active {
    color: white;
}
.Container nav .current {
    top: 0;
    left: 0;
    z-index: 0;
    width: 40px;
    height: 22px;
    border-radius: 3px;
    position: absolute;
    background-color: rgba(255, 255, 255, 0.2);
}
.Container .Contents {
    width: 100%;
    display: flex;
    overflow: hidden;
    align-items: flex-start;
}
.Container .Content {
    width: 100%;
    flex-shrink: 0;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 24px;
    padding: 60px 30px 30px 30px;
}
.Container .Content .hljs {
    padding: 0;
    font-size: 13px;
    line-height: 24px;
    font-family: Consolas, Monaco, monospace;
}
.hljs-number {
    color: #FFC24C;
}
.credit {
    left: 50%;
    bottom: 30px;
    width: 300px;
    position: fixed;
    text-align: center;
    margin-left: -150px;
}
.credit p {
    color: #6C738B;
    font-size: 13px;
    font-weight: 300;
    line-height: 20px;
}
.credit p a {
    color: #32325D;
    font-weight: 400;
    text-decoration: none;
}
.credit p a:hover {
    color: #5C33FF;
}

HTML

Stripe::Charge.create(
  :amount => 2000,
  :currency => "eur",
  :source => "tok_mastercard", # obtained with Stripe.js
  :description => "Charge for hello@thomascullen.io"
)</code></pre>
        </div>
        <div class="Content" id="two">
            <pre class="python"><code>import stripe
stripe.api_key = "..."

stripe.Charge.create(
  amount=2000,
  currency="eur",
  source="tok_amex", # obtained with Stripe.js
  description="Charge for madison.wilson@example.com"
)</pre>
            </code>
        </div>
        <div class="Content" id="three">
            <pre><code>var stripe = require("stripe")(
  "..."
);

stripe.charges.create({
  amount: 2000,
  currency: "eur",
  source: "tok_visa", // obtained with Stripe.js
  description: "Charge for jayden.martinez@example.com"
}, function(err, charge) {
  // asynchronously called
});</code></pre>
        </div>
        <div class="Content" id="four">
            <pre><code>stripe.Key = "..."

chargeParams := &stripe.ChargeParams{
  Amount: 2000,
  Currency: "eur",
  Desc: "Charge for benjamin.wilson@example.com",
}

// obtained with Stripe.js
chargeParams.SetSource("tok_mastercard")
ch, err := charge.New(chargeParams)</code></pre>
        </div>
    </div>
</div>

Code Snippets Animation，带ruby，python，go和javascript语言的语法着色高亮特性。

h5, viewer

编辑器支持Emmet

快捷键

Code Snippets Animation，带ruby，python，go和javascript语言的语法着色高亮特性。

h5, viewer

黑色风格HTML5移动网站完整界面设计和代码模板

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：