中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

網(wǎng)站前端制作之css效果

2023-03-27    分類: 網(wǎng)站建設(shè)

前端制作

Css3動(dòng)畫,純css使用兩張或者多張背景圖實(shí)現(xiàn)背景圖無限循環(huán)滾動(dòng)的效果,這種效果可以循壞背景圖展示背景圖的內(nèi)容,而且可以展示很多想要表達(dá)的內(nèi)容。如下圖的效果圖所示:
HTML網(wǎng)頁制作
Html:
CSS制作
Css:
文字效果
Css3動(dòng)畫做文字自動(dòng)滑動(dòng)效果,如下圖所示:
HTML
Html:
CSS
Css:

css做鼠標(biāo)經(jīng)過的高亮顯示,如下圖所示:
Html:
<li>
<div class="wrap">
<div class="txt">
<a href="/pindu/products/2.html">
<div class="t1">
Diamond
</div>
<div class="t2">
New design, luxury through drilling, the gift of nature.
</div>
</a>
<div class="links">
<a href="/pindu/products/2.html">
Read more >
</a>
<a href="/pindu/Contact/feedback.html">
RAQ >
</a>
</div>
</div>
<div class="img">
<a href="/pindu/products/2.html">
<img src="/pindu/Uploads/Temp/image/20220503/6270d426f3a06.jpg">
</a>
</div>
</div>
</li>
Css:
.i-product .vice_box ul li{
margin-bottom: 40px;
}
.i-product .vice_box ul li:last-child{
margin-bottom: 0px;
}
.i-product .vice_box ul li .wrap{
border-radius: 15px;
background: #FFFFFF;
overflow: hidden;
box-sizing: border-box;
padding: 35px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.i-product .vice_box .txt{
float: left;
width: 49%;
margin-right: 2%;
margin-top: 25px;
}
.i-product .box .txt>a{
display: block;
width: 100%;
}
.i-product .box .txt .t1{
font-family: 'posb';
font-size: 40px;
color: #000000;
}
.i-product .box .txt .t2{
font-size: 16px;
color: #666666;
line-height: 1.7;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.i-product .box .links{
font-size: 0;
margin-top: 45px;
}
.i-product .box .links a{
display: inline-block;
margin-right: 28px;
font-family: 'posb';
color: #333333;
font-size: 16px;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.i-product .box .links a:last-child{
margin-right: 0;
}
.i-product .box .links a:hover{
text-decoration: underline;
}
.i-product .main_box .img{
width: 100%;
text-align: center;
overflow: hidden;
margin-top: 45px;
}
.i-product .vice_box .img{
float: right;
width: 49%;
overflow: hidden;
text-align: center;
}
.i-product .box .img img{
max-width: 100%;
}
.i-product .main_box .wrap:hover,
.i-product .vice_box ul li .wrap:hover{
box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
-webkit-transform: translateY(-10px);
transform: translateY(-10px);

分享名稱:網(wǎng)站前端制作之css效果
分享路徑:http://m.rwnh.cn/news34/248184.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、企業(yè)網(wǎng)站制作、營銷型網(wǎng)站建設(shè)網(wǎng)站設(shè)計(jì)公司、品牌網(wǎng)站制作定制開發(fā)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作
舞阳县| 东乡| 达拉特旗| 竹北市| 德江县| 防城港市| 仙游县| 新干县| 和顺县| 临朐县| 惠来县| 芜湖县| 海门市| 崇义县| 皋兰县| 昌黎县| 英德市| 兴宁市| 巍山| 冕宁县| 兴业县| 元氏县| 噶尔县| 乐安县| 疏附县| 宁阳县| 芦山县| 梨树县| 霸州市| 钦州市| 库伦旗| 瑞安市| 尼勒克县| 砀山县| 舞阳县| 胶州市| 灵台县| 榆社县| 西平县| 同德县| 新河县|