一轮项目学习总结

1、鼠标放在图片上，图片放大

<div class="li_img">
            <img src="photo/2de0846c-655a-439b-add8-1524c5cd4643.jpg" alt="">
        </div>

css

.li_img{
    width: 350px;
    height: 230px;
    overflow: hidden;/*超出部分隐藏*/
}
.li_img img{
    width: 350px;
    height: 230px;
    transition:all 0.5s;/*0.5秒实现*/
    cursor:pointer;/*鼠标放上变小手*/
    
}
/*鼠标放在图片上，图片放大1.1倍*/
.li_img img:hover {
    transform:scale(1.1);
}

transition属性是一个速记属性有四个属性：transition-property, transition-duration, transition-timing-function, transition-delay。

transition-property	指定CSS属性的name，transition效果,如：width、background position
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

参考网址： http://www.runoob.com/cssref/css3-pr-transform.html

2、图标360度旋转 Transform

.zhuan{
    transition: transform 0.5s ;/* 旋转完用时*/
}
.zhuan:hover{
    transform: rotateZ(360deg);/*旋转360度*/
}

3、信息后添加样式：after选择器

after();方法，是在元素后添加插入指定的内容。

如需在被选元素前插入内容，请使用 before() 方法。

$("button").click(function(){
    $("p").after("<p>Hello world!</p>");
});

所有p标签后，都添加一个p标签及其内容

:after 选择器向选定的元素之后插入内容。

直接在css中添加，不需要在html中建立标签，用content属性，添加内容

.new:after{

content: "new";/*添加框内容*/

position: absolute;

height: 12px;

line-height: 12px;/*行高，垂直居中*/

right: 8px;

top: 3px;

color: #FFF;/*字体颜色*/

font-size: 10px;

background-color: #E04646;/*添加框背景颜色*/

border-radius: 2px;
}

4、鼠标放上，出现阴影、子框变小

/*鼠标放上，出现阴影、子元素外框变小*/
    $(".fukuan").mouseover(function(){
    /*添加阴影*/
    $(this).css("box-shadow","0px 10px 20px #8F8989");
        /*图片变小*/
    $(this).children(".fu_img").css({
        "width":"60px",
        "height":"60px"
    });    
    $(this).children(".fu_img").children("img").css({
        "width":"60px",
        "height":"60px"
    });

box-shadow,阴影属性

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

h-shadow	必需的。水平阴影的位置。允许负值
v-shadow	必需的。垂直阴影的位置。允许负值
blur	可选。模糊距离
spread	可选。阴影的大小
color	可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset	可选。从外层的阴影（开始时）改变阴影内侧阴影

当h-shadow或者v-shadow为0时，左右平分阴影面积

5、切换背景图片位置

两种背景图片样式放在一张图片中，通过改变背景图片位置，实现效果改变，如：图标变亮

/*切换背景图片位置*/
#qiehuan{
    width: 60px;
    height: 60px;
    background-image: url(photo/T1el0hXaJbXXXXXXXX.png);
    overflow: hidden;/*超出部分隐藏*/
    float: right;
    position: absolute;
    margin-top: 16px;
    left: 226px;
    background-size: 190px ;/*背景图片大小*/
    transition: background-position 2s;/*实现背景图片位置改变时间*/
    background-position:-60px -60px;/*背景图片位置*/
}

/*切换登陆页面*/
    $('#qiehuan').click(function(){
        var x=$("#saoma").css("display");
        if(x === "block"){
            $("#zhanghao").css("display","block");
            $('#saoma').css("display","none");
            $("#qiehuan").css("background-position","0px 0px");
        }else{
            $("#zhanghao").css("display","none");
            $('#saoma').css("display","block");
            $("#qiehuan").css("background-position","-60px -60px");
        }    
    });

一轮项目学习总结

猜你喜欢