建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)
這篇文章將為大家詳細(xì)講解有關(guān)css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括訥河網(wǎng)站建設(shè)、訥河網(wǎng)站制作、訥河網(wǎng)頁制作以及訥河網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，訥河網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到訥河省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！效果圖如下：
沒有具體說做什么效果，但是想著純數(shù)字轉(zhuǎn)換太簡單了，然后就順手做了一個翻牌的效果。
效果預(yù)覽，新窗口打開：https://codepen.io/andy-js/pen/ExaGxaL
首先做一些頁面布局：
body{background: #000;}
ul{
list-style: none;
margin:100px 0;
display: flex;
justify-content:center;
line-height: 56px;
height:56px;
font-size: 39.6px;
color: #FFFFFF;
transform-style:preserve-3d;
perspective:1000px;
}
li{
height:56px;
margin:0 10px;
background:none;
width:16px;
position: relative;
}
.num{
width:46px;
transform-style:preserve-3d;
perspective:1000px;
transform:rotateY(0deg);
transition: 1s all ease;
}
p{
height:56px;
width:46px;
text-align: center;
background: #EC2C5C;
border-radius: 2.57px;
position: absolute;
}
p:nth-child(2){
transform: scalex(-1) translateZ(-1px);
}然后通過動態(tài)插入，模擬了這么一個效果
利用了transition來做的動畫
利用transform:rotateY來做的翻轉(zhuǎn)
在翻轉(zhuǎn)之前先將另一個數(shù)字scalex左右鏡像之后translateZ(-1px)移動到另一個數(shù)字的后面，這樣翻轉(zhuǎn)過來就能看到鏡像的數(shù)字
不是很完善，還有很多可以改進(jìn)的地方
全部代碼如下：
關(guān)于“css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
本文題目：css3翻牌翻數(shù)字效果怎么實(shí)現(xiàn)-創(chuàng)新互聯(lián)
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/ceiddd.html
