比較好用的6個前端HTML+CSS特效
這篇文章將為大家詳細講解有關比較好用的6個前端HTML+CSS特效，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
網(wǎng)站建設哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、小程序定制開發(fā)、集團企業(yè)網(wǎng)站建設等服務項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了江源免費建站歡迎大家使用！
css的基本語法是什么
css的基本語法是：1、css規(guī)則由選擇器和一條或多條聲明兩個部分構成；2、選擇器通常是需要改變樣式的HTML元素；3、每條聲明由一個屬性和一個值組成；4、屬性和屬性值被冒號分隔開。
1.圖片慢慢靠近
當我們在看圖片時，可能覺得圖片有點小，那我們就給用戶一種體驗，當用戶把鼠標移入時，圖片慢慢變大。
知識點：
CSS3之“過渡”：transition()----定義如何放大圖片和放大過程的時間
CSS3之“2D轉換”：transform:scale()----放大圖片
CSS3之“溢出”:overflow:hidden----當圖片放大時，溢出要隱藏
代碼：
.imgDiv{
width:300px;
overflow: hidden;
box-shadow: 0 1px 4px rgba(0,0,0,0.6);
border:5px solid rgba(0,0,0,0.6);
box-sizing: border-box;
}
.imgDiv img{
width:300px;
}
.imgDiv img:hover{
transform:scale(1.1) ;
transition: 0.5s linear;
}
2.給放大的圖片加特效
知識點：
1. CSS之“filter”。
2. CSS灰色濾鏡：grayscale()
3. CSS深褐色濾鏡：sepia()
代碼：
.imgDiv{
width:300px;
overflow: hidden;
border:5px solid rgba(0,0,0,0.6);
box-sizing: border-box;
display: flex;
flex:auto;
margin-top:100px;
margin-left:100px;
}
.imgDiv img{
width:300px;
filter:grayscale(100%);<-新增->
}
.imgDiv img:hover{
transform:scale(1.1) ;
transition: 0.5s linear;
filter:grayscale(0);<-新增->
}效果圖：
.jpg)
3.軟件的白天與黑夜模式
知識點：
1、CSS之濾鏡：invert()—將圖片顏色反轉，當圖片顏色為白色時，invert(0)為白；invert(1)為黑；反之。
白天模式
切換
isChange:boolean=true;
translate(){
var body=document.getElementById("body");
var text=document.getElementById("text");
var container=document.getElementById("container");
if(this.isChange){
body.setAttribute("style","filter:invert(100%)");
text.innerHTML="白天模式";
this.isChange=false;
}else{
body.setAttribute("style","filter:invert(0%)");
text.innerHTML="黑夜模式";
this.isChange=true;
}
}效果圖：
注意：
4.CSS過渡實現(xiàn)白天\黑暗模式
知識點：
1. CSS之過渡：transition
2. 在這里子元素也用到了上面的invert()，將字體換色，也可以直接用js將字體的color屬性轉換，但濾鏡效率更高
代碼：
白天模式
切換
<-只展示id=translate的css->
#translate{
position: absolute;
width:0px;
height:0px;
transition:width 2s,height 2s;
background-color:black;
}
export class HoverToLargeImageComponent implements OnInit {
isChange:boolean=true;
translate(){
var text=document.getElementById("text");
var translate=document.getElementById("translate");
if(this.isChange){
translate.setAttribute("style","width:990px;height:690px;");
text.innerHTML="黑夜模式";
text.setAttribute("style","filter:invert(100%)")
this.isChange=false;
}else{
translate.setAttribute("style","width:0px;height:0px");
text.innerHTML="白天模式";
text.setAttribute("style","filter:invert(0)")
this.isChange=true;
}
}
}
效果圖：
注意：
5. 混合模式
知識點：
CSS之混合模式：mix-blend-mode
該屬性有16個值：
normal 正常
multiply 正片疊底
screen 濾色
overlay 疊加
darken 變暗
lighten 變亮
color-dodge 顏色減淡
color-burn 顏色加深
hard-light 強光
soft-light 柔光
difference 差值
exclusion 排除
hue 色相
saturation 飽和度
color 顏色
luminosity 亮度
代碼：
混合模式學習
.first{
background-image: url(https://source.unsplash.com/1920x1080?city);
}
.second{
background-image: url(https://source.unsplash.com/1920x1080?landscape);
}
.third{
background-image: url(https://source.unsplash.com/1920x1080?portrait);
}
.fourth{
background-image: url(https://source.unsplash.com/1920x1080?stars);
}
.container,.middle:before{
height: 200px;
width:300px;
position: fixed;
box-sizing: content-box;
top:50%;
left:50%;
transform: translate(-50%,-50%);
text-align: center;
line-height: 200px;
mix-blend-mode: lighten;
}
.container{
background-color:cornsilk;
z-index: 10;
}
.background{
height:750px;
width:1500px;
position: relative;
margin:0px auto;
background-size: cover;
background-repeat: no-repeat;
}
.middle:before{
content:" ";
padding:50px;
}
.middle{
position: absolute;
width:500px;
height:100%;
margin-left: 500px;
clip:rect(auto,auto,auto,auto);
}
.first .middle:before{
background-color: red;
mix-blend-mode: lighten;
}
.second .middle:before{
background-color:gold;
mix-blend-mode: difference;
}
.third .middle:before{
background-color: aqua;
mix-blend-mode: color-dodge;
}
.fourth .middle:before{
background-color: brown;
mix-blend-mode: soft-light;
}
效果：
注意：
z-index屬性：z-index屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總會處于堆疊順序較低的元素的前面。
所在的HTML位置，本該被后面的元素覆蓋而無法顯示出來，但使用了z-index之后就可以解決元素覆蓋問題。
isolation屬性：隔離，主要與mix-blend-mode屬性一起使用，將混合模式只應用于某一個元素或某一組元素?？扇≈担篴uto|isolate(創(chuàng)建新的堆疊上下文)。使用了isolate之后，該元素就不會再與父元素混合，而是與它的子元素混合。
這里用了四張圖片，四種不同的混合屬性值和背景色，感受混合模式的炫。
6. 視覺效果差，超炫酷
知識點：
CSS之背景固定：background-attachment
上代碼：
因為愛，所以愛
與你一見如故，是我今生最美麗的相遇。
與你一諾相許，是我素色年華里最永恒的風景。
一直想說，無論走到哪里，最想去的是你的身邊。
愿我們彼此相愛，一直到時間的盡頭。
我相信我們可以一起，等青絲變白發(fā)。
你在，我在，就是?？菔癄€。
沒有過多的華麗，只有一句我喜歡你，卻能讓彼此牽掛于心。
親愛的，你知道嗎，哪怕遍體鱗傷，我仍有愛你的余力。
有的人你只看了一眼，卻影響其一生。
生活就像是包餃子，不管你是什么餡，我都會緊緊的把你包在我心里，任生活的沸水怎樣煮，都磨不掉 我對你的愛！
好久沒有見你了，心中十分掛念，可是又不敢去看你，因為害怕打擾你，你會不開心，所以我盡力的控制自己思念的心。
不知道這些日子，你是不是跟我一樣，牽掛你，想念你；我是真的特別想你，想看看你的笑，想看看你純真的臉；想著你，我就特別來勁，晚上都無法睡好！
我愛你，無畏人海的擁擠
你小心一吻便顛倒眾生 一吻便救一個人
.container {
height: 100vh;
}
.parallax-img {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/7/thumb.jpg");
}
.title{
position: relative;
width:300px;
height: 150px;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
background-color: gray;
line-height: 150px;
text-align: center;
color:tan;
}
.myLove{
display: flex;
height:400px;
width:100%;
background-color: gray;
}
.myLove div{
width:30%;
height: 80%;
margin-left: 100px;
margin-top:50px;
}
.myLove div img{
width:100%;
height:100%;
}
.myLove .article{
margin-left: 250px;
}
.parallax-img1 {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/182/5/thumb.jpg");
}
.parallax-img2{
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
background-image: url("http://ppe.oss-cn-shenzhen.aliyuncs.com/collections/181/10/thumb.jpg");
}
.parallax-img1 div,.parallax-img2 div {
position: relative;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
background-color: gray;
width:40%;
height:50px;
text-align: center;
color: tan;
}
效果圖：
注意：
如果能錄全屏則效果更佳，但由于圖片上傳大小限制，只能錄制中間部分和快速拉過。如果喜歡，可以自己試試，代碼已全部粘貼出來。
其實就是一個CSS屬性的知識，就看你如何配置圖片、色效使效果更炫酷。
圖片能決定視圖效果，因此，上面三張圖片來源于原博客。
關于“比較好用的6個前端HTML+CSS特效”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
當前文章：比較好用的6個前端HTML+CSS特效
分享網(wǎng)址：http://weahome.cn/article/piojhs.html
-
在線咨詢
微信咨詢
電話咨詢
-
028-86922220（工作日）
18980820575（7×24）
-
提交需求
-
返回頂部
重慶分公司
重慶分公司
