當前位置:編程學習大全網 - 源碼下載 - 如何通過css樣式來實現網站logo發光動畫效果

如何通過css樣式來實現網站logo發光動畫效果

添加修改CSS代碼如下 :

.logo-site,.logo-sites{position:relative;float:left;margin:18px 0 0 10px;width:220px;max-height:50px;overflow:hidden;transition-duration:.5s}

.logo-site img,.logo-sites img{width:220px;max-height:50px}@media screen and (max-width:480px){

.logo-site,.logo-sites{width:140px}}@media screen and (min-width:900px){

.logo-site:before{content:"";position:absolute;left:-665px;top:-460px;width:220px;height:15px;background-color:rgba(255,255,255,.5);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-animation:searchLights 1s ease-in 1s infinite;-o-animation:searchLights 1s ease-in 1s infinite;animation:searchLights 1s ease-in 1s infinite}}@-webkit-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-o-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@-moz-keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}@keyframes searchLights{0%{left:-100px;top:0}to{left:120px;top:100px}}

.site-title{font-size:24px;font-size:2.4rem;font-weight:700;padding:0 0 2px 0}

.site-name{display:none}@media screen and (min-width:900px){

.logo-site img,.logo-sites img{transition-duration:.8s}

操作流程

把css代碼當中的logo-site改成妳網站包圍logo的css即可(f12鍵審核元素,即可找到妳的logo的css元素)。找到妳logo的css名稱然後把上面的css代碼修改成妳的css名稱,放入css代碼當中即可(防止出錯,記得備份!)

以上就是logo添加css掃光效果的方法,當然妳也可以運用到其他的地方。

註意,有些模板CSS代碼不相同,不能貿然的使用,可能會出現錯誤,新手不要嘗試。

  • 上一篇:什麽叫無障礙住房
  • 下一篇:尼特牌火災報警控制器JB-QT-FT8000A如何操作
  • copyright 2024編程學習大全網