index.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>css3春联切换</title><linkrel="stylesheet"href="css/style.css"rel="external nofollow"></head><body><divclass="rotating-text"><p>春联Show</p><p><spanclass="word alizarin">Python Java C++ very verySo Easy</span>#三种编程语言非常非常简单<spanclass="word wisteria">Years Months Weeks Day Day No Bug</span>#年年月月周周天天都没有漏洞<spanclass="word peter-river">Happy New Year</span>#新年快乐</p></div><scriptsrc="js/script.js"></script></body></html>
@importurl(https://fonts.googleapis.com/css?family=Lato:600);body {display: flex;justify-content:center;align-items:center;height:100vh;background:#222;}.rotating-text {font-family: Lato,sans-serif;font-weight:600;font-size:36px;color:white;transform: translateX(-80px);}.rotating-text p {display: inline-flex;margin:0;vertical-align:top;}.rotating-text p .word {position:absolute;display: flex;opacity:0;}.rotating-text p .word .letter {transform-origin:centercenter25px;}.rotating-text p .word .letter.out {transform: rotateX(90deg);transition:0.32s cubic-bezier(0.6,0,0.7,0.2);}.rotating-text p .word .letter.in {transition:0.38s ease;}.rotating-text p .word .letter.behind{transform: rotateX(-90deg);}.alizarin {color:#e74c3c;}.wisteria {color:#8e44ad;}.peter-river {color:#3498db;}.emerald {color:#2ecc71;}.sun-flower {color:#f1c40f;}
varwords = document.querySelectorAll(".word");words.forEach(function(word) {varletters = word.textContent.split("");word.textContent ="";letters.forEach(function(letter) {varspan = document.createElement("span");span.textContent = letter;span.className ="letter";word.append(span);});});varcurrentWordIndex = 0;varmaxWordIndex = words.length - 1;words[currentWordIndex].style.opacity ="1";varrotateText =function() {varcurrentWord = words[currentWordIndex];varnextWord = currentWordIndex === maxWordIndex ? words[0] : words[currentWordIndex + 1];// rotate out letters of current wordArray.from(currentWord.children).forEach(function(letter, i) {setTimeout(function() {letter.className ="letter out";}, i * 80);});// reveal and rotate in letters of next wordnextWord.style.opacity ="1";Array.from(nextWord.children).forEach(function(letter, i) {letter.className ="letter behind";setTimeout(function() {letter.className ="letter in";}, 340 + i * 80);});currentWordIndex =currentWordIndex === maxWordIndex ? 0 : currentWordIndex + 1;};rotateText();setInterval(rotateText, 4000);
python专栏收录该内容
38 篇文章
订阅专栏

index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
style.css
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
|
script.js
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 32 33 34 35 36 |
|
当缺少库时会有相应提示 黑窗口执行下方命令+包名即可下载安装
凡哥此处用的idea 直接Alt+Enter直接下载就成了
idea配置python环境也可以参考此文:
2.效果展示


importiofromPILimportImage#import numpy as npimportrequestsdefget_word(ch, quality):"""获取单个汉字(字符)的图片ch - 单个汉字或英文字母(仅支持大写)quality - 单字分辨率,H-640像素,M-480像素,L-320像素"""fp=io.BytesIO(requests.post(url='http://xufive.sdysit.com/tk', data={'ch': ch}).content)im=Image.open(fp)w, h=im.sizeifquality=='M':w, h=int(w*0.75),int(0.75*h)elifquality=='L':w, h=int(w*0.5),int(0.5*h)returnim.resize((w, h))defget_bg(quality):"""获取春联背景的图片"""returnget_word('bg', quality)defwrite_couplets(text, HorV='V', quality='L', out_file=None):"""生成春联text - 春联内容,以空格断行HorV - H-横排,V-竖排quality - 单字分辨率,H-640像素,M-480像素,L-320像素out_file - 输出文件名"""usize={'H': (640,23),'M': (480,18),'L': (320,12)}bg_im=get_bg(quality)text_list=[list(item)foritemintext.split()]rows=len(text_list)cols=max([len(item)foritemintext_list])ifHorV=='V':ow, oh=40+rows*usize[quality][0]+(rows-1)*10,40+cols*usize[quality][0]else:ow, oh=40+cols*usize[quality][0],40+rows*usize[quality][0]+(rows-1)*10out_im=Image.new('RGBA', (ow, oh),'#f0f0f0')forrowinrange(rows):ifHorV=='V':row_im=Image.new('RGBA', (usize[quality][0], cols*usize[quality][0]),'white')offset=(ow-(usize[quality][0]+10)*(row+1)-10,20)else:row_im=Image.new('RGBA', (cols*usize[quality][0], usize[quality][0]),'white')offset=(20,20+(usize[quality][0]+10)*row)forcol, chinenumerate(text_list[row]):ifHorV=='V':pos=(0, col*usize[quality][0])else:pos=(col*usize[quality][0],0)ch_im=get_word(ch, quality)row_im.paste(bg_im, pos)row_im.paste(ch_im, (pos[0]+usize[quality][1], pos[1]+usize[quality][1]), mask=ch_im)out_im.paste(row_im, offset)ifout_file:out_im.convert('RGB').save(out_file)out_im.show()text='思前想后几行代码筑万载春秋 扶内保外一千精英带五千干将'#对联内容write_couplets(text, HorV='V', quality='M', out_file='春联.jpg')#生成普天同庆.jpg对联
