CSS样式实现Logo扫光特效

Html代码:

<div class="logo_new">
    <h1 class="logo"><a href="https://www.jobman.top" title="jobman一个记录分享IT技术经验的小站"><
img src="https://www.jobman.top/wp-content/uploads/2018/12/logo.png">jobman</a></h1>	
</div>

Css 代码

.logo_new{
  position: relative;
  overflow: hidden;
  max-height: 50px;
  float:left; /*本站logo居左,所以添加此项样式*/
}
.logo_new:before {
    content: "";
    position: absolute;
    width: 150px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.5);
     /*transform:rotate(-45deg)旋转45度*/
   	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: blink 1.3s ease-in 1s infinite;
	-o-animation: blink 1.3s ease-in 1s infinite;
	animation: blink 1.3s ease-in 1s infinite;
}
 /*keyframe属性浏览器兼容性*/
@-webkit-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-o-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@-moz-keyframes blink {
    from {left: 10px;top: 0;}
    to {left: 320px;top: 0;}
}
@keyframes blink {
    from {left: -100px;top: 0;}
    to {left: 320px;top: 0;}
}

@keyframes 规则可以控制扫光动画的起始位置和终止位置,以上的参数根据自己的 logo 的大小和布局进行调整即可。

keyframes属性说明:

使用@keyframes规则,你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。指定的变化时发生时使用%,或关键字”from”和”to”,这是和0%到100%相同。0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。


Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转

css3 @media规则

        今天准备调整下手机模板,却始终没有找到手机对应的模板,通过分析html源码,发现PC和手机端输出的内容是完全一样的,只是通过CSS控制了手机端的显示格式和内容而已。通过查看css代码发现,手机端是通过@media实现的css规则自定义。觉得很酷炫,于是研究了下@meidia规则

语法:

@media 设备类型 and(设备特性){
//css代码
}

可以在不改变html内容情况下,根据媒体设备不同,浏览器窗口尺寸不同使用不同的css样式。

设备类型
        

设备特性

        

示例:

//窗口宽度大于900px
@media screen and(min-width:900px)
{
  body{
       font-size:25px;
      }
}
//窗口宽度大于500px小于900px
@media screen and(min-width:500px)and(max-width:900px)
{
  body{
       font-size:20px;
      }
}
//窗口宽度小于500px
@media screen and(max-width:500px)
{
  body{
       font-size:15px;
      }
}

css3 中类似的规则还有:

     @import 引入外部的CSS文件

     @font-face 设置自定义字体

     @keyframes 定义一个动画