摘要:高大上網站總結圖片處理以及修復一,前言現在的前端相對來說,重視并不夠。因為公司網站是公司的臉面,尤其是公司。另外,由于是我自己弄,所以圖片沒有標準話,只能自己簡單地加工一下。由于時間關系,不再贅述。
高大上網站-CSS3總結1-圖片2D處理以及BUG修復
一,前言:
現在的前端UI相對JS來說,重視并不夠。
但是CSS3提供的新特性,將現在的網站赤裸裸的劃分為兩類:一類還在寫著老舊樣式,或者通過bootstrap來蹭點CSS3動畫。另一類,是用CSS3寫著各種特效的網站。
也許國內還感覺不是很明顯。但是在國外的網站真的很明顯能看出來這些。也許很多時候,國內大部分公司都不愿意將時間和精力放在這上面。另外,愿意這樣寫的前端工程師也偏少。(你能指望一個實習生寫這個?)
但是,這里我要說但是了。
一個好的CSS3樣式完全值得公司去花費這樣的時間和精力。因為公司網站是公司的臉面,尤其是IT公司。一個酷炫的頁面能讓你的用戶和合作方立馬感受到你公司那種狀態,那種光靠文字很難表達的狀態。
我這里給一些國外的網站,你可以試著去看一看:
https://trampolinepark.com/
http://xmas.evs.com/2018/
趁著這兩天有時間,我也需要將自己的CSS3從理論轉化為實際的應用。
二,代碼:
1.文件目錄:
2.HTML代碼:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test2title>
<link rel="stylesheet" href="./css/main.css">
head>
<body>
<div class="imagearea">
<figure class="style1">
<img src="./images/22.jpg" alt="" width="800px" height="400px">
<figcaption>
<p>圖片標題22p>
<p>圖片注解1p>
<p>圖片注解2p>
<p>圖片注解3p>
figcaption>
figure>
<figure class="style1">
<img src="./images/31.jpg" alt="" width="800px" height="400px">
<figcaption>
<p>圖片標題31p>
<p>圖片注解1p>
<p>圖片注解2p>
<p>圖片注解3p>
figcaption>
figure>
<figure class="style1">
<img src="./images/26.jpg" alt="" width="800px" height="400px">
<figcaption>
<p>圖片標題26p>
<p>圖片注解1p>
<p>圖片注解2p>
<p>圖片注解3p>
figcaption>
figure>
<figure class="style2">
<img src="./images/27.jpg" alt="" width="700px" height="400px">
<figcaption>
<h2>圖片標題45h2>
<p>圖片注解1p>
<p>圖片注解2p>
<div>div>
figcaption>
figure>
<figure class="style2">
<img src="./images/34.jpg" alt="" width="700px" height="400px">
<figcaption>
<h2>圖片標題45h2>
<p>圖片注解1p>
<p>圖片注解2p>
<div>div>
figcaption>
figure>
<figure class="style2">
<img src="./images/45.jpg" alt="" width="700px" height="400px">
<figcaption>
<h2>圖片標題45h2>
<p>圖片注解1p>
<p>圖片注解2p>
<div>div>
figcaption>
figure>
div>
body>
html>
3.CSS3代碼:
/*整體樣式區*/
*{
margin : 0;
padding : 0;
}
/*圖片展覽區域—-公共樣式*/
div.imagearea figure{
position : relative;
overflow : hidden;
float : left;
}
div.imagearea figure figcaption{
position : absolute;
top : 0;
left : 0;
padding : 20px;
color : white;
}
/*圖片展覽區--公共動畫屬性*/
div.imagearea figure img{
transition : all .35s;
}
div.imagearea figure figcaption p, div, h1, h2, h3, h4, strong, content{
transition : all 0.35s;
}
/*圖片展覽區--自適應樣式更改*/
@media screen and (max-width : 600px){
div.imagearea figure{ width : 100%; }
}
@media screen and (min-width : 601px) and (max-width : 1000px){
div.imagearea figure{ width : 50%; }
}
@media screen and (min-width : 1001px){
div.imagearea figure{ width : 33.333%; }
}
/*圖片展覽區--自定義樣式動畫1*/
div.imagearea figure.style1 figcaption p:nth-of-type(1){ transition-delay : 0.05s; }
div.imagearea figure.style1 figcaption p:nth-of-type(2){ transition-delay : 0.1s; }
div.imagearea figure.style1 figcaption p:nth-of-type(3){ transition-delay : 0.15s; }
div.imagearea figure.style1 figcaption p:nth-of-type(4){ transition-delay : 0.2s; }
div.imagearea figure.style1{
background : #2F0000;
}
div.imagearea figure.style1 img{
opacity : 0.8;
transform : translate(-150px, 0);
}
div.imagearea figure.style1 figcaption p{
margin : 5px;
text-align : center;
color : gray;
background : lavender;
transform : translate(-150px, 0);
}
div.imagearea figure.style1:hover img{
transform : translate(-50px, 0);
opacity : 0.5;
}
div.imagearea figure.style1:hover figcaption p{
transform : translate(0, 0);
}
/*圖片展覽區--自定義動畫2*/
div.imagearea figure.style2{
background : #001700;
}
div.imagearea figure.style2 figcaption{
width : 100%;
height : 100%;
}
div.imagearea figure.style2 figcaption h2{
margin-top:20%;
margin-left:25%;
transform:skew(90deg);
}
div.imagearea figure.style2 figcaption p{
margin-top:2%;
margin-left:25%;
transform:translate(0,50px);
opacity: 0;
}
div.imagearea figure.style2 figcaption div{
border : 2px solid white;
height : 60%;
width : 60%;
position: absolute;
top:20%;
left:20%;
transform:translate(0,-400px) rotate(-180deg);
}
div.imagearea figure.style2:hover figcaption div{
transform: translate(0,0) rotate(0);
}
div.imagearea figure.style2:hover img{
opacity: 0.5;
transform: scale(1.1);
}
div.imagearea figure.style2:hover figcaption p{
transform:translate(0,0);
opacity: 1;
}
div.imagearea figure.style2:hover figcaption h2{
transform:skew(0);
}
三,效果:
四,Github:
源碼地址:https://github.com/cureking/CSS3_learning
五,BUG:
我操作的電腦分辨率是1920*1080,HTML文件中我圖片的寬度設置原先是700px.
在谷歌瀏覽器上會出現第四個圖片移至第一個圖片時,可能出現卡住的情況,頁面刷新無效,必須重新打開。但是在IE瀏覽器上沒有這樣的問題。
一開始,我也一臉懵逼。
直到我想起我電腦分辨率后,計算了圖片在偏移后的剩余量,才發現是圖片寬度不足的問題。這是十分巧合的。
另外,由于是我自己弄,所以圖片沒有標準話,只能自己簡單地加工一下。
(由于時間關系,不再贅述。只提一下。)
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/2077.html
摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求,經過一個多月的蟄...
摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求,經過一個多月的蟄...
摘要:隨后會陸續發布及相關版本的插件。這和圖片查看器的操作方式是相同的。目前的調整大小存在一點,但不影響整體的使用。鍵盤控制和照片查看器的按鍵是一樣的。除了照片查看器,的圖片查看器也非常的高大上。 showImg(https://segmentfault.com/img/remote/1460000012565638?w=750&h=375); 前言 因為一些特殊的業務需求,經過一個多月的蟄...
摘要:淘寶造物節的活動頁就是全景的一個很贊的頁面,它將全景圖分割成等份,相鄰的元素構成的夾角,相鄰兩側面相對于棱柱中心所構成的夾角。 本文轉自凹凸實驗室:https://aotu.io/notes/2016/08... showImg(https://segmentfault.com/img/remote/1460000011381045); 前言 3D 全景并不是什么新鮮事物了,但以前...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00