css數字/文字滾動效果

阿新 • • 發佈：2021-01-10

效果：

在這裡插入圖片描述

原理

利用偽類，開始的時候給本來的內容蓋住，然後執行動畫。
設定寬高，寬就是單個內容（比如數字中的一位數）的寬，讓內容一行一個的排成列。
動畫就是讓這些內容一個個的往上升，造成一種滾動效果
最後露出原來的內容（原來的內容和偽類裡的內容是同樣的樣式）

程式碼

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>數字滾動</title>
	<style>
		/*無關緊要的屬性*/ 

		.txt {
			position: absolute;
			left: 178px;
			font-size: 30px;
			line-height: 30px;
		}

		/*接下來這一段是重點*/
		/*設定內容和偽類的樣式*/
		.mod_txt {
			position: relative;
			display: inline-block;
			vertical-align: middle;
			text-align: center;
			float: left;
			overflow: hidden;
			width: 22px;
			height: 30px; 

			text-transform: uppercase;
			font-size: 30px;
			color: #333;
		}

		.mod_txt:before {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			word-break: break-all;
			background: #FFFFFF;
			font-size: 30px;
			color: #333;
		}

		/*設定裡面第一個數字的動畫*/
		.txt11 span:nth-child(1):before {
			content 
: "03456789";
			-webkit-animation-name: txt1;
			animation-name: txt1;
			-webkit-animation-duration: 1.6s;
			animation-duration: 1.6s;
			/* -webkit-animation-delay: 0.3s;
			animation-delay: 0.3s; */
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}

		/*隨便寫的數，作用就是讓這一列數字向上升，形成滾動效果*/
		@-webkit-keyframes txt1 {
			from {
				margin-top: -648px;
			}

			to {
				margin-top: 110px;
			}
		}

		/*設定裡面第二個數字的動畫*/
		.txt11 span:nth-child(2):before {
			content: "051341989";
			-webkit-animation-name: txt1;
			animation-name: txt1;
			-webkit-animation-duration: 1.8s;
			animation-duration: 1.8s;
			-webkit-animation-fill-mode: forwards;
			animation-fill-mode: forwards;
		}
	</style>
</head>
<body>
	<div class="txt txt11">
		<span class="mod_txt">2</span>
		<span class="mod_txt">0</span>
	</div>
</body>
</html>

嘮嘮叨叨

想讓動畫停留的時間不一樣，就要讓animation-duration不一樣
想讓動畫開始運動的時間不同，就單加animation-delay,但這樣會讓原來的數字先被看到一會
想先不讓動畫執行，到一定時間了再執行的話，以上面的demo為例，html裡可以先不寫class名txt11
，等到了時候再$('.txt').addClass('txt11');就好了

css數字/文字滾動效果

技術標籤：h5html+csscss 效果：原理利用偽類，開始的時候給本來的內容蓋住，然後執行動畫。設定寬高，寬就是單個內容（比如數字中的一位數）的寬，讓內容一行一個的排成列。動畫就是讓這些內容一個個的往上升

原生JS實現文字滾動效果

技術標籤：Jsjshtml 原生JS實現文字滾動效果 <!DOCTYPE html> <html lang="zh-CN">

文字滾動效果

列表文字無縫滾動（說明：姓名和地點都是隨機生成）  <div class=\"dynamic\">

微信小程式實現多行文字滾動效果

本文例項為大家分享了微信小程式實現多行文字滾動的具體程式碼，供大家參考，具體內容如下

vue3實現CSS無限無縫滾動效果

本文例項為大家分享了3實現無限無縫滾動效果的具體程式碼，供大家參考，具體內容如下

數字外掛滾動效果（遊戲機滾動抽獎結果）

引入外掛react-transition-group import{CSSTransition,TransitionGroup}from\'react-transition-group\'

STC89C52驅動MAX7219LED點陣級聯, 文字滾動效果

級聯下的傳值方式級聯下, N個MAX7219相當於組成了一個8*N bit寬度的鎖存器, 如果需要對第M個7219進行寫入, 需要做M次定址+寫入後拉高CS, 才能到達這個7219. 如果僅僅對這個7219進行操作, 不操作其他7219, 那麼在第

css實現視差滾動效果

今天逛京東金融的時候發現他家網站首頁的滾動效果看著很有意思，於是就做了一個，demo連結http://1.liwenyang.applinzi.com/index.html

純css實現文字迴圈滾動效果

<!doctype html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale

JS+CSS+HTML實現“程式碼雨”類似黑客帝國文字下落效果

先看看JS+CSS+HTML實現“程式碼雨”類似黑客帝國文字下落最終效果： HTML程式碼：

vue實現公告欄文字上下滾動效果的示例程式碼

本文詳細的介紹了vue實現公告欄文字上下滾動效果的示例程式碼，分享給大家，具體入如下：

vue實現數字滾動效果

本文例項為大家分享了vue實現數字滾動的具體程式碼，供大家參考，具體內容如下

Android實現文字滾動播放效果的程式碼

在開發時，我們會遇到文字過長，TextView不能完全展示，但又不想文字換行展示，這樣有時會影響美觀。這時我們就需要文字滾動播放，讓使用者可以看到所有的文字。

react-countup - 數字滾動效果

importCountUp,{startAnimation}from\'react-countup\' import\'./countup.css\' class Index extends Component {

CSS - 使用CSS 3D屬性來完成頁面視差滾動效果。

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />

HTML和CSS在文字上液體填充動畫效果

HTML程式碼： <!DOCTYPE html> <html lang=\"en\"> <head><meta charset=\"UTF-8\" /><meta name=\"viewport\"content=\"width=device-width, initial-scale=1.0\" /><title>用

CSS文字漸變效果

解法一：程式碼： <!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <style>

如何用 CSS Animations 實現滑動圖片展現文字的效果

在這篇文章中，我希望能帶領大家瞭解一下CSS animation property，以及詳細地解釋我的個人網站中的一個效果：讓文字在移動的物體後出現。如果你想要看最後的成果，這裡有一個例子。

Vue 實現數字滾動效果

技術標籤：vuevuejs 效果就是顯示某個數值不是直接顯示，而是從0開始滾動，直到為那個數值時停止滾動 1、新建數字滾動元件：test.vue檔案

CSS——在有滾動條效果的情況下不顯示滾動條的樣式

技術標籤：CSS wxml檔案 <view class="demo"> <view>我是demo</view> <view>我是demo</view>

css數字/文字滾動效果

效果：

原理

程式碼

嘮嘮叨叨

相關推薦